What are the new features of AngularJS 2.0_AngularJS

AngularJS has become the most popular open source JavaScript framework in the world of web application development. Since its inception, its success has been driven by astounding economic growth and support and adoption from groups – including individual developers, businesses, and communities.

Angular has become a client-side MVW framework (Model-View-Whatever) for building complex single-page applications. It plays an important role in both application testing and application writing while simplifying the development process.

The current version of Angular is 1.3, which is stable and used by Google (the framework maintainer) to support many applications (it is estimated that there are more than 1,600 applications at Google running Angular 1.2 or 1.3). Angular 2.0 was officially announced with the Nigeria conference last October, and the version won't be a complex major update.

Why is Angular 2.0 launched?

Before discussing Angular 2.0 further (estimated release date is late 2015), let us briefly consider the philosophy behind the new version. Angular 2.0 development starts by solving the following problems:

Mobile: The new version will focus on mobile application development. The rationale is that it's easier to handle the desktop side of things, and once the challenges involve mobile (performance, load times), focusing on this aspect will solve the problem.

Modularization: Individual modules will be removed from Angular’s ​​core for better performance. This means you can choose the parts you need.
Modernization: Angular 2.0 will target ES6 and "evergreen" modern browsers (which automatically update to the latest version). This means developers can focus on code relevant to the business domain.

What are the controversies?

There was no mention of a path to migration to version 2.0 at the Nigeria meeting. It also pointed out that jumping to version 2.0 will break the original version 1.3 application and there will be no backward compatibility. Since then the developer community has been rife with uncertainty and speculation, and some developers have begun to question whether it's worth starting a new Angular 1.3 project.

What are the changes?

AtScript

AtScript is a parent set of ES6 and is used to develop Angular 2.0. It is processed by the Traceur compiler (along with ES6) to generate ES5 code and use TypeScript type syntax to generate execution-time assertions, replacing compile-time checks. However, AtScript is not mandatory, and you can still use pure JavaScript/ES5 code instead of AtScript to write Angular applications.

Improve dependency entry (DI)

The basic idea of ​​the dependency injection (Dependency injection) model is that the client class Client does not need to initialize the member variable IServer it depends on by itself, but uses an independent object to create an appropriate implementation class of IServer and assign it to the member variable of the Client. It is particularly beneficial for module development and component isolation. Angular 2.0 will solve this aspect of Angular 1.X. Added missing features such as child injectors and lifetime/scope controls.

Annotations

AtScript provides tools to associate metadata and functionality. This helps in constructing object instances that provide necessary information to the DI library (inspecting relevant metadata when calling a function or creating an instance of a class). It also makes it easy to overload parameter data by providing an annotation.

Child Injectors

A child injector inherits all performance services of its parent class. Depending on the requirements, different types of objects can be called and different scopes automatically covered.

Instance scope

The improved DI library will feature instance scoping, which becomes even more powerful when using Child Injectors and own scope identifiers.

Template and data binding

When developing applications, templates and data binding will go hand in hand.

Dynamic loading

This is a feature missing from the current Angular version, but will appear in Angular 2.0. This will allow developers to add new commands or controllers on the go.

Template

In Angular 2.0, the template compilation process will be asynchronous. Since the code is based on the ES6 module specification, the module loader will load dependencies by simply referencing the component definition.

Commands

There will be three instructions in Angular 2.0:

Component Directives - These will create reusable components via encapsulated logic in JavaScript, HTML, or an optional CSS stylesheet.

Decoration directives - These directives will be used to decorate the element (such as adding a tooltip, or using ng-show/ng-hide to show/hide the element).

Template directives - these will change HTML into reusable templates. The instantiation and embedding of templates into the DOM can be completely controlled by directives. Examples of this include ng-if and ng-repeat.

Routing plan

The initial Angular routing is designed to handle some simple situations. However, as the framework evolves, more and more features are added. Routing is already extensible in Angular 2.0 and will include the following basic features:

Simple json-based routing configuration;

Optional contracts over configuration;

Static. Parameterized routing mode;

URL parser;

Supports query string;

Use push status or Hashchange;

Navigation model (generates a navigation UI);

Document title updated;

404 routing processing;

Location services;

Historical operations.

Now, let’s take a look at the routing features that take Angular 2.0 to new heights:

Subroute

Sub-routing will transform each component of the application into smaller applications by providing them with their own routes, which will help encapsulate the feature set of the entire application.

Screen activation

This will help developers better control the navigation lifecycle through a set of can* callbacks:

canActivate - allow/block navigation to new controllers;

activate - respond to successful navigation to the new controller;

canDeactivate - Allow/block navigation away from old controllers;

deactivate - responds to successful navigation away from the old controller;

These callbacks will allow developers to return a Boolean value or a command (for lower level control).

Design

All this logic is built using a pipeline structure, making it very easy to add your own steps to the pipeline or remove the default stuff. In addition, its asynchronous nature will allow developers to use server requests to authenticate or load data for controllers, although this is still planned.

Log

Angular 2.0 will include a logging service called diary.js - a very useful feature for measuring where your time is spent in your application.

Scope

$scope will be removed from Angular 2.0 and replaced by ES6 classes.

Conclusion

As the release date approaches, the excitement and buzz surrounding Angular 2.0 will intensify. Is breaking change a good thing? We have no way of knowing, but opponents are understandably nervous given the apparent lack of plans to relocate. The excitement came right away. But since it is coming, what we can do is to welcome it actively.

The above content introduces you to the new features of AngularJS 2.0. I hope it will be helpful to you!