angularjs の応用シナリオは何ですか? angularjsのアプリケーションシナリオの紹介

この記事では主に angularjs の応用シナリオと、angularjs の応用について説明します。内容は多くありませんので、ぜひ一緒に読んでみてください。 angularjs のアプリケーション シナリオの説明:

AngularJS の動作原理は次のとおりです: HTML テンプレートはブラウザーによって DOM に解析され、DOM 構造は AngularJS コンパイラーの入力になります。 AngularJS は DOM テンプレートを走査して、対応する NG 命令を生成します。すべての命令は、ビュー (つまり、HTML の ng-model) のデータ バインディングを設定します。したがって、NG フレームワークは、DOM がロードされた後にのみ機能し始めます。これは、大規模なブラウザーと大規模な Web サイト プロジェクトで試行されます。

ここで、angularjs のアプリケーション シナリオについて話しましょう:

Angular は、多くのプログラマーが複雑な Web アプリケーションを構築および保守するために使用する、人気のあるエンタープライズ レベルのフレームワークです。 Angular は非常に人気があり、ドミノ・ピザと同じくらい多くの企業 (Ryanair、iTunes Connect、PayPal Checkout、Google) で使用されています。 Angular は、Google が提供するオープンソース フレームワークです。 Angular は、それ自体を、複雑な Web アプリケーションを構築するための HTML の拡張機能と呼んでいます。 TypeScript にも精通している場合は、Angular 2 の書き方をご覧ください。

Angular は MVC アーキテクチャを採用しています。これは、モデル層とビュー層の間に二重のデータ バインディングを提供します。このデータ バインディング方法の利点は、データのどちらの側が変更されても、両側のデータが自動的に更新されることです。これは、利用可能な View コンポーネントを構築するのに役立ちます。また、フロントエンド サービスとバックエンド サービス間の対話を容易にするためのサービス フレームワークも提供します。何よりも、それはシンプルな JavaScript です。

angularjs アプリケーションの紹介:

angular アプリケーション: Angular 拡張構文を持つ HTML を使用してテンプレートを作成し、コンポーネント クラスを使用してこれらのテンプレートを管理し、サービスを使用してアプリケーション ロジックを追加し、コンポーネントとサービスをモジュールにパッケージ化して公開します。ルート モジュールをブートしてアプリケーションを開始します。 Angular はアプリケーションのコンテンツを引き継いでブラウザに表示し、提供された操作指示に従ってユーザーの操作に応答します。

AngularJS Reference Manual

Angular アプリケーションの 8 つの主要な構成要素:

• コンポーネントコンポーネント

• templatetemplate

• metadatametadata

• データバインディングデータバインディング

• ディレクティブディレクティブ

• サービスサービス

• 依存関係注入
angular モジュール:

Angular アプリケーションはモジュール式であり、Angular Modules/NgModules と呼ばれる独自のモジュール システムを持っています。

デコレーターは、JavaScript クラスを装飾するために使用される関数です。クラスにメタデータを添付する責任を負います。

• 宣言: このモジュールで所有されているクラスを表示します。 Angular には、コンポーネント、ディレクティブ、パイプという 3 つのビュー クラスがあります。

• exports: 他のモジュールのコンポーネントテンプレートに使用できる宣言のサブセット。

• インポート: このモジュールのコンポーネントテンプレート内のクラスは、他のテンプレートによってエクスポートする必要があります。

• プロバイダー: サービスの作成者。このモジュールはそれらをグローバル サービス テーブルに追加し、アプリケーションのどの部分からでもアクセスできるようにします。

• ブートストラップ: アプリケーションのメインビュー (ルートコンポーネント) を識別します。ルート モジュールのみがこのプロパティを設定できます。
これは単純なルート モジュールです:

// app.module.ts
import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// @NgModle 装饰器函数，接受一个对象，对象有几个属性
@NgModule({
 imports:   [ BrowserModule ],
 providers:  [ Logger ],
 declarations: [ AppComponent ],
 exports:   [ AppComponent ],
 bootstrap:  [ AppComponent ]
})
// AppComponent 的 export 语句导出，根模块不需要导出，其他组件不需导入根模块。
export class AppModule { }

// app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 从app.module 文件导入了 AppModule
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

AngularJS Learning Manual

【編集者のおすすめ】

angularjsとVueの違いは何ですか？ angularjs と Vue の比較の詳細

angularjs の利点は何ですか?知っておくべきangularjsの7つの利点は次のとおりです

以上がangularjs の応用シナリオは何ですか? angularjsのアプリケーションシナリオの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。