The goal of this article is to explain what I think are the key features of Angular 2. I will explain the
details and usage of each feature in upcoming articles . Note: At the time of writing this article, the
Angular 2 team has just published its first candidate release. I will try to keep this article updated when
new versions are released. In fact, the incredible amount of examples and articles which are no longer valid
is one of the biggest problems for those who want to study Angular 2.
Let's kick off by saying....
What is Angular 2
Angular 2 is an Open source component oriented framework to build mobile, native and desktop web applications.
What people often forget to mention is the fact that Angular 2 is open source, and you can contribute to it
or even create your own flavour of Angular 2.
Components oriented
Components are the principal way to build and specify elements and logic in Angular 2. From Wikipedia: "Component-based software engineering (CBSE), is a branch of
software engineering that emphasises the separation of concerns". And the separation of concern is the
reason why I like components. Just like the microservices for the backend, the components for the frontend
helps to separate the concern of your application and eventually distribute it separately.
Multi platforms
You can port an Angular 2 app on the following platforms:
Multi language support
What language can I use to write an Angular 2 application?
At this point, the classic question is: Which of these three languages should I choose? I think it
really depends on you. But to help you to pick one of them let me tell you that Angular 2 is written in
TypeScript. Another point in favour of Typescript is that some parts of the Angular 2 documentation
haven't been written for Dart and Javascript EC6 yet. But what is TypeScript? TypeScript is a superset
of JavaScript and is an open source project of Microsoft. In case you are wondering if you can debug
typescript from chrome developer tools, the answer is yes. Both Dart and TypeScript are translated into
Javascript which is useful if you want to fall back on the more popular Javascript later.
Web component friendly
Web component is a new W3C standard which I believe will have a lot of development in the future. The
reason why Web component and Angular 2 can work together is because both of them support shadow DOM.
Shadow DOM
Shadow dom is a feature that helps encapsulation. By using this feature, the logic and the style of your
component is hidden behind the tag selector. The only thing the outside world will see and will need to
know of your component is its tag, for example : <my-example-component></my-example-component> .
JQuery free
Unfortunately, the shadow DOM doesn't really work well with Jquery and for this reason, the use of
jQuery is not recommended. The bright side of abandoning JQuery is the performance gain in the rendering
speed. This is because all the manipulations that jQuery operate with the DOM are quite expensive.
Please don't get scared because Angular 2 offers a lot of features to mitigate the absence of Jquery.
Context
For those who have been using Angular 1 and are familiar with the $scope, the good news is that Angular
2 has got rid of the painful concept of $scope. In Angular 2 each component has an isolated execution
context. Angular 2 doesn't share data between components using the $scope like Angular 1 did. Angular 2
uses the template to pass data and events in and out of a component.
Data binding
Another thing that most people don't like about Angular 1 is the two-way data binding. In Angular 2
everything follows the one-way data binding by default, and you can have the two-way data binding only
if it's explicitly declared. Fans of the flux architectural pattern will find it easier to build an
application with Angular 2 because it allows one-way data binding. Despite this, the programming
paradigm that Angular 2 seems to promote instead of flux is reactive programming.
Reactive framework
Reactive programming is a programming paradigm oriented around data flows and the propagation of change.
Everything happens in your front end application can be seen as a stream of event where the synchronous
event are pulled and the asynchronous event are pushed, and where your app can react to these events
defining observables. Angular 2 use RxJS to do this job.
Class, annotation and decorators
These future are more related to the Typescript language then Angular 2 by himself, Angular 2 just get benefit of
it and does a large use of these instruments, which will also make you more productive.
Dependency injection
Dependency injection is a design pattern and Angular 2 have built a framework to support it. What is
does is getting all the information it needs about your dependencies so it can resolve dependencies for
us.
Zones
Zones can be compared to the $digest() in Angular 1. So ngZone does the change detection and be aware
that each component has his own change detector which propagates the change from the root to all the
child's components.
Forms and validation
Angular 2 have built in functionality to retrieve data from a form and do the validation on it.
Templating
Angular 2 make easy display data with double-curly braces {{ data.name }}. Also as already mentioned you
can extend the HTML vocabulary with components and directives.
Routing
Angular 2 is easy to use and give to you the ability to create different URL for each section of your
single page application, so you can define for example the login section under/login and the user page
at /userhome.
Server side rendering
Isomorphic angular 2, is about supporting server side rendering to make the first loading of your app faster.
The name of the project is universal Angular
https://github.com/angular/universal. We heard
something about it at the ng-conf 2015 but as far I'm aware nothing at ng-conf 2016 was showed.
