Angular%201%20to%20angular%202
•Download as PPTX, PDF•
1 like•801 views
Angular 2.0 introduces significant changes from Angular 1.x including a new component-based architecture, use of TypeScript for static typing, and improved performance. The document discusses how to prepare Angular 1.x applications for migration by refactoring into components and using TypeScript. It also provides an overview of key differences in Angular 2.0 like bootstrapping, data binding, dependency injection and services.
Report
Share
More Related Content
What's hot
What's hot (19)
Similar to Angular%201%20to%20angular%202
Similar to Angular%201%20to%20angular%202 (20)
More from Ran Wahle
More from Ran Wahle (20)
Recently uploaded
Recently uploaded (20)
Angular%201%20to%20angular%202
- 1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Angular 1 to Angular 2 Ran Wahle ran.wahle@gmail.com
- 2. A bit about angular 2.0 Different app structure Migration pathes Agenda
- 3. Angular 1.x Based on ES5 Based on jqLite (subset of jQuery) Low performance
- 4. Why break something that works? New standards New change detection Performance
- 5. Angular 1.x pains $scope Heavy data binding mechanism Opinionated
- 6. Angular 2.0 Less opinionated ES 2015 Components New databinding New DI
- 7. Components Angular 2.0 app built on components Each component is a javascript class (function in es5) It has a selector, view and a
- 8. import {Component, View, bootstrap} from 'angular2/core'; // Annotation section @Component({ selector: 'my-app' }) @ View({ template: '<h1>Hello {{ name }}</h1>' }) // Component controller class MyAppComponent { name: string; constructor() { this.name = 'Alice'; } } bootstrap(MyAppComponent); Meet the component “controller” view
- 10. Angular 2.0 bootstrapping Create a component Create a template Bootstrap your component Use transpiler
- 11. Angular 1.x bootstrapping Create module Create a controller Create HTML template Register your controller in a module Bootstrap your module in your application
- 12. DI Using ES6 / typescript import No need for double DI Need to load the JS code The component needs to be injected to the module
- 13. Import the directive Use 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
- 14. Data Binding [attribute] (events) #local variables No ng-x are needed
- 15. Prepare for migration Our goal: When moving to angular 2.0 – the logics will be almost intact
- 16. How to get ready? “Componentize” your app Start using typescript
- 17. Why typescript You may write pure js code in .ts files You may use new coding standards Backward compatibility
- 18. How to “Componentize” Build your angular 1.x app on directives Declare each directive inside its own module Each directive may have its own controller Make your main module consume other modules
- 19. <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
- 20. import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './app.component'; bootstrap(AppComponent); Bootstrap angular 2.0
- 21. Angular 2.0 dependencies SystemJs Typescript transpiler Reactive Js
- 22. var module = angular.module('ordersApp', ['ordersApp.services.productService', 'ordersApp.services.orderService', 'ordersApp.directives.orderDetails']); //make your main app as a directive module.directive('myApp', [function () { template: `<template>`, controller: ‘yourControllerName’ Your main module
- 23. Angular 2.0 directive Angular 1.x Angular 2.0 Scope input controller class template template
- 25. Services Angular 1.x Angular 2.0 DI Injectable
- 26. Demo Services
- 27. Filters Angular 1.x Angular 2.0 Filter pipe Just return function Implements transform
- 28. Demo Filters
- 29. Resources http://angular.io Change detection By Victor Savkin https://www.youtube.com/watch?v=jvKGQSFQf10 Angular-2 now https://github.com/pbastowski/angular2-now My blog: http://blogs.Microsoft.co.il/ranw
- 30. Angular 2.0 is completely different It is now in beta We can get ready “Componentize” Typescript
- 31. Questions
- 32. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Thanks ran.wahle@gmail.com