What’s new in angular 2 - From FrontEnd IL Meetup

What’s new in angular 2 - From FrontEnd IL Meetup

• 1.
  © Copyright SELAsoftware & 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.0building blocks Components Data binding DI Getting ready tips Agenda
• 3.
  My first reaction…
• 4.
  Angular 1.x Based onES5 Based on jqLite (subset of jQuery) Low performance
• 5.
  Why break somethingthat works? New standards Performance Consultants needs to make a living
• 6.
  Angular 1.x pains $scope Heavydata binding mechanism It is all directives
• 7.
  Angular 2.0 ES 6 Components Newdatabinding New DI
• 8.
  Components AngularJs 2.0 isbuilt 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
• 10.
  <my-app></my-app> Use the component
• 11.
  Angular 2.0 bootstrapping Createa component Create a template Bootstrap your component Use transpiler
• 12.
  Angular 1.x bootstrapping Createmodule 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 Usedirective 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
• 16.
  Data Binding No twoway binding [attribute] (events) #local variables No ng-x are needed
• 17.
  Demo Data Binding
• 18.
  Change Detection Based onObject.observe Organized as tree Enahanced performance for immutable objects
• 19.
  Change Detection 1.x 2.0
• 20.
  How to getready? There are no migration paths (yet) Be as modular a possible Use controllerAs syntax and reduce the use of $scope Componentize your app AngularJs 1.x will continue to evolve so no rush…
• 21.
  Resources http://angular.io Change detection ByVictor Savkin https://www.youtube.com/watch?v=jvKGQSFQf10 My blog: http://blogs.Microsoft.co.il/ranw
• 22.
  Angular 2.0 iscompletely different It is based on standards that aren’t ready It can be used now for tests No release date yet