Creating Angular 2 Style Components Using Angular 1 (Part I)

As Angular 2 looms in the horizon, it is easy to be overwhelmed by the upcoming transition. An important topic emerging for many developers is how to align existing applications, or write new ones, using Angular 1.x to ensure the transition is smooth, and to minimize refactoring when Angular 2 comes out. After all no one wants to write an application today that will be obsolete in a year.

So what can we do?

Using Angular 2 for production grade application today is not practical. The API of the framework is changing frequently and not all of the framework's concepts are fully implemented or documented.

Structure your Application as a Tree of Components

Angular 2 is all about components and the two aspects worth discussing briefly are the "whats" and the "whys".

What is a Component in Angular 2.0?

Angular 2's components are conceptually similar to component directives from Angular 1.x. The structure of Angular 2 can be viewed as the tree of components, with a root element of that tree being the entry point of your application.

In summary, a component is an object that structures and represents a UI element. It consists of two parts, component controller in charge of view logic and component template representing the view.

It is also worth noting that there is no $scope or $watch in Angular 2, so you should avoid them like fire. The good news is that if you were following the best practices and style guides, you should be on the right track.

Why Components?

One of the ways to conceptualize Angular 1.x application is to view it as a graph of scopes. Couple that with bi-directional data flow amongst these scopes and you have a complex application structure that is hard for developers to reason about. In addition, this approach poses performance challenges on the framework. Maintaining the bindings within this graph during the digest cycles is more complicated and performance intensive compared to a tree of components.

An Angular 1.x application developer also had to face the constant dillema of what to use to add logic to the page in the form of directives vs. controllers. The choice becomes a lot simpler in Angular 2: components to add logic with a view, and directive to add custom behaviour to existing elements.

Finally, the push to component based architecture aligns the framework with the future Web Component standards, which hopefully will extend the relevant life span of the framework and allow for less breaking changes in future releases.

Develop with TypeScript

Angular 2 is written in TypeScript, and even though using it is not a requirement as the framework can be used with ES5 and ES6, the syntax and the development tools that use TypeScript make Angular 2 development workflow shine.

TypeScript is an application scale language that fully aligns with the ECMA specification and provides a super set of it's features. The nature of the language allows for a great IDE support with Visual Code, Atom and Sublime, and awesome compile time error checking.

Example

With the explanation above out of the way, let's look at a simple example of how we could architect our application today to align with the structure of Angular 2 components more closely.

We will build a simple "Hello World" component using TypeScript, which is the only component in this example and is the root of our application.

In case you are wondering about Inject, makeDirective and makeSelector, they are utility functions we implemented to create a similar structure to Angular 2. There is nothing magical about them and the code for utils.ts is provided below for reference:

Note:There are other projects out ther that provide similar functionality (and more) as our utils functions a angular2-now is a good example. However, we believe that the most important aspect is the structure of our code, as opposed to direct mapping of a syntax, since we will have to make changes either way. Also, Angular 1.5 is expected to be released with a component helper and a component base router to simplify transition conceptually.