Upload
ran-wahle
View
106
Download
1
Embed Size (px)
Citation preview
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
What’s new in angular 2.0
Ran Wahle
Components
AngularJs 2.0 is built upon HTML5 WebComponents Each component is a javascript class (function in es5)It has a selector, view and a
import {Component, View, bootstrap} from 'angular2/angular2';
// Annotation sectionComponent({ 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
Angular 2.0 bootstrapping
Create a componentCreate a template Bootstrap your componentUse transpiler
Angular 1.x bootstrapping
Create moduleCreate a controller Create HTML templateRegister your controller in a moduleBootstrap your module in your application
DI
Using 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 *ng-for="#name of names"> {{ name }} </li> </ul>`, directives: [NgFor]}
Import and directives
Change Detection
Based on Object.observe Organized as treeEnahanced performance for immutable objects
How to get ready?
There are no migration paths (yet)Be as modular a possibleUse controllerAs syntax and reduce the use of $scopeComponentize your app
AngularJs 1.x will continue to evolve so no rush…
Resources
http://angular.ioChange detection By Victor Savkinhttps://www.youtube.com/watch?v=jvKGQSFQf10My blog: http://blogs.Microsoft.co.il/ranw