What are the new features of AngularJS 2.0

  • 2020-12-22 17:35:22
  • OfStack

AngularJS has become the most popular open source JavaScript framework in the Web application development world. Since its inception, its success has been marked by phenomenal economic growth and the support and adoption of groups -- individual developers, businesses, communities.

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

Angular, currently in version 1.3, is stable and is used by Google (framework maintainer) to support a wide range of applications (it is estimated that more than 1600 applications run on Angular1.2 or 1.3 in Google). Angular 2.0 was officially announced at last October's Meeting in Nigeria that this version would not be a complex major update.

Why Angular 2.0?

Before we move on to Angular 2.0 (estimated release date at the end of 2015), let's briefly consider the philosophy behind the new version. Angular 2.0 development began by addressing the following issues:

Mobile: The new version will focus on mobile applications. Based on the fact that it's easier to deal with the desktop side of things, once the challenge is related to mobility (performance, load time), focusing on that aspect will solve the problem.

Modularity: Each module will be removed from the Angular core for better performance. This means you can choose the parts you need.
Modernization: Angular 2.0 will target ES6 and the "Evergreen" modern browser, which automatically updates to the latest version. This means that developers can focus on code related to the business domain.

What are the controversies?

There was no mention at the Nigeria meeting of a migration path to version 2.0. It was also noted that the jump to 2.0 would break the original 1.3 application without any backward compatibility. Since then, the developer community has been rife with uncertainty and speculation, with some developers questioning whether it's worth starting a new Angular 1.3 project.

What changes have you made?

AtScript

AtScript is a parent set of ES6 and was used to develop Angular 2.0. It is processed by the Traceur compiler (along with ES6) to generate ES5 code and the TypeScript type syntax to generate assertion of execution time as an alternative to compile-time checking. While AtScript is not mandatory, you can still write Angular applications using pure JavaScript/ES5 code instead of AtScript.

Improving reliance on entry (DI)

The basic idea of the dependency injection (Dependency injection) pattern is that the client class Client does not initialize its dependent member variable IServer itself, but uses a separate object to create the appropriate implementation class of IServer and assigns it to the member variable of Client. It is particularly beneficial for module development and component isolation. Angular 2.0 will address this aspect of Angular 1.ES70en. Add missing features such as child injectors and lifetime/scope controls.

Annotations

AtScript provides tooling association metadata and functionality. This helps build an instance of an object that provides the necessary information to the DI library (an instance that calls a function or creates a class when examining the relevant metadata). It is also easy to overload parameter data by providing 1 annotation.

Child Injectors

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

Scope of instance

The improved DI library will feature instance scope, which is even more powerful when using Child Injectors and its own scope identifier.

Templates and data binding

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

The dynamic load

This is one feature that is missing from the current Angular release, but will appear in Angular 2.0. This will allow developers to add new instructions or controllers on the go.

The 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 loads the dependencies through a simple reference to the component definition.

instruction

There will be three instructions in Angular 2.0:

Component directives - these create reusable components through the encapsulation logic of JavaScript, HTML, or an optional CSS style sheet.

Decorate instructions - these instructions will be used to decorate the elements (such as adding a tooltip or using ES125en-ES126en/ES127en-ES128en to show/hide the elements).

Template directives - these will change HTML to reusable templates. The instantiation and embedding of templates into DOM can be completely controlled by instructions. Examples include ES134en-ES135en and ES136en-ES137en.

Routing scheme

The original Angular route was designed to handle 1 simple case. However, as the framework has evolved, more and more features have been added. Routing is already extensible in Angular 2.0 and will include the following basic features:

Simple json routing configuration;

Optional protocol over configuration;

Static. Parameterized routing pattern;

URL parser;

Support for query strings;

Use push status or Hashchange;

Navigation model (generate 1 navigation UI);

Document title update;

404 routing processing;

Location services;

Historical operations.

Now, let's take a look at some of the routing features that are taking Angular 2.0 to new heights:

Zi lu by

Subrouting transforms each component of an application into a smaller application by providing them with their own routing, which helps encapsulate the entire application's feature set.

Activation of the screen

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

canActivate -- Allows/prevents navigation to the new controller;

activate - responds successfully to navigation to the new controller;

canDeactivate -- allows/prevents navigation away from older controllers;

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

These callbacks will allow the developer to return the Boolean value or 1 command (for lower levels of control).

design

All of this logic is built using pipelining, making it very easy to add its own steps to the pipeline or remove the default. In addition, its asynchronous features will allow developers to authenticate with server requests or load data for the controller, although this is still in the planning stages.

The log

Angular 2.0 will include a logging service called ES221en.js -- a very useful feature that measures where you spend your time in your application.

Scope

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

conclusion

As the release date approaches, the excitement and sound around Angular 2.0 will intensify. Is breaking change a good thing? We don't know, but opponents are understandably nervous, given the apparent lack of plans to move. The Duang 1 is coming. But since it's coming, all we can do is greet it positively.

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


Related articles: