Some Changes in Directives too

Directives in the angularjs framework are meant to extend the HTML. In angularjs 1.x, the Directive Definition Object (DDO) is used to create directives. In angularjs 2.0, the directives are made simpler. There are three types of directives in angularjs 2.0:

  • The component directive: This is a collection of a view and a controller to create custom components. It can be used as an HTML element as well as a router that can map routes to the components.
  • The decorator directive: Use this directive to decorate the HTML element with additional behavior, such as ng-show.
  • The template directive: This directive transforms HTML into a reusable template. The directive developer can control how the template is instantiated and inserted into the DOM, such as ng-if and ng-repeat.

The controller in angularjs 2.0 is not a part of the component. However, the component contains the view and controller, where view is an HTML and controller is JavaScript. In angularjs 2.0, the developer creates a class with some annotations, as shown in the following code:

@dirComponent({

Selector: 'divTabContainter'

Directives:[NgRepeat]

})

Export class TabContainer{

    constructor (panes:Query<Pane>){

    this.panes=panes
      }
select(selectPane:Pane){…}

}

In the preceding code, the controller of the component is a class. The dependencies are injected automatically into the constructor because the child injectors will be used. It can get access to any service up to the DOM hierarchy as well as it will local to service element. It can be seen in the preceding code that Query is injected. This is a special collection that is automatically synchronized with the child elements and lets us know when anything is added or removed.