Angular 5 初心者が知っておくべきこと

今回は、Angular 5 の初心者が知っておくべきことをお届けします。Angular 5 を使用する初心者向けの 注意事項 について、実際のケースを見てみましょう。

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

Angular の歴史

約半年ぶりに新バージョンがリリースされるようですが、実は書き換えられたバージョン2からは開発インターフェースや核となる考え方が安定しており、基本的には前バージョンとの互換性が保たれています。

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

1. プログレッシブ Web アプリの構築が簡単になる - プログレッシブ Web アプリ

2. ビルド オプティマイザーを使用して、小規模なアプリの無駄なコードを排除し、ネットワークの読み込み時間を短縮します

3. 具体化されたデザイン コンポーネントをサーバーサイド レンダリングと互換性のあるものにします

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

2 番目に、Angular 環境を紹介します Angular では、TypeScript を使用してアプリケーションを開発することを推奨しています。これには、オンライン コンパイラー (JIT) を使用してコードをリアルタイムでコンパイルするか、プリコンパイラー (AOT) を使用して開発中に事前にコードをコンパイルする必要があります。

この面倒なプロセスが Angular フレームワークの本質についての思考に影響を与えるのを避けるために、オンラインでの執筆や実験に適応するために必要なものを必要に応じて構成し、パッケージ化しました。あとはライブラリ 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 言語自体のモジュール概念と区別するために、このコースでは NG モジュールを使用して Angular モジュールを表します。

コンポーネントと同様に、NG モジュールは NgModule デコレータが適用されたクラスです。たとえば、次のコードは NG モジュール EzModule を作成します。 同様に、NgModule デコレーターは、装飾されたクラスにモジュールのメタデータを添付するために使用されます。装飾されたクラスの注釈属性を表示して、この結果を確認できます。

ngmodule annotations

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

imports： 需要引入的外部NG模块

declarations：本模块创建的组件，加入到这个元数据中的组件才会被编译

bootstrap：声明启动引导哪个组件，必须是编译过的组件

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

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

1. ServerModule：服务端实现

2. 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对平台的抽象），这个函数最重要的作用，在于其内部创建了一个即时（Just In Time）编译器，可以在线实时编译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编译通常在构建阶段运用，我们可以在浏览器里模拟这个分两步的过程。

7. Angular の本来の意図を理解する

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

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

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

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

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

ネイティブ HTML の問題は、まず第一に、まともなユーザー インタラクションを実現するには JavaScript が必要であること、そして第二に、使用できるタグが非常に多くしかないため、ユーザー インターフェイスを開発するタスクを引き受けることが困難であることです。

ブラウザーは のようなタグを直接解釈できないため、Angular チームはコンパイラーの概念を導入しました:
ブラウザーに送信する前に、まず拡張タグを含む HTML をブラウザーでサポートされるネイティブ HTML に変換します: htmlコンパイラ

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がAngular 5 初心者が知っておくべきことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。