Chris J. Lee

Dallas Drupal Developer

You are here

What's coming in Angular 2.0 - Work in Progress

Changes are coming way for Angular 2.0. The latest API documentation is available at this time of writing. The API of course at this time is only in developer preview. I plan on updating this blog post as the API continues to stabilize. I've compiled some notes from sessions i've listened to. Mostly Rob Eisenberg.

Upcoming change to Angular 2.0

Looks like the following are coming changes to Angular 2.0 (I will update as Angular 2.0 stabilizes):

  • Utilize Web Components - Angular is built with Web Components in mind
  • Mobile First - Angular will utilize a Mobile first approach
  • Utilizing ES6 now to use module syntax to import dependencies
  • AtScript - Utilizing types in JavaScript and checked at runtime and utilize type for syntax
  • Annotations to create providers, services, controllers, etc.
  • Dependency injection - Scope and lifetime scope is now controlled by child injectors, Lazy injection is now possible. See the inject class
  • Utilize idea of a viewport - under the hood, you write an html template and part of the page gets updated from the screen
  • Component Directive - Introduction of an component directive. Utilize a simple pattern of

Directives

Component Directives in Depth

Here's an example of Angular 2.x code utlizing a component directive annotation.

Angular 2.x

@ComponentDirective({
  selector: 'tab-container',
  directives: [NgRepeat]
});
export class TabContainer {
    constructor(panes:Query) {
        this.panes = panes
    }
  
  select(selectedPane:Panes) {
      // Have some fun!
  }
}

Decorator Directive

@DecoratorDirective({

})
export class NgShow{
  constructor(element:Element){
    this.element = element;
  }
  
  ngShowChanged(newValue) {
    if(newValue) {
       this.element.style.display = 'block';
    }  else {
       this.element.style.display = 'none';
    }
  
  }
}

Template Directive

This transform part of the DOM into a template. One gets to add or remove things based on an expression.

@TemplateDirective({
    selector: '[ng-if]',
    bind: {'ngIf':'ngIf'},
    observe: {'ngIf': 'ngIfChanged'}
})
export class NgIf {
    constructor(viewFactory:BoundViewFactory, viewPort:ViewPort) {
        this.viewFactory = viewFactory;
        this.viewPort = viewPort;
        this.view = null;
   }
   
   ngIfChanged(value) {
      if(!value && this.view) {
        this.view.remove();
        this.view = null;
     }

    if (value) {
        this.view = this.viewFactory.createView();
        this.view.appendTo(this.viewPort);
    }

  }
}

Router

The new router implements some new changes. The new router now includes child routers.

  • Child Routes - This allows larger sections of an application that can be encapsulated and allow it be secured. This allows for the idea of "child apps". Applications are no longer coupled to a particular path. One can now create divisions where teams can manage and own portions of a URL.
  • Screen Activation - Navigation has an explicit lifecycle. One can prevent navigation from another route and redirect users.

Resources

Documentation

Articles

Videos

  • Rob Eisenberg AngularJS 2.0 and Beyond - December 4th, 2014
© 2017 Chris J. Lee