Post on 20-Jan-2017
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Angular 1 to Angular 2
Ran Wahleran.wahle@gmail.com
A bit about angular 2.0Different app structureMigration pathes
Agenda
Angular 1.xBased on ES5Based on jqLite (subset of jQuery)Low performance
Why break something that works?New standardsNew change detectionPerformance
Angular 1.x pains$scopeHeavy data binding mechanismOpinionated
Angular 2.0Less opinionatedES 2015 ComponentsNew databindingNew DI
ComponentsAngular 2.0 app built on componentsEach component is a javascript class (function in es5)It has a selector, view and a
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
<my-app></my-app>
Use the component
Angular 2.0 bootstrappingCreate a componentCreate a template Bootstrap your componentUse transpiler
Angular 1.x bootstrappingCreate moduleCreate a controller Create HTML templateRegister your controller in a moduleBootstrap your module in your application
DIUsing ES6 / typescript importNo need for double DI
Need to load the JS codeThe component needs to be injected to the module
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
Data Binding[attribute](events)#local variables
No ng-x are needed
Prepare for migrationOur goal: When moving to angular 2.0 – the logics will be almost intact
How to get ready?“Componentize” your appStart using typescript
Why typescriptYou may write pure js code in .ts filesYou may use new coding standardsBackward compatibility
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
<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
import {bootstrap} from 'angular2/platform/browser';import {AppComponent} from './app.component';
bootstrap(AppComponent);
Bootstrap angular 2.0
Angular 2.0 dependenciesSystemJsTypescript transpilerReactive Js
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
Angular 2.0 directiveAngular 1.x Angular 2.0
Scope input
controller class
template template
Demo
Directives diff
ServicesAngular 1.x Angular 2.0
DI Injectable
Demo
Services
FiltersAngular 1.x Angular 2.0
Filter pipe
Just return function Implements transform
Demo
Filters
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
Angular 2.0 is completely differentIt is now in beta We can get ready “Componentize”Typescript
Questions
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Thanks
ran.wahle@gmail.com