Future-proof AngularJS

This talk will show you how to develop an Angular 1.x app in such a way that you'll have an easy transition to Angular 2. By using all features Angular 1 offers that will help you migrate to Angular 2 later on.

This talk was presented at the AngularJS Meetup Berlin.

Transcript

1. Future-proof AngularJS
2. Timeline - vanilla
3. Timeline - vanilla - 2005: Prototype & YUI - 2006: Mootools - 2006: jQuery
4. Timeline - vanilla - 2005: Prototype & YUI - 2006: Mootools - 2006: jQuery - 2009: node.js - 2009: underscore - 2009: AngularJS (2012: 1.0.0) - 2010: backbone - 2010: knockout - 2011: Ember.js - 2012: RxJS - 2013: react.js - 2015: Angular 2 - 2015: EmberJS 2
5. History
6. Now
7. ES2015
8. FIRST "Components should be focused, independent, reusable, small & testable." - Addy Osmani
9. Angular 2 - No DDO - No $scope - No angular.module - No jqLite - mobile first (offline first) - web components - i18n - sparate di, router, change detection (observables) - server side rendering - new template syntax - Typescript - "classes" - annotations (decorators) - zones
10. Let's get started
11. Typescript or at least ES2015
12. Angular's Getter & Setter angular .module('myApp', []);
 
 angular .module('myApp') .controller('Controller', function() {}); 
 angular .module('myApp') .service('DataService', function() {});
13. ng-app="myApp" angular.module('myApp', []);
 
 angular.bootstrap(document, ['myApp']);
14. $scope & ng-controller - don't use $scope, use this - ng-controller="Controller as ctrl" instead - avoid business logic, store only presentation logic - controllers should only be used in routes and directives
15. ng-controller="CakeCtrl" don't use ng-controller
16. ng-controller="CakeCtrl" don't use ng-controller use directives with controllers instead
17. ng-controller="CakeCtrl" don't use ng-controller use directives with controllers instead and if you do, make sure to use controller-as
18. ng-controller="Controller as ctrl" angular
 .module('myApp')
 .controller('controller', controller);
 
 function controller($scope) {
 $scope.name = 'Angular';
 $scope.method = function() {};
 }
19. ng-controller="Controller as ctrl" angular
 .module('myApp')
 .controller('controller', controller);
 
 function controller() {
 this.name = 'Angular';
 this.method = function() {};
 }
20. ng-controller="Controller as ctrl" angular
 .module('myApp')
 .controller('controller', controller);
 
 function controller() {
 let vm = this;
 vm.name = 'Angular';
 vm.method = function() {};
 }
21. Directives - use controller - controller with controllerAs - bindToController - name has to contain a - - isolate scope for elements - shared scope for attributes - events in link: scope.$on('$destroy')
22. Directives angular
 .module('myApp')
 .directive('CakeComponent', CakeComponent)
 
 function CakeComponent() {
 return {
 scope: {},
 controller: 'CakeController',
 controllerAs: 'cakeCtrl',
 bindToController: true
 };
 }
23. Directives angular
 .module('myApp')
 .directive('cakeDirective', cakeDirective);
 
 function cakeDirective() {
 return {
 restrict: 'A',
 scope: true,
 controller: function() {},
 controllerAs: 'ctrl',
 bindToController: {
 obj: '='
 }
 };
 }

24. Factory vs Service
25. Factory vs Service Service
26. Services - contains business logic (model) - does not manipulate the original input
27. Service angular
 .module('myApp')
 .service('CakeService', CakeService)
 
 function CakeService() {
 this.cakes = [];
 this.addCake = (cake) => this.cakes.push(cake)
 }
28. Service angular
 .module('myApp')
 .service('CakeService', CakeService)
 
 function CakeService() {
 const cakeService = this; cakeService.cakes = [];
 cakeService.addCake = (cake) => this.cakes.push(cake) }
29. Service angular
 .module('myApp')
 .service('CakeService', CakeService)
 
 function CakeService() { let cakes = [];
 function addCake(cake) { cakes.push(cake) } const cakeService = {addCake}; return cakeService;
 }
30. Service angular
 .module('myApp')
 .service('CakeService', CakeService);
 
 class CakeService {
 constructor() {
 this.cakes = [];
 }
 addCake(cake) {
 this.cakes.push(cake)
 }
 }
31. Service angular
 .module('myApp')
 .service('CakeService', CakeService);
 
 const BASE_URL = '';
 class CakeService {
 constructor($http) {
 this.$http = $http;
 }
 getCakes() {
 return this.$http
 .get(BASE_URL)
 .then(res => res.data);
 }
 }
 CakeService.$inject = ['$http'];
32. ng-init="hello='angular'" don't use ng-init init data via services and resolve (routing) or before bootstrapping or via a rendered constant or pass data via directives (&, =, @)
33. Routing new angular router <ng-viewport> Component Controller $router and append $routeConfig to the controller ui router is also good
34. Templates - Use One-time-binding <div>{{::value}}</div> - Template Strings `Hello ${var} How are you today? `
35. Promises $q(function(resolve, reject) {
 $http('url')
 .then(resolve)
 .catch(reject)
 });
37. ngUpgrade
38. Structure - common/ - filter.js - components/ - hello/ - hello.directive.js - hello.route.js - hello.template.js - hello.controller.js - user/ - user.directive.js - user.template.js - user.controller.js - user.service.js - app.js (bootstraps with each module)
39. Conclusion - controller-as instead of $scope - everything is a directive - Controllers act as View Model (Presenter Logic) - Services act as Model (Business Logic) - TypeScript & ES6 - JSPM / SystemJS / Webpack - Component based folder structure - => easy migration path to Angular2
40. About ngPascal(20) .engineering(airships) .at(bitcrowd);
41. ng-fin="thank you"
42. Links - https://github.com/angular/ngUpgrade - https://github.com/angular-class/NG6-starter - https://github.com/gocardless/angularjs-style-guide - https://github.com/gocardless/es6-angularjs - http://addyosmani.com/first/ - http://angularjs.blogspot.de/2015/09/angular-2-survey-results.html - http://angularjs.blogspot.de/2015/08/angular-1-and-angular-2-coexisten - http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-an - http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1. es6.html - http://toddmotto.com/digging-into-angulars-controller-as-syntax/