Recs.
Updated
Specs
Pros
Pro Easy to understand component based API
Angular 2 adopts a component-based UI. This is a concept that is used in other libraries/frameworks too (for example React) and many people will already be familiar with this. In Angular 1, controllers and directives kind of blurred into the component and played that role. But in Angular 2 there are no directives or controllers. Instead, an Angular component has a selector which corresponds to a HTML tag that is represented by the component and also a @View
to specify the HTML template for that component.
Pro Templates are easier to read and write (compared to Angular 1.x) because of the powertful event system
Angular 2 applications respond to user input through the useful event system. The syntax for events is denoted by an action surrounded by parenthesis. Furthermore, element references can be made available to other parts of the template as local variables using the #var
syntax.
This makes templates much easier to read, write and understand because with the new event syntax you avoid ng-model
and ng-click
clogging up the code. For example:
Angular 1:
<input ng-model=”thing.item” type=”text”>
<button ng-click=”thing.submit(item)” type=”submit”>
Angular 2:
<input #item type=”text”>
<button (click)=”submit(item)” type=”submit”>
Pro Provides dependency injection
With dependency injection, you can load in extra javascript and new functionality just when you need it.
This is particularly helpful with testing as you can swap out services for test services.
It also means in single page apps you can load dependencies only as you need them instead of loading them up all up at the start.
Pro Easy and straightforward data-binding
Data bindings are done on the DOM, which allows you to easily sync data between various parts of the DOM in a very succint matter.
<body ng-app>
<span>Insert your name:</span>
<input type="text" ng-model="user.name" />
<h3>Echo: {{user.name}}</h3>
</body>
This snippet shows how the model attribute "name" is easily bound across different parts of the DOM without having to set up any extra boilerplate.
Pro Support for a composable component oriented architecture with directives
Angular uses the existing HTML structure and builds on top of it instead of requiring you to learn a new templating language. Because it's just vanilla HTML, it is more familiar, and easier for beginners to learn. Directives let Angular know which HTML elements are under its control, and how to use them.
Being directly on the HTML it's more transparent what's going on, and it's possible to get a good idea of what the page is doing just by looking at the template.
Also, it makes embedding possible, as you could have an angular app within an existing site so you don't have to rewrite everything at once.