Angular 5 のクイックスタート例の共有-jsチュートリアル-php.cn

Angular 5 についてどのくらい知っていますか?この記事では主に Angular 5 のクイックスタートについて簡単に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1.概要

Angular5と呼ばれていますが、実際には2012年に生まれたこのフロントエンドフレームワークの4番目のバージョンに過ぎません:

Angularの歴史

がリリースされたようです約半年前新しいバージョンですが、実際に書き直されたバージョン 2 からは、開発インターフェイスとコアのアイデアが安定しており、基本的には以前のバージョンとの互換性が維持されています。

この新しいバージョン 5 では、Angular チームは次の機能に焦点を当てて改善しました:

プログレッシブ Web アプリケーションの構築が容易 - __P__progressive __W__eb __A__pp
ビルドオプティマイザーを使用して無駄なコードを排除し、より小さなアプリケーションとネットワークの読み込み時間が短縮されます
具体化されたデザインコンポーネントをサーバーサイドレンダリングと互換性のあるものにします

PWA は Google によって提案された標準であり、Web アプリケーションをモバイル端末上のネイティブアプリケーションと同等のユーザーエクスペリエンスにすることを目的としています。 PWA アプリケーションは主に Service Worker とブラウザーキャッシュを使用して、インタラクティブなエクスペリエンスを向上させます。携帯電話のデスクトップに直接展開できるだけでなく、オフラインでも使用できます。 Angular 環境

Angular では、TypeScript を使用してアプリケーションを開発することをお勧めします。これには、オンラインコンパイラー (JIT) を使用してコードをリアルタイムでコンパイルするか、プリコンパイラー (AOT) を使用して開発中に事前にコードをコンパイルする必要があります。期間。

この面倒なプロセスが Angular フレームワークの本質についての思考に影響を与えるのを避けるために、オンラインでの執筆や実験に適応するために必要なものを必要に応じて構成し、パッケージ化しました。あとはライブラリ a5-loader を導入するだけです。

下の図はライブラリの構造を示しており、青色のコンポーネントはすべてライブラリにパッケージ化されています:

a5-loader

Angular フレームワークが青色ではないことに気づくかもしれません。実際、a5-loader にはパッケージ化せず、アプリケーションのニーズに応じてモジュールローダー (SystemJS) に自動的にロードさせました。この目的は、アプリケーションコードを後続のコースで使用される

バックエンド構築

メソッドと一貫性を持たせることです。

このライブラリに興味がある場合は、github の http://github.com/hubwiz/a5-loader リポジトリにアクセスしてください。

3. Angular コンポーネントを作成する

Angular は、

コンポーネント指向のフロントエンド開発フレームワークです。

C/S

グラフィカルアプリケーションの開発に携わったことがある場合は、

コンポーネントという言葉の意味を知っているはずです。基本的に、コンポーネントは、グラフィカルインターフェイスと固有の論理機能を備えたいくつかのプログラムユニットを表します。次の図は、ピンポンスイッチングの実装に使用される 3 つのコンポーネントを示しています。

コンポーネントのサンプル コンポーネントは、一連のコンポーネントに基づいて、簡単なグルーコードを使用して、非常に複雑なインタラクティブな機能を実装できます。 次に、Angular コンポーネントを作成しましょう。コードは非常に簡単です:

@Component({ selector: "ez-app", template: `<h1>Hello,angular5</h1>`})class EzComp{}

ログイン後にコピー

Angular フレームワークでは、コンポーネントは、コンポーネントデコレータが適用されたクラスを参照します。コンポーネントデコレーターの役割は、装飾されたクラスにメタデータ情報を添付することです:

注釈

Angular フレームワークがアプリケーションをコンパイルしてガイドするとき、これらのメタデータを使用してビューを構築します。メタデータのうち 2 つは非常に重要です:

selector: DOM ツリー内のコンポーネントのレンダリングアンカーポイントを宣言するコンポーネントのホスト要素の CSS セレクター

template: フレームワークが使用するコンポーネントのテンプレートこのテンプレートをブループリント構築ビューとして表示します

4. Angular モジュールを作成します
Angular フレームワークの中核はコンポーネント化であり、その設計目標は大規模なアプリケーションの開発に適応することです。したがって、さまざまなコンポーネント (およびサービス) を整理するために、モジュール (NgModule) の概念がアプリケーション開発に導入されます。Angular アプリケーションでは、少なくとも 1 つのモジュールを作成する必要があります。
JavaScript言語自体のモジュール概念と区別するため、このコースではAngularモジュールを表すためにNGモジュールを使用します。

コンポーネントと同様に、NG モジュールは NgModule デコレーターが適用されたクラスです。たとえば、次のコードは NG モジュール EzModule を作成します。

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ EzComp ],
 bootstrap: [ EzComp ]
})
class EzModule{}

ログイン後にコピー

同样，NgModule装饰器用来给被装饰的类附加模块元数据，可以查看被装饰类的__annotations__属性来观察这一结果：

ngmodule annotations

NgModule装饰器声明了一些关键的元数据，来通知框架需要载入哪些NG模块、编译哪些组件以及启动引导哪些组件：

imports：需要引入的外部NG模块
declarations：本模块创建的组件，加入到这个元数据中的组件才会被编译
bootstrap：声明启动引导哪个组件，必须是编译过的组件

需要强调的是，bootstrap元数据声明的组件必须是编译过的组件：它要么属于使用imports元数据引入的外部NG模块，要么是已经在declarations元数据中声明的本地组件。

NG模块BrowserModule定义于包@angular/platform-browser，它是Angular跨平台战略的重要组成部分。BrowserModule封装了浏览器平台下的核心功能实现，与之对应的其他平台实现还有：

ServerModule：服务端实现
WorkerAppModule：WebWorker实现

通常情况下开发Web应用时，我们都需要引入BrowserModule这一NG模块。

五、启动Angular应用

前面课程中，我们已经创建了一个组件和一个NG模块，不过似乎只是定义了一堆的元数据，几乎没有写太多有价值的代码。
但这就是Angular框架的一个特点：声明式开发。这些元数据是用来向框架声明如何引导启动应用程序的重要信息。

启动代码很简单，引入platformBrowserDynamic()工厂函数、创建平台实例、启动指定模块：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
const pref = platformBrowserDynamic()
pref.bootstrapModule(EzModule)

ログイン後にコピー

√ 平台对象：PlatformRef

platformBrowserDynamic()函数返回一个PlatformRef对象（Angular对平台的抽象），这个函数最重要的作用，在于其内部创建了一个即时（__J__ust __I__n __T__ime）编译器，可以在线实时编译NG模块和组件，这也是它被称为动态（Dynamic）的原因：

dynamic bootstrap

平台对象的bootstrapModule()方法用来启动指定的NG模块，启动的绝大部分工作，在于利用JIT编译器编译NG模块和组件，当这些编译工作都完成后，则根据启动模块的bootstrap元信息，渲染指定的组件。

六、为什么这么复杂？

可能你已经感觉有点复杂了：只是为了写一个Hello,World，就要写这么多代码。

事实上这些复杂性是随着Angular的发展逐步引入的，从好的一方面说，是提供给开发者的可选项逐渐增多了，适用场景变多了。

比如，在Angular2正式版之前，都没有NG模块的概念，你只要写一个组件就可以直接启动应用了。Angular团队的预期应用场景是大规模前端应用开发，因此显式的NG模块声明要求也是容易理解的。不过即使是小型的应用，由于可以只使用一个NG模块，因此这一点的复杂性增加倒也不多，只是增加了学习和运用这个新概念的成本。

另一个显而易见的复杂性，在于多平台战略的引入。Angular希望让应用可以跨越浏览器、服务器等多个平台（基本）直接运行。因此免不了抽象一个中间层出来，我们需要在应用中显式地选择相应的平台实现模块：

multiple platform

第三个复杂性来源于对预编译（AOT：Ahead Of Time）的支持。在早期，Angular只有即时编译（JIT：Just In Time），也就是说应用代码是在运行时编译的。即时编译的第一个问题是在应用中需要打包编译器代码，这增加了最终发布的应用代码的
大小；另一个问题在于编译需要时间，这增加了用户打开应用的等待时间。因此现在的Angular是同时支持JIT和AOT的，但启动JIT编译的应用，和启动AOT编译的应用，在目前需要显式地进行选择：

aot vs. jit

Angular の場合、コンパイルによりエントリ NG モジュール定義が NG モジュールファクトリ (NgModuleFactory) に変換されます。 JIT の場合、このステップは bootstrapModule() で暗黙的に行われます。 AOT の場合、アプリケーションの起動時に bootstrapModuleFactory() を使用して、生成されたモジュールファクトリを呼び出すだけで、モジュールファクトリの生成が完了します。

AOT コンパイルは通常ビルド段階で使用されますが、この 2 段階のプロセスをブラウザーでシミュレートできます。

7. Angular の本来の目的を理解する

フレームワーク自体の強力な機能によって引き起こされる複雑さに加えて、Angular の複雑さのもう 1 つの原因は、高度にカプセル化された宣言型 API にあり、開発者は実装メカニズムを理解して洞察する必要があるため、問題が発生すると、分析とトラブルシューティングが困難になります。

Angular は使用できません。ブラックボックスとして。

その理由は、Angular がその宣言型テンプレート構文をコアとして API 開発インターフェイスを提供するためであり、開発者が作成したテンプレートは、最終的なビューオブジェクトをレンダリングする前にフレームワークによる非常に複雑なコンパイル処理を経ます。テンプレートからビューオブジェクトに至るまでのプロセスで何が起こるかを理解しようとしないと、常に制御不能な気分になると思います。

一方、Angular はアプリケーションのフレームワークを設定するものであり、開発者が埋めるためのギャップがいくつか残されています。フレームワークがどのように機能するかをできるだけ理解していなければ、フレームワークを最大限に活用することは困難です。

Angular 開発の出発点は、HTML を使用してユーザーインターフェイスを記述することです。静的 Web ページを開発することがいかに簡単かを考えてみれば、それがいかに良いアイデアであるかがわかるでしょう:

html チャレンジ