Download to read offline
![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](https://cdn.statically.io/img/image.slidesharecdn.com/yg0v2a6ntcolqi0kj5fn-signature-cd0ee451b332303e8d141d4af61f33332f56a1959eb87989518e8907806cd732-poli-151222090238/75/Angular-201-20to-20angular-202-13-2048.jpg)
![Data Binding
[attribute]
(events)
#local variables
No ng-x are needed](https://cdn.statically.io/img/image.slidesharecdn.com/yg0v2a6ntcolqi0kj5fn-signature-cd0ee451b332303e8d141d4af61f33332f56a1959eb87989518e8907806cd732-poli-151222090238/75/Angular-201-20to-20angular-202-14-2048.jpg)
![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](https://cdn.statically.io/img/image.slidesharecdn.com/yg0v2a6ntcolqi0kj5fn-signature-cd0ee451b332303e8d141d4af61f33332f56a1959eb87989518e8907806cd732-poli-151222090238/75/Angular-201-20to-20angular-202-22-2048.jpg)
Uploaded byRan Wahle
Angular%201%20to%20angular%202
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.
Angular%201%20to%20angular%202
- 1. © Copyright SELAsoftware & 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 aboutangular 2.0 Different app structure Migration pathes Agenda
- 3. Angular 1.x Based onES5 Based on jqLite (subset of jQuery) Low performance
- 4. Why break somethingthat works? New standards New change detection Performance
- 5. Angular 1.x pains $scope Heavydata binding mechanism Opinionated
- 6. Angular 2.0 Less opinionated ES2015 Components New databinding New DI
- 7. Components Angular 2.0 appbuilt 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
- 9.
- 10. Angular 2.0 bootstrapping Createa component Create a template Bootstrap your component Use transpiler
- 11. Angular 1.x bootstrapping Createmodule 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 Usedirective 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 Nong-x are needed
- 15. Prepare for migration Ourgoal: When moving to angular 2.0 – the logics will be almost intact
- 16. How to getready? “Componentize” your app Start using typescript
- 17. Why typescript You maywrite pure js code in .ts files You may use new coding standards Backward compatibility
- 18. How to “Componentize” Buildyour 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> <scriptsrc="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 Typescripttranspiler 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 Angular1.x Angular 2.0 Scope input controller class template template
- 24.
- 25. Services Angular 1.x Angular2.0 DI Injectable
- 26.
- 27. Filters Angular 1.x Angular2.0 Filter pipe Just return function Implements transform
- 28.
- 29. Resources http://angular.io Change detection ByVictor 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 iscompletely different It is now in beta We can get ready “Componentize” Typescript
- 31.
- 32. © Copyright SELAsoftware & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Thanks ran.wahle@gmail.com