├── a2 ├── box-app.html ├── box-list.html ├── app.css ├── index.html └── app.js ├── box-app.gif ├── a1 ├── app.css ├── index.html └── app.js └── README.md /a2/box-app.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /box-app.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davideast/angularu-a2-migration/HEAD/box-app.gif -------------------------------------------------------------------------------- /a2/box-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | {{ box.value }} 5 |
6 | -------------------------------------------------------------------------------- /a1/app.css: -------------------------------------------------------------------------------- 1 | button { 2 | display: block; 3 | } 4 | 5 | .box { 6 | height: 200px; 7 | width: 200px; 8 | background: #2c2c2c; 9 | color: #fafafa; 10 | display: inline-block; 11 | margin: 5px; 12 | } 13 | -------------------------------------------------------------------------------- /a2/app.css: -------------------------------------------------------------------------------- 1 | button { 2 | display: block; 3 | } 4 | 5 | .box { 6 | height: 200px; 7 | width: 200px; 8 | background: #2c2c2c; 9 | color: #fafafa; 10 | display: inline-block; 11 | margin: 5px; 12 | } 13 | -------------------------------------------------------------------------------- /a2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Angular 2 ES5 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Migrating to Angular 2 2 | 3 | ### David East - [@_davideast](https://twitter.com/_davideast) 4 | ### Conference: [AngularU](http://angularu.com/ng) 5 | ### Video: https://www.youtube.com/watch?v=KWz7IAm35UM 6 | 7 | More accurately named: How to use component-based directives in Angular 1 to make life much easier in Angular 2. 8 | 9 | ##### Key topics: Angular 1 components, Angular 2 components, Observables 10 | 11 | ### Outline 12 | - Angular 1 controller-based app 13 | - Angular 1 component-based app 14 | - Observables for monitoring changes 15 | - Angular 2 component app 16 | 17 | ### The app we'll build 18 | ![The app we'll build](./box-app.gif) 19 | 20 | 21 | ### Once and future repo 22 | https://github.com/davideast/angularu-a2-migration 23 | -------------------------------------------------------------------------------- /a1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Angular 1.4 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | {{ box.value }} 20 |
21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /a1/app.js: -------------------------------------------------------------------------------- 1 | 2 | angular 3 | .module('boxes', []) 4 | .controller('BoxCtrl', BoxCtrl) 5 | .directive('boxList', BoxListDirective) 6 | .service('boxService', BoxService); 7 | 8 | function BoxService() { 9 | this.boxes = [{ value: 1 }]; 10 | this.boxSubject = new Rx.ReplaySubject(); 11 | this.boxSubject.onNext(this.boxes); 12 | } 13 | BoxService.prototype.add = function add() { 14 | this.boxes.push({ value: this.boxes.length + 1 }); 15 | this.boxSubject.onNext(this.boxes); 16 | }; 17 | 18 | function BoxCtrl(boxService) { 19 | boxService.boxSubject.subscribe(function(boxes) { 20 | this.boxes = boxes; 21 | }.bind(this)); 22 | } 23 | BoxCtrl.$inject = ['boxService']; 24 | 25 | function BoxListDirective() { 26 | return { 27 | controllerAs: 'boxListCtrl', 28 | controller: ['$scope', '$attrs', 'boxService', function($scope, $attrs, boxService) { 29 | this.boxes = $scope.$eval($attrs.boxes); 30 | 31 | this.add = function add() { 32 | boxService.add(); 33 | }; 34 | 35 | }] 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /a2/app.js: -------------------------------------------------------------------------------- 1 | 2 | function BoxService() { 3 | this.boxes = [{ value: 1 }]; 4 | this.boxSubject = new Rx.ReplaySubject(); 5 | this.boxSubject.onNext(this.boxes); 6 | } 7 | BoxService.prototype.add = function add() { 8 | this.boxes.push({ value: this.boxes.length + 1 }); 9 | this.boxSubject.onNext(this.boxes); 10 | }; 11 | 12 | var boxList = angular. 13 | Component({ 14 | selector: 'box-list', 15 | properties: ['boxes'] 16 | }). 17 | View({ 18 | templateUrl: './box-list.html', 19 | directives: [angular.NgFor] 20 | }). 21 | Class({ 22 | constructor: [BoxService, function(boxService) { 23 | this.boxService = boxService; 24 | }] 25 | }); 26 | 27 | var boxApp = angular. 28 | Component({ 29 | selector: 'box-app', 30 | appInjector: [BoxService] 31 | }). 32 | View({ 33 | templateUrl: './box-app.html', 34 | directives: [boxList] 35 | }). 36 | Class({ 37 | constructor: [BoxService, function(boxService) { 38 | boxService.boxSubject.subscribe(function(boxes) { 39 | this.boxes = boxes; 40 | }.bind(this)); 41 | }] 42 | }); 43 | 44 | angular.bootstrap(boxApp); 45 | --------------------------------------------------------------------------------