Monthly Archives: July 2016

Angular 2.0 Binding syntax

In angular 2.0 binding syntax has changed a bit. Data binding between component and DOM can be achieved in following manner as shown below, each of these data binding types have specific syntax.

Angular2DataBinding

  • Interpolation – It is one way in from component to DOM. It evaluates expression between 2 curly braces
    <h3>Vehicle Name: {{vehicle.name}}</h3>
    

    They are not editable and the value does not go back to the component. Very useful for read only expressions. What @ property binding to DOM attributes, in older angular we attributes prefixed with ng-* like ng-src etc, this changes in Angular 2.0, it looks some thing like this

    <img [src]="vehicle.imageUrl"/>
    

    You can take any HTML5 property and bind to it. You can bind to custom properties in directives as well. In summary you can bind to element, component or directive property.

  • Event binding – This is reverse flow from DOM to component. Inward data flow from component was denoted with open close square brackets, reverse flow through event bindings from DOM to component is round brackets like show below
    <button (click)="Save()">Save</button>
    

    It executes an expression when and event occurs.

  • Two way data binding – It is value in and value out. For two way binding we have a special directive called ngModel
    <input type="text" [(ng-model)]="vehicle.name"/>
    

    We want to allow value to come in that’s reason we have square bracket and we want passback the updated value to component that’s reason we circular brackets.

Angular 2.0 – My First take

What are angular 2.0 Improvements

  1. Improved Performance
  2. Aligned with ES6
  3. Using Web Standards like web components
  4. No digest cycle which boosts performance

What’s Different

  1. No controllers now we have components, each component will have a view and a JavaScript class. A component encapsulates template, data and behavior of the the view. A component is completely decoupled from DOM, which makes unit testing of component easy.
  2. New component router
  3. It will use ES6 modules and not traditional custom angular specific modules
  4. Asynchronous module loading, prior versions on angular app had to download entire app on bootstrap. Now if we route to a different section in app, we should be able to load modules asynchronously on the fly.
  5.  No more scope
  6. Directive adds behavior to the existing DOM element.
  7. Following are the building blocks for Angular 2.0 app which is kind of similar to that earlier angular minus the web components
    1. Components
    2. Directives
    3. Router
    4. Services
  8. Services have changed a bit in angular, in prior angular versions we have various flavors of angular services like
    1. Factory
    2. Service
    3. Provider
    4. Constant
    5. Value

    All these types are gone in angular 2.0 there is only a class in angular 2.0. What are Angular 2.0 service classes

    These are classes which usually encapsulate a logic which is not related to a view.

    1. Service Classes are classes which encapsultes non user interface related logic like logging, making http calls configurations
    2. It provides something of value
    3. Shared data or logic
  9. Improved DI (Dependency Injection) – You can specify service dependencies through provider keyword in components.