Angular 2 Cookbook

Migrating an application to component directives

In Angular 1, there are several built-in directives, including ngController and ngInclude, that developers tend to lean on when building applications. While not anti-patterns, using these features moves away from having a component-centric application.

All these directives are actually subsets of component functionality, and they can be entirely refactored out.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/1008/.

Getting ready

Suppose your initial application is as follows:

[index.html] <div ng-app="articleApp"> <ng-include src="'/press_header.html'"></ng-include> <div ng-controller="articleCtrl as article"> <h1>{{article.title}}</h1> ...