What are the new features of AngularJS 2.0 and new features of angularjs2.0?

Source: Internet
Author: User
Tags es6 class

What are the new features of AngularJS 2.0 and new features of angularjs2.0?

AngularJS has become the most popular open-source JavaScript framework in the Web application development world. Since its establishment, what has witnessed its success is amazing economic growth and group support and adoption-including individual developers, enterprises, and communities.

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

Angular's current version is 1.3, which is stable and used by Google (Framework maintainer) to support many applications (it is estimated that more than 1600 applications run on Google 1.3 or ). Angular 2.0 officially announced that it would not be a complex and major update at the Nigerian Conference in July.

Why Angular 2.0?

Before we further discuss Angular 2.0 (the estimated release date is the end of June 2015), let us simply think about the philosophy behind the new version. Angular 2.0 was developed to solve the following problems:

Mobile: the new version will focus on mobile application development. The reason is that it is easier to deal with desktop issues. Once the challenge involves mobility (performance, loading time), focusing on this will solve the problem.

Modularization: Each module is removed from the Angular core for better performance. This means you can select the parts you need.
Modernization: Angular 2.0 will target ES6 and evergreen modern browsers (automatically updated to the latest version. This means that developers can focus on Code related to the business field.

What are the disputes?

At the Nigerian conference, there was no reference to the migration to version 2.0. It is also pointed out that redirecting to version 2.0 will break the original version 1.3 application without any backward compatibility. Since then, the developer community has been filled with uncertainty and speculation, and some developers have begun to question whether it is worthwhile to start 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 (together with ES6) to generate ES5 code and uses the TypeScript type syntax to generate execution time assertions to replace the check during compilation. However, AtScript is not mandatory. 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 mode is that the Client class Client does not need to initialize the IServer, use an independent object to create an appropriate IServer implementation class 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 problem in Angular 1.x. Add missing features, such as child injectors and lifetime/scope control.

Annotations

AtScript provides tools to associate metadata and functions. This helps to build an object instance that provides necessary information to the DI database (call a function or create an instance of a class when checking the relevant metadata ). It is also easy to overload parameter data by providing an annotation.

Child Injectors

A child injector inherits all the performance services of its parent class. As required, different types of objects can be called and automatically cover different ranges.

Instance range

The improved DI library will take the instance range as the feature, which becomes more powerful when using Child Injectors and its own range identifiers.

Template and Data Binding

In the development of applications, the template and data binding will go hand in hand.

Dynamic Loading

This is a feature missing from the current Angular version, but it will appear in Angular 2.0. This allows developers to add new commands or controllers during busy periods.

Template

In Angular 2.0, the template compilation process is asynchronous. Because the Code is based on the ES6 module specification, the module loader loads dependencies through simple reference Component definitions.

Command

Three commands will appear in Angular 2.0:

Component commands-These will create reusable components through the packaging logic of JavaScript, HTML, or an optional CSS style sheet.

Decoration commands-these commands will be used to decorate elements (for example, adding a tooltip or using ng-show/ng-hide to show/hide elements ).

Template directive-These will change HTML to reusable templates. Template instantiation and embedding in DOM can be completely controlled by commands. Such examples include ng-if and ng-repeat.

Routing Scheme

The initial Angular routing is designed to handle some simple situations. However, with the development of the framework, more and more functions are added. In Angular 2.0, a route is already scalable and includes the following basic functions:

Simple json-based routing configuration;

Better than the optional protocols configured;

Static. Parameterized routing Mode;

URL parser;

Query strings are supported;

Use push status or Hashchange;

Navigation model (generate a navigation UI );

Document title update;

404 route processing;

Location service;

Operation history.

Now, let's take a look at the routing features that bring Angular 2.0 to a new height:

Vro

Vro converts each component of an application into a smaller application by providing routes for them. This helps encapsulate the feature set of the entire application.

Screen Activation

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

CanActivate -- allow/block navigation to the new controller;

Activate -- the response is successful to the navigation of the new controller;

CanDeactivate -- allow/block navigation from the old controller;

Deactivate -- the response is successful, away from the navigation of the old controller;

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

Design

All these logics are built using the pipeline structure, making it easy to add your own steps to the pipeline or remove the default stuff. In addition, its asynchronous feature will allow developers to use server requests for authentication or load data for controllers, but this is still being planned.

Logs

Angular 2.0 will contain a log service called diary. js-a very useful feature that measures the time spent in applications.

Scope

$ Scope will be removed from Angular 2.0 and replaced with the ES6 class.

Conclusion

As the release date approaches, excitement and sound around Angular 2.0 will increase. Is it a good thing to break the changes? We don't know, but it is understandable that opponents are nervous, because there is a clear lack of migration plans. Duang is coming. However, since it is coming, what we can do is to actively welcome it.

The above content introduces the new features of AngularJS 2.0 and hopes to help you!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.