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.

ルーティング計画

最初の Angular ルーティングは、いくつかの単純な状況を処理するように設計されています。ただし、フレームワークが進化するにつれて、より多くの機能が追加されます。ルーティングはすでに Angular 2.0 で拡張可能であり、次の基本機能が含まれます:

シンプルな JSON ベースのルーティング構成;

構成上のオプションの契約

静的。パラメータ化されたルーティング モード;

URL パーサー;

クエリ文字列をサポートします。

プッシュステータスまたはハッシュチェンジを使用します。

ナビゲーション モデル (ナビゲーション UI を生成します)

ドキュメントのタイトルが更新されました;

404 ルーティング処理

位置情報サービス;

過去の操作。

それでは、Angular 2.0 を新たな高みに引き上げるルーティング機能を見てみましょう:

サルート

サブルーティングは、アプリケーションの各コンポーネントに独自のルートを提供することで、より小さなアプリケーションに変換します。これは、アプリケーション全体の機能セットをカプセル化するのに役立ちます。

画面のアクティブ化

これにより、開発者は一連の can* コールバックを通じてナビゲーションのライフサイクルをより適切に制御できます。

canActivate - 新しいコントローラーへのナビゲーションを許可/ブロックします。

アクティブ化 - 新しいコントローラーへのナビゲーションが成功した場合に応答します。

canDeactivate - 古いコントローラーからのナビゲーションを許可/ブロックします。

非アクティブ化 - 古いコントローラーからのナビゲーションの成功に応答します。

これらのコールバックを使用すると、開発者はブール値またはコマンド (下位レベルの制御用) を返すことができます。

デザイン

このロジックはすべてパイプライン構造を使用して構築されているため、パイプラインに独自のステップを追加したり、デフォルトのものを削除したりすることが非常に簡単になります。さらに、その非同期の性質により、開発者はサーバー リクエストを使用してコントローラーの認証やデータのロードを行うことができますが、これはまだ計画中です。

ログ

Angular 2.0 には、diary.js と呼ばれるログ サービスが含まれます。これは、アプリケーションのどこに時間が費やされたかを測定するのに非常に便利な機能です。

範囲

$scope は Angular 2.0 から削除され、ES6 クラスに置き換えられます。

結論

リリース日が近づくにつれて、Angular 2.0 をめぐる興奮と話題はさらに激化するでしょう。破壊的な変化は良いことなのでしょうか?私たちには知る由もありませんが、明らかに移転計画がないことを考えると、反対派が緊張しているのは当然です。興奮はすぐに伝わってきました。しかし、それがやってくるのですから、私たちにできることは、それを積極的に歓迎することです。

上記のコンテンツは AngularJS 2.0 の新機能を紹介していますので、お役に立てれば幸いです。