AngularJS roadmap.

45
Angular roadmap

Transcript of AngularJS roadmap.

Page 1: AngularJS roadmap.

Angularroadmap

Page 2: AngularJS roadmap.
Page 3: AngularJS roadmap.
Page 5: AngularJS roadmap.

© whichcatisyourjavascriptframework.com

Page 6: AngularJS roadmap.

© whichcatisyourjavascriptframework.com

Page 7: AngularJS roadmap.

© whichcatisyourjavascriptframework.com

Page 8: AngularJS roadmap.

© whichcatisyourjavascriptframework.com

Page 9: AngularJS roadmap.

© whichcatisyourjavascriptframework.com

Page 10: AngularJS roadmap.

React vsAngular

Page 11: AngularJS roadmap.

React +Angular

Page 12: AngularJS roadmap.

invisionapp.com

Page 13: AngularJS roadmap.

upwork.com

Page 14: AngularJS roadmap.

timelyapp.com

Page 15: AngularJS roadmap.

privat24.ua

Page 16: AngularJS roadmap.

Angular 1.5

Page 17: AngularJS roadmap.

+ • dependency Injection

• separate structure (modules, view-controller-service)

• services

• custom directives and build-in

• testing e2e…

• open source community

• huge knowledge base

• easy start

Page 18: AngularJS roadmap.
Page 19: AngularJS roadmap.

Dependency Injectionhttps://docs.angularjs.org/guide/di

Page 20: AngularJS roadmap.

Viewhttps://docs.angularjs.org/guide/templates

Page 21: AngularJS roadmap.

Controllerhttps://docs.angularjs.org/guide/controller

Page 22: AngularJS roadmap.

Servicehttps://docs.angularjs.org/guide/services

Page 23: AngularJS roadmap.

Directivehttps://docs.angularjs.org/guide/directive

Page 24: AngularJS roadmap.

Component (Angular 1.5)https://docs.angularjs.org/guide/component

Page 25: AngularJS roadmap.

Documentationhttps://docs.angularjs.org/api

Page 26: AngularJS roadmap.

Out of the box• $q (promises) • $http +interceptors

• $filter• form validation

• animation• ng-repeat

Page 27: AngularJS roadmap.

Find out before starting

• $digest how it work in Angular 1.5. When it is executed? http://www.bennadel.com/blog/2595-using-scope-digest-as-a-performance-optimization-in-angularjs.htm

• how often executes and difference between $watch, $watchCollection, $watch(.., true) http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm

• $broadcast, $on http://www.bennadel.com/blog/2725-how-scope-broadcast-interacts-with-isolate-scopes-in-angularjs.htm

• sharing data between controllers (through services) https://egghead.io/lessons/angularjs-sharing-data-between-controllers

• how often filters are executed in ng-repeat (try $filter in controller) http://www.bennadel.com/blog/2489-how-often-do-filters-execute-in-angularjs.htm

• difference between ng-show and ng-if, setTimeout() and $timeout http://www.bennadel.com/blog/2548-don-t-forget-to-cancel-timeout-timers-in-your-destroy-events-in-angularjs.htm

Page 28: AngularJS roadmap.

Tips• controllerAs syntax

• use ng-repeat instead of ui-grid

• angular-moment for dates

• resolve in ui-router (freeze app, difficult debug)

• add loading (when send request) test on slow internet

• avoid nested ng-repeat

• avoid too many $watch

Page 29: AngularJS roadmap.

Open source community• Bootstrap

https://angular-ui.github.io/bootstrap/

• Angular-UI https://angular-ui.github.io/

• UI-router https://github.com/angular-ui/ui-router

• Angular material https://material.angularjs.org/

• Formly http://angular-formly.com/

• RestAngular https://github.com/mgonto/restangular

Page 30: AngularJS roadmap.

AngularUIangular-ui.github.io

Page 31: AngularJS roadmap.

UI Bootstraphttps://angular-ui.github.io/bootstrap/

Page 32: AngularJS roadmap.

UI Routerhttps://github.com/angular-ui/ui-router

Page 33: AngularJS roadmap.

Bootstrap 3. Gridif ie10+

Page 34: AngularJS roadmap.

Angular materialhttps://material.angularjs.org

Page 35: AngularJS roadmap.

Angular material. Layout.

https://material.angularjs.org

Page 36: AngularJS roadmap.

CSS Flexbox

Page 37: AngularJS roadmap.

Angular material. Responsive.

https://material.angularjs.org

Page 38: AngularJS roadmap.

Angular material. Controls.

https://material.angularjs.org

Page 39: AngularJS roadmap.

• Formly http://angular-formly.com/

• RestAngular https://github.com/mgonto/restangular

Page 40: AngularJS roadmap.

Grunt > Gulp > Webpack

Page 41: AngularJS roadmap.

Yeomenhttp://yeoman.io/

Page 42: AngularJS roadmap.

Links• https://egghead.io• https://bennadel.com

• https://github.com/johnpapa/angular-styleguide• https://toddmotto.com/

• http://thoughtram.io/• https://gitter.im/dev-ua/angularjs

Page 43: AngularJS roadmap.

Conclusion

• Now: many projects on AngularJS 1.X + ES5 TypeScript, ES6, CoffeeScript.

• Feature: Angular2, TypeScript, move to clouds (RestAPI).

Page 44: AngularJS roadmap.

Questions&

Answer