What’s new in angular 2
Download as PPTX, PDF1 like1,387 views
Angular 2.0 introduces several major changes from Angular 1.x including a component-based architecture, new data binding syntax, and improved change detection. Components are the fundamental building blocks and define a template and class. Data binding in Angular 2.0 no longer uses two-way binding and instead relies on property, event, and local variable binding. Change detection is also enhanced with faster performance for immutable objects. While Angular 2.0 introduces breaking changes, Angular 1.x will continue to be supported, so there is no rush to migrate existing applications.
![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://image.slidesharecdn.com/gkc9jsjisxwscgtg2wz3-signature-ca6cf19a66c0157776759fc55afba3501191a59bced941aeb7e58926968ad85d-poli-150603113937-lva1-app6891/85/What-s-new-in-angular-2-15-320.jpg)
![Data Binding
No two way binding
[attribute]
(events)
#local variables
No ng-x are needed](https://image.slidesharecdn.com/gkc9jsjisxwscgtg2wz3-signature-ca6cf19a66c0157776759fc55afba3501191a59bced941aeb7e58926968ad85d-poli-150603113937-lva1-app6891/85/What-s-new-in-angular-2-16-320.jpg)
What’s new in angular 2
- 1. © 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
- 2. Angular 1.x Angular 2.0 building blocks Components Data binding DI Getting ready tips Agenda
- 4. Angular 1.x Based on ES5 Based on jqLite (subset of jQuery) Low performance
- 5. Why break something that works? New standards Performance
- 6. Angular 1.x pains $scope Heavy data binding mechanism It is all directives
- 7. Angular 2.0 ES 6 Components New databinding New DI
- 8. 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
- 9. import {Component, View, bootstrap} from 'angular2/angular2'; // 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
- 11. Angular 2.0 bootstrapping Create a component Create a template Bootstrap your component Use transpiler
- 12. Angular 1.x bootstrapping Create module Create a controller Create HTML template Register your controller in a module Bootstrap your module in your application
- 13. Demo Component
- 14. 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
- 15. 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
- 16. Data Binding No two way binding [attribute] (events) #local variables No ng-x are needed
- 18. Change Detection Based on Object.observe Organized as tree Enahanced performance for immutable objects
- 20. How to get ready? There are no migration paths (yet) Be as modular a possible Use controllerAs syntax and reduce the use of $scope Use directives as much as you can AngularJs 1.x will continue to evolve so no rush…
- 21. Resources http://angular.io Change detection By Victor Savkin https://www.youtube.com/watch?v=jvKGQSFQf10 My blog: http://blogs.Microsoft.co.il/ranw
- 22. Angular 2.0 is completely different It is based on standards that aren’t ready It can be used now for tests No release date yet