Migrating to Angular 2

Why use Angular 2
● Takes advantage of modern web standards
○ ES6
○ TypeScript
○ Web Components
○ Observables
○ Module Loaders
○ ZoneJS
● Removes many unnecessary concepts from Angular 1
● Performance

What is ng-upgrade?
● Lets you run angular 1 and 2 in the same app
● Use Angular 1 service in Angular 2
● Use Angular 1 component in Angular 2
● Use Angular 2 service in Angular 1
● Use Angular 2 component in Angular 1

Preparation Overview
● $watch
● Isolate scope
● Controller as
● $parent
● .component()
● TypeScript
● .service()
● SystemJS

Format date with: $watch
<body ng-app="myApp" ng-controller= "MainCtrl as ctrl">
Date: <input type="text" ng-model="ctrl.rawDate">
<div>Formatted Date: {{ ctrl.dateStr}}</div>
</body>
function MainCtrl($scope) {
var self = this;
$scope.$watch('ctrl.rawDate', function(newVal) {
if (newVal !== undefined) {
self.dateStr = moment(self.rawDate).format('MMM DD YYYY');
}
});
}
Plunker

Format date with: ng-change
<h1>Date Formatter</ h1>
Date: <input type="text" ng-model="ctrl.rawDate" ng-change="ctrl.onChange()">
</body>
function MainCtrl() { }
MainCtrl.prototype.onChange = function() {
this.dateStr = moment(this.rawDate).format('MMM DD YYYY');
};
Plunker

Format date with: getterSetter
Date: <input type="text"
ng-model="ctrl.rawDate"
ng-model-options= "{ getterSetter: true }">
</body>
MainCtrl.prototype.rawDate = function(rawDate) {
if (rawDate !== undefined) {
this._rawDate = rawDate;
this.dateStr = moment(rawDate). format('MMM DD YYYY');
} else {
return this._rawDate;
}
};
Plunker

Format date with: function
Date: <input type="text" ng-model="ctrl.rawDate">
<div>Formatted Date: {{ ctrl.getDateStr()}}</div>
</body>
MainCtrl.prototype.getDateStr = function() {
if (this.rawDate !== undefined) {
return moment(this.rawDate).format('MMM DD YYYY');
}
};
Plunker

Image Share Demo
github.com/robianmcd/angular-migration

Why avoid $watch?
● Hard to reason about
● Not declarative
● Creates unnecessary watcher
● Not in Angular 2

angular.module('imageShare').directive('imageEditorModal', function () {
return {
restrict: 'E',
templateUrl: 'src/components/imageEditorModal/imageEditorModal.html',
link: function(scope) {
scope. close = function () {
scope. showModal = false;
scope. url = '';
scope. description = '';
};
scope. submit = function() {
scope. uploadNewImage ({/*...*/});
scope. close();
};
}
};
});
imageEditorModal

return {
restrict: 'E',
scope: {},
scope .$parent.showModal = false;
scope. url = '';
};
scope .$parent.uploadNewImage({ /*...*/});
scope. close();
};
}
};
});
imageEditorModal

return {
restrict: 'E',
scope: {
show: '=',
onSubmit: '&'
},
scope. show = false;
scope. url = '';
};
scope. onSubmit({$image: {/*...*/}});
scope. close();
};
}
};
imageEditorModal

<image-editor-modal></image-editor-modal>
imageList.html
Before
<image-editor-modal
show="showModal"
on-submit="uploadNewImage($image)">
</image-editor-modal>
After

Why use isolate scope?
● Encapsulation!
● Smaller components are easier to understand
● Easier to unit test
● This is how components work in Angular 2

imageEditorModal
return {
/*...*/
link: function (scope) {
scope. show = false;
scope. url = '';
};
scope. submit = function () {
scope. onSubmit({$image: {/*...*/}});
scope. close();
};
}
};
});

imageEditorModal
return {
/*...*/
controller: ImageEditorModalCtrl,
controllerAs: '$ctrl',
bindToController: true
};
});
function ImageEditorModalCtrl() { }
ImageEditorModalCtrl.prototype.close = function () {
this.show = false;
this.url = '';
this.description = '';
};
ImageEditorModalCtrl.prototype.submit = function () {
this.onSubmit({$image: {/*...*/}});
this.close();
};

imageEditorModal.html
<div ng-show="show">
<div class="modal-background" ng-click="cancel()"></div>
<div class="modal-content">
<form name="form" ng-submit="submit()">
<div class="form-group">
< label for="url">Image Url</label>
< input id="url" ng-model="url">
</div>
< label for="description">Description</ label>
< textarea id="description" ng-model="description">
</ textarea>
</div>
<div class="pull-right"></div>
</form>
</div>
</div>

imageEditorModal.html
<div ng-show="$ctrl.show">
<div class="modal-background" ng-click="$ctrl.cancel()"></div>
<div class="modal-content">
<form name="form" ng-submit="$ctrl.submit()">
< label for="url">Image Url</label>
< input id="url" ng-model="$ctrl.url">
</div>
< label for="description">Description</ label>
< textarea id="description" ng-model="$ctrl.description">
</ textarea>
</div>
<div class="pull-right"></div>
</form>
</div>
</div>

Why use controllers over link?
● Removes redundant concept
● Let’s you use the “controller as” syntax
● Link functions don’t exist in Angular 2

Why use “controller as”?
● Don’t have to worry about scope inheritance
● Better organization
● Works well with ES6 classes

Why use bindToController?
● Lets you use your controller for everything
● Don’t need to use $scope anymore, which
isn’t in Angular 2

Why avoid $parent?
● Leads to brittle code
● Breaks encapsulation
● Makes unit testing hard
● Requires understanding scope inheritance
● It’s just the worst
● Can’t use it in Angular 2

imageList
angular.module('imageShare').controller('ImageListCtrl', ImageListCtrl);
function ImageListCtrl(api) {
var self = this;
this.api = api;
api.getImages().then(function (images) {
self.images = images;
});
}
ImageListCtrl.prototype.addImage = function () {
this.showModal = true;
};
ImageListCtrl.prototype.uploadNewImage = function (image) {
var self = this;
this.api.createImage(image).then(function (createdImage) {
self.images.unshift(createdImage);
});
};

imageList
angular.module('imageShare').component('imageList', {
templateUrl: 'src/components/imageList/imageList.html',
controller: ImageListComponent
});
function ImageListComponent(api) {
var self = this;
this.api = api;
api.getImages().then(function (images) {
self.images = images;
});
}
ImageListComponent.prototype.addImage = function () {
this.showModal = true;
};
ImageListComponent.prototype.uploadNewImage = function (image) {
var self = this;
this.api.createImage(image).then(function (createdImage) {
self.images.unshift(createdImage);
});
};

app.js
var app = angular.module('imageShare', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/images', {
controller: 'ImageListCtrl as $ctrl'
})
.otherwise({
redirectTo: '/images'
});
}]);

app.js
var app = angular.module('imageShare', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/images', {
template: '<image-list></image-list>'
})
.otherwise({
redirectTo: '/images'
});
}]);

Why use .component()?
● Nicer syntax than .directive()
● Uses “controller as” by default
● Uses bindToController by default
● Consolidates many redundant concepts into
components. E.g. ng-controller, .
controller(), ng-include, router
controllers, router views, .directive()
● Very similar to components in Angular 2

imageEditorModal
function ImageEditorModalComponent() { }
ImageEditorModalComponent.prototype.close = function() { /*...*/ };
ImageEditorModalComponent.prototype.submit = function() { /*...*/ };

imageEditorModal
class ImageEditorModalComponent {
close() { /*...*/ }
submit() { /*...*/ }
}

apiService.ts
var IMAGES_URL = 'https://image-share.herokuapp.com/api/images';
angular.module('imageShare').factory('api', function ($http: ng.IHttpService) {
function getImages() {
return $http.get(IMAGES_URL).then((response) => {
return response.data;
});
}
function createImage(image) {
return $http.post(IMAGES_URL, image).then((response) => {
});
}
return {
getImages: getImages,
createImage: createImage
};
});

apiService.ts
var IMAGES_URL = 'https://image-share.herokuapp.com/api/images';
class ApiService {
constructor(private $http: ng.IHttpService) {
}
getImages(): ng.IPromise<Image[]> {
return this.$http.get(IMAGES_URL).then((response) => {
});
}
createImage(image): ng.IPromise<Image> {
return this.$http.post(IMAGES_URL, image).then((response) => {
});
}
}
angular.module('imageShare').service('api', ApiService);

Why use .service()?
● Works well with ES6 Classes
● Removes another redundant concept: .
factory()
● Angular 2 services are just ES6 classes

imageEditorModal
show: boolean = false;
url: string;
description: string;
onSubmit: (args: {$image: Image}) => void;
close() { /*...*/};
submit() {/*...*/};
}
angular.module('imageShare').component('imageEditorModal', {
bindings: {
show: '=',
onSubmit: '&'
},
controller: ImageEditorModalComponent
});

imageEditorModal
show: boolean = false;
url: string;
onSubmit: (args: {$image: Image}) => void;
close() { /*...*/};
submit() {/*...*/};
}
const imageEditorModalOptions = {
bindings: {
show: '=',
onSubmit: '&'
},
};
export {ImageEditorModalComponent, imageEditorModalOptions};

Why use SystemJS?
● Lets you use ES6 modules
● Angular 2 needs a module loader

index.html
<script src="/node_modules/es6-shim/es6-shim.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/upgrade.dev.js"></script>
Add the following scripts

adapter.ts
import {UpgradeAdapter} from 'angular2/upgrade';
export let adapter = new UpgradeAdapter();

app.ts
import {adapter} from "../../adapter";
//...
adapter.bootstrap(document.documentElement , ['imageShare']);

gulpfile.js
var gulp = require('gulp');
var ts = require('gulp-typescript');
gulp.task('ts', function () {
return gulp.src([
'src/**/*.ts',
'typings/**/*.ts',
//Taken from https://github.com/angular/angular/issues/7280
'node_modules/angular2/typings/browser.d.ts'
])
.pipe( ts({
target: 'ES5',
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
moduleResolution: 'node'
}))
.pipe( gulp.dest('src'));
});

app.ts
import {HTTP_PROVIDERS, Http} from "angular2/http";
import 'rxjs/add/operator/map';
adapter.addProvider(HTTP_PROVIDERS);
angular.module('imageShare', ['ngRoute'])
.factory('http', adapter.downgradeNg2Provider(Http));

apiService.ts
import {Http, Headers} from "angular2/http";
import {Observable} from "rxjs/Observable";
const IMAGES_URL = 'https://image-share.herokuapp.com/api/images';
export default class ApiService {
constructor(private http: Http) { }
getImages(): Observable<Image[]> {
return this.http.get(IMAGES_URL)
. map(res => res.json());
}
createImage(image): Observable<Image> {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(IMAGES_URL,JSON.stringify(image), { headers:
headers})
.map(res => res.json());
}
}

Calling getImages()
api.getImages().subscribe((images) => {
//Do something with images
});

Migrate ImageList to Angular 2

ImageListComponent.ts
import ApiService from "../../services/apiService";
class ImageListComponent {
//...
uploadNewImage (image) {
this.api.createImage(image).subscribe((createdImage) => {
this.images.unshift(createdImage);
});
};
}
const imageListOptions = {
controller: ImageListComponent
};
export {ImageListComponent, imageListOptions}

ImageListComponent.ts
import {Component} from "angular2/core";
@Component({
selector: 'image-list',
directives: [adapter.upgradeNg1Component( 'imageEditorModal')]
})
export class ImageListComponent {
//...
uploadNewImage (event) {
this.api.createImage(event.$image).subscribe((createdImage) => {
this.images.unshift(createdImage);
});
};
}

ImageList.html
<div>
<div class="input-group">
<button class="btn btn-primary" (click)="addImage()">Add Image</button>
</div>
<ul class="list-group">
<li *ngFor="#image of images" class="list-group-item">
<div class="media">
< div class="media-left">
< img [src]="image.url">
</ div>
< div class="media-body">
{{image. description}}
</ div>
</div>
</li>
</ul>
</div>
<image-editor-modal
[(show)]="showModal"
(onSubmit)="uploadNewImage($event)">
</image-editor-modal>

app.ts
import {ImageListComponent} from "../imageList/imageListComponent";
.directive('imageList', adapter.downgradeNg2Component(ImageListComponent));
adapter.upgradeNg1Provider( 'api', {asToken: ApiService});

imageEditorModal
//...
close() {
this.show = false;
this.url = '';
};
}
const imageEditorModalOptions = {
bindings: {
show: '=',
onSubmit: '&'
},
};
export {ImageEditorModalComponent, imageEditorModalOptions};

imageEditorModal
import {Component, Input, Output, EventEmitter} from "angular2/core";
@Component({
selector: 'image-editor-modal'
})
export class ImageEditorModalComponent {
url: string;
@Input() show: boolean;
@Output() showChange = new EventEmitter();
@Output() onSubmit = new EventEmitter();
close() {
this.showChange.emit(false);
this.url = '';
};
submit() {
this.onSubmit.emit({url: this.url, description: this.description});
this.close();
};
}

Migrate ApiService to Angular 2

ApiService.ts
import {Injectable} from "angular2/core";
const IMAGES_URL = 'https://image-share.herokuapp.com/api/images';
@Injectable()
export default class ApiService {
constructor(private http: Http) {
}
getImages(): Observable<Image[]> {
return this.http.get(IMAGES_URL)
}
createImage(image): Observable<Image> {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(IMAGES_URL,JSON.stringify(image), { headers:
headers})
}

App.ts
.service('api', ApiService)
.factory('http', adapter.downgradeNg2Provider(Http))
adapter.addProvider(ApiService);

ApiService.ts
import {ROUTER_DIRECTIVES, RouteConfig, Route, ROUTER_PROVIDERS} from
"angular2/router";
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
@Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
new Route({
path: '/home',
name: 'ImageList',
component: ImageListComponent,
useAsDefault: true
})
])
class App { }
bootstrap(App, [HTTP_PROVIDERS, ROUTER_PROVIDERS, ApiService]);

Summary
● Angular 2 is based on components and
services
● Incremental migration
● Angular 1 best practices
● Not all Angular 1 apps need to be upgraded

Rob McDiarmid
Slides: tinyurl.com/ng1-to-ng2
@robianmcd

Migrating to Angular 2

More Related Content

What's hot

Viewers also liked

Similar to Migrating to Angular 2

More from FITC

Migrating to Angular 2