This article was excerpted from the book “Angular Development With TypeScript” (see http://bit.ly/1QYeqL0). You may also look at my other high-level overview of Angular 2 published by InfoQ.
The Angular 2 framework is a re-write of popular framework AngularJS. In short, the newer version has the following advantages over AngularJS.
- The code is simpler to write and read
- It performs better than AngularJS
- It’s easier to learn
- The application architecture is simplified as it’s component-based
This article contains a high-level overview of Angular highlighting improvements comparing to AngularJS. For a more detailed architecture overview of Angular visit product documentation at http://bit.ly/1TQJmwG.
Code Simplification
First of all, an Angular application consists of standard ES6 modules. Typically one module is one file. There is no need to use a framework-specific syntax for loading and using modules. Just use the universal module loader SystemJS (covered in Chapter 2) and add import statements to use functionality implemented in the loaded modules. You don’t need to worry about the proper order of the <script> tags in your HTML files. If a module A needs the functionality from a module B, just import the module B inside module A.
The HTML file of the landing page of your application just includes the framework modules, and your application code is bootstrapped by simple loading of the root component of your application. All child modules will be loaded automatically based on the import statements. Below is a typical content of the index.html of an Angular application. In the top portion you include the required framework modules, and at the bottom you configure the system loader and load the root component located in the file app/my_application.ts. The <app> tag is a selector defined in that root component.
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<app>Loading...</app>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
packages: {app: {defaultExtension: 'ts'}}
});
System.import('app/my_application');
</script>
</body>
</html>
The HTML fragment of each application component is either inlined inside of the component (the template property) or in the file referenced from the component using the property templateURL. The latter option allows designers to work on the UI of your application without the need to learn Angular.
An Angular component is a centerpiece of the new architecture. The next Figure shows a high-level diagram of a sample Angular application.
The simplest way of declaring a component is writing a class in TypeScript (you can use ES5, ES6, or Dart as well). Let’s do an experiment. We’ll give you a super brief intro on how to write Angular components in TypeScript followed by the sample code. See if you can understand the code with minimum explanations.
An annotated TypeScript class represents a component. The annotation @Component contains the property template that declares an HTML fragment to be rendered by the browser. The HTML piece may include the data binding expressions, which can be represented by double curly braces. If a view depends on other components, the @Component annotation has to list them in the property directives. The references to the event handlers are placed in the markup from the @Component section and are implemented as methods of the class.
The annotation @Component also contains a selector declaring the name of the custom tag to be used in HTML document. When Angular sees an HTML element with the name matching a selector, it knows which component implements it. The HTML fragment below illustrates a parent component with one child component :
<body>
<auction-application>
<search-product [productID]= "123"></search-product>
</auction-application>
</body>
A parent component sends the data to its child components using property binding (note the square brackets above), and children communicate with their parents by sending events. The next Figure shows the main page (the parent component) with its child components surrounded with thick borders.
Below is a code sample of a SearchComponent, and we can include it in an HTML document as <search-product> because its declaration includes the selector property with the same name.
@Component({
selector: 'search-product',
template:
`
<form>
<div>
<input id="prodToFind" #prod>
<button (click)="findProduct(prod.value)">Find Product</button>
Product name: {{product.name}}</div>
</form>
`
})
class SearchComponent {
@Input() productID: number;
product: Product; // code of the Product class is omitted
findProduct(prodName: string){
// Implementation of the click handler goes here
}
// Other code can go here
}
If you are familiar with any object-oriented language that has classes you should understand most of the above code. The annotated class SearchComponent declares a variable product, which may represent an object with multiple properties, one of which (name) is bound to the view ({{product.name}}). The #prod will have a reference to the hosting <input type=”text” /> element so you don’t need to query DOM to get the entered value.
The (click) notation represents a click event, and the event handler function gets the argument value from the input parameter productID that will be populated by the parent component via binding.
This was just a quick look at the sample component, but we’ll be providing a detailed description of what components are made up of starting from the next chapter.
If you never worked with classes before, no worries. We’ll cover them in Appendices A and B. The next Figure illustrates the inner working of a component.
A component uses the data from a model (the M in the MVC pattern), which can be also represented by a class. In TypeScript the model class for a SearchComponent could look like this:
class Product{
id: number,
name: string;
description: string;
bid: number;
price: number;
// constructor and other methods go here
}
Note that TypeScript allows you to declare class variables with types. To let the UI component SearchComponent know about its model you can refer to it by declaring a class variable, e.g. product:
@Component { // code omitted for brevity}
class SearchComponent {
product: Product; // the model
findProduct(productID){
// The implementation of the click handler
// for the Find Components button goes here
}
}
If the search component may return multiple products we can declare an array to store them:
products: Array<Product>;
The generics notation (explained in Appendix B) tells the TypeScript compiler that only the objects of the type Product are allowed to be stored in this array.
In Angular there are no separate controllers (the C in the MVC pattern). The component includes all required code. In our example, the SearchProduct class would contain the code performing the controller’s responsibilities in addition to being a UI component on the HTML view. For a cleaner separation of TypeScript and HTML, the content of the template section of the @Component annotation can be stored in a separate file by using templateURL instead of template, but it’s a matter of your preference.
Developers who know AngularJS can think of a component as a directive with a view, but writing directives without views is still allowed.
Now let’s see how the design of Angular is simpler than of AngularJS. In AngularJS all directives were loaded to the global memory, whereas in Angular you specify the required directives on the component level providing better encapsulation.
You don’t have to deal with the hierarchy of scope objects as in AngularJS. Angular is component based, and the properties are created on the this object, which becomes the component’s scope.
Dependency Injection is a design pattern that inverts the way of creating objects your code depends on. Instead of explicitly creating object instances (e.g. with new) the framework will create and inject them into your code. Angular comes with a dependency injection module. We’ll cover dependency injection in Chapter 4.
In AngularJS there were several ways of injecting dependencies, which could be confusing at times. In Angular you can inject dependencies into the component only via its constructor. The following TypeScript code fragment shows how to inject the ProductService component into the SearchComponent. You just need to specify a provider and declare the constructor argument with the type that matches provider’s type.
@Component({
selector: 'search-product',
viewProvider: [ProductService],
template:[
<div>
...
<div>]
})
class SearchComponent {
products: Array<Product> = [];
constructor(productService: ProductService) {
this.products = this.productService.getProducts();
}
}
To summarize, Angular is simpler than AngularJS because of the following:
- Each building block of your app is a component with well encapsulated functionality of a view, controller, and auto-generated change detector.
- Components can be programmed as annotated classes.
- A developer doesn’t have to deal with scope hierarchies.
- Dependent components are injected via the component’s constructor.
- Two-way binding is turned off by default.
- Change detection mechanism was re-written and works faster.
The concepts of Angular are easy to understand for Java, C#, and C++ programmers, which represent the majority of enterprise software developers. Like it or not, but a framework becomes popular when it gets adopted by enterprises. Today AngularJS is widely adopted by the enterprises, and AngularJS skills are in big demand. Since developing applications with Angular is easier than with AngularJS this trend should continue.
Performance Improvements
To compare performance of AngularJS and Angular 2 the creators of these frameworks developed a benchmarking tool called Benchpress (see http://bit.ly/1IvgnKZ), which showed some serious performance improvements in the area of rendering and memory use.
The rendering improvements are mainly the result of the internal redesign of the Angular framework. The UI rendering and the application API were separated into two layers, which allows to run the non-UI related code in a separate Web Worker thread. Beside the ability to run the code of these layers concurrently, Web browsers allocate different CPU cores to these threads when available. You can find a detailed description of the new rendering architecture in the document titled Angular 2 Rendering Architecture available at http://bit.ly/1CEXjIl.
Creating a separate layer for rendering has an additional important benefit: an ability to use different renderers for different devices. Every component includes the @Component annotation that contains an HTML template defining the look of the component. If you want to create a component to display stock prices in the Web browser its UI portion may look as follows:
@Component({
selector: 'stock-price',
renderer: 'DOMRenderer',
template: '
<div>The price of an IBM share is $165.50</div>
'
})
class StockPriceComponent {
...
}
Currently, DOMRenderer is the only renderer, so you don’t even need to include it in the @Component annotation. But the Angular team already works on creating native renderers for mobile devices running iOS and Android. Such renderers should be released in the near future, and Angular applications won’t need to run inside the Web View (embedded Web browser) on mobile devices – they’ll use native UI components.
A new and improved change detection mechanism is yet another contributor to better performance. Angular doesn’t use two-way binding unless you manually program it. One-way binding simplifies the detection of the changes in an application that may have lots of interdependent bindings. Now if a component has only internal immutable objects, you can mark it as such so it won’t be checked when a change is detected in another component.
Although Angular 2 is a complete re-design of Angular 1, those of you who use AngularJS can start writing code in Angular 2 style by using ng-forward (see http://bit.ly/1PNXFmH). The other approach is to start gradually switching to a newer version of this framework by running Angular 2 and Angular 1 in the same application (see http://bit.ly/1YixNzE), but this would increase the size of the application.
“To learn more about Angular see the book “Angular Development with TypeScript” at http://bit.ly/1QYeqL0 and save 39% with discount code faindz. For the up to date information about our Angular 2 training visit this page.
yakovfain.com 
The coupon code does not appear to work.
Manning is looking into it. The coupon will work.
Still not working 😦 I tried both the combo and ebook version. https://www.evernote.com/l/ACBNMkmWuPlLL62ZjmFZ9hcNgV9Wbs2asgc
It works now
Excellent overview! Really liking your recent Angular posts.
Question on data binding: you’ve spoken of your experience developing with Adobe Flex in the past, which is another web app framework that offers data-binding as a core feature. I also spent many years making complex apps with Flex, and while I found data binding to be a real help at first for getting something to work quickly and simply, I eventually found it to be something of a crutch habit, that got in the way of more cleanly organized, loosely-coupled code (especially when incorporating an MVCS framework like Robotlegs, etc).
So what’s your experience been with Angular 2 data-binding so far: do you think it has a first-class place in maturely developed code? Or is it a simple shortcut for the beginning, that should eventually be evolved out of?
Thanks for any insight!
Data binding in Angular 2 is pretty powerful. It supports binding to properties, HTML attributes, events, has two-way data binding, and you can bind values from a parent component to the input parameters of a child.