Angular%201%20to%20angular%202
Transcript of Angular%201%20to%20angular%202
![Page 1: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/1.jpg)
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Angular 1 to Angular 2
![Page 2: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/2.jpg)
A bit about angular 2.0Different app structureMigration pathes
Agenda
![Page 3: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/3.jpg)
Angular 1.xBased on ES5Based on jqLite (subset of jQuery)Low performance
![Page 4: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/4.jpg)
Why break something that works?New standardsNew change detectionPerformance
![Page 5: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/5.jpg)
Angular 1.x pains$scopeHeavy data binding mechanismOpinionated
![Page 6: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/6.jpg)
Angular 2.0Less opinionatedES 2015 ComponentsNew databindingNew DI
![Page 7: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/7.jpg)
ComponentsAngular 2.0 app built on componentsEach component is a javascript class (function in es5)It has a selector, view and a
![Page 8: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/8.jpg)
import {Component, View, bootstrap} from 'angular2/core';
// Annotation section@Component({ selector: 'my-app'})@ View({ template: '<h1>Hello {{ name }}</h1>'})// Component controllerclass MyAppComponent { name: string;
constructor() { this.name = 'Alice'; }}
bootstrap(MyAppComponent);
Meet the componentDependency
injection
“controller”
view
![Page 9: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/9.jpg)
<my-app></my-app>
Use the component
![Page 10: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/10.jpg)
Angular 2.0 bootstrappingCreate a componentCreate a template Bootstrap your componentUse transpiler
![Page 11: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/11.jpg)
Angular 1.x bootstrappingCreate moduleCreate a controller Create HTML templateRegister your controller in a moduleBootstrap your module in your application
![Page 12: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/12.jpg)
DIUsing ES6 / typescript importNo need for double DI
Need to load the JS codeThe component needs to be injected to the module
![Page 13: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/13.jpg)
Import the directiveUse directive inside the view
import {Component, View, bootstrap, For} from 'angular2/angular2‘ or another external module;
template: `<ul> <li *for="#name of names"> {{ name }} </li> </ul>`, directives: [For]}
Import and directives
![Page 14: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/14.jpg)
Data Binding[attribute](events)#local variables
No ng-x are needed
![Page 15: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/15.jpg)
Prepare for migrationOur goal: When moving to angular 2.0 – the logics will be almost intact
![Page 16: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/16.jpg)
How to get ready?“Componentize” your appStart using typescript
![Page 17: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/17.jpg)
Why typescriptYou may write pure js code in .ts filesYou may use new coding standardsBackward compatibility
![Page 18: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/18.jpg)
How to “Componentize”Build your angular 1.x app on directivesDeclare each directive inside its own moduleEach directive may have its own controller Make your main module consume other modules
![Page 19: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/19.jpg)
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<!-- 2. Configure SystemJS --> <script> System.config({ transpiler: 'typescript', typescriptOptions: {emitDecoratorMetadata: true}, packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('./app/boot') .then(null, console.error.bind(console)); </script>
</head>
<!-- 3. Display the application --><body><my-app>Loading...</my-app></body>
Angular 2.0 boilerplate
Boostrapping code
Angular 2.0 dependencies
![Page 20: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/20.jpg)
import {bootstrap} from 'angular2/platform/browser';import {AppComponent} from './app.component';
bootstrap(AppComponent);
Bootstrap angular 2.0
![Page 21: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/21.jpg)
Angular 2.0 dependenciesSystemJsTypescript transpilerReactive Js
![Page 22: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/22.jpg)
var module = angular.module('ordersApp', ['ordersApp.services.productService', 'ordersApp.services.orderService', 'ordersApp.directives.orderDetails']);
//make your main app as a directivemodule.directive('myApp', [function () {template: `<template>`,
controller: ‘yourControllerName’
Your main module
![Page 23: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/23.jpg)
Angular 2.0 directiveAngular 1.x Angular 2.0
Scope input
controller class
template template
![Page 24: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/24.jpg)
Demo
Directives diff
![Page 25: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/25.jpg)
ServicesAngular 1.x Angular 2.0
DI Injectable
![Page 26: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/26.jpg)
Demo
Services
![Page 27: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/27.jpg)
FiltersAngular 1.x Angular 2.0
Filter pipe
Just return function Implements transform
![Page 28: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/28.jpg)
Demo
Filters
![Page 29: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/29.jpg)
Resourceshttp://angular.ioChange detection By Victor Savkinhttps://www.youtube.com/watch?v=jvKGQSFQf10Angular-2 now https://github.com/pbastowski/angular2-nowMy blog: http://blogs.Microsoft.co.il/ranw
![Page 30: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/30.jpg)
Angular 2.0 is completely differentIt is now in beta We can get ready “Componentize”Typescript
![Page 31: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/31.jpg)
Questions
![Page 32: Angular%201%20to%20angular%202](https://reader035.fdocuments.us/reader035/viewer/2022081604/58819c7e1a28ab1a398b4615/html5/thumbnails/32.jpg)
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Thanks