AngularJSの使い方は？ angularjs の使用方法の詳細な紹介

この記事では主に angularjs の使い方の詳細について説明します。angularjs の簡単な機能の説明がいくつかありますので、一緒に見てみましょう

。

最近、プロジェクトで AngularJS を使用し、週末に勉強してみんなに共有しました。

1. AngularJSの簡単な紹介
AngularJSの公式ドキュメントではこのように紹介されています。
JavaScript クライアント側テクノロジーを使用して完全に記述されています。他の古くからある Web テクノロジ (HTML、CSS、JavaScript) と連携して、Web アプリケーション開発をこれまでより簡単かつ迅速に行うことができます。
AngularJS を使用すると、Web アプリケーションの開発が非常に簡単になると同時に、複雑なアプリケーションの構築の難しさも軽減されます。これは、開発者が最新の Web アプリケーションでよく使用する一連の高度な機能を提供します。通常の Web アプリ);
テスト
その他の機能。


2. Angularjs のディレクトリ構造
最新バージョンは angular2.0 で、私が使用しているバージョンは 1.3 です。

基本的な機能を使用する場合、angular.js または angular.min.js ファイルをインポートするだけで済みます。他の js ファイルは、ルーティングに関するスクリプト ファイルである angular-route.js など、angularjs から分離された関数です。バージョン 1.2 では、ルーティングを使用するために別の angular-route.js を記述する必要はありませんが、バージョン 1.3 以降では。 、angular-route.jsを別途インポートするために必要なパスを使用します

3. Angularjsの基本的な使用方法

Webプロジェクトを作成し(Hbuilderを使用)、jsファイルをインポートします

AngularJsの主なコア機能: MVCモジュール化 データ バインディング、セマンティック タグ (命令)、依存関係注入など

MVC

MVC の中心的な概念は、データを管理するコード (モデル)、アプリケーション ロジック コード (コントローラー)、および表示するコードを分離することです。データ（ビュー）。 Angular アプリケーションでは、ビューは DOM、コントローラーは JavaScript、モデル データはオブジェクトのプロパティに保存されます。
私は小さな例を書きました:
HTML コード

JS コード

この場合、ng-app は angular ディレクティブ (通常、angular are ディレクティブでは ng- で始まります) です。ページ全体を記述するために使用されるのは、Angular アプリケーションの所有者です。 {{msg}} ページ上のデータを出力するために使用されます。 ng-bind を使用してデータをバインドし、ページに出力することもできます。

双方向データバインディング

従来の js フレームワークでは、html コードとデータを混合して表示する前にユーザーに送信しますが、angular では UI の特定の部分を javascript 属性にマッピングできます。これはデータ バインディングと呼ばれます。次のコードを確認してください。
上記のコードに AngularJS 開発マニュアル

にアクセスして学習してください)

モジュール化

上記のコードでは、js ファイルの開発中にグローバル関数 demo1Controller を宣言しました。 js グローバル関数や変数を定義することは推奨されません。この種のコーディングは「エレガント」ではありません。 Angular では、モジュール (この問題を解決するためのモジュール化) を使用できます

上記のコードを次のように変更しました: Html コード
、


JS コード

コードの実行結果は変わりませんが、 angular.module を通じてモジュールを定義しました。 Angular.module("myapp",[ ]) の後ろの「[ ]」は、現在の myapp モジュールが他のモジュールに関連しているかどうかを表します。関連していない場合は、[ ] 内にコードを記述する必要はありません。しかし [ ] 存在する必要があります。存在しない場合は意味が異なります。

注: angularjs のすべてはモジュールから始まります。

Dependency Injection
上記のコードでは、誰もが疑問を抱くはずです。つまり、js コードで使用する $scope は誰が作成したのか、なぜそれを使用できるのかということです。実際、これはすべて angular が提供する依存性注入を利用して行われます。私は Spring を勉強しているときに依存性注入の概念にはすでに触れていましたが、フロントエンド開発では依存性注入を使用するのは初めてです。
AngularJS は $injetor (インジェクター サービス) を使用して依存関係のクエリとインスタンス化を管理します。
実際、$injetor は、アプリケーション モジュール、ディレクティブ、コントローラーなど、AngularJS のすべてのコンポーネントをインスタンス化する役割を果たします。実行時、$injetor は、起動時にモジュールをインスタンス化し、必要なすべての依存関係を渡す役割を果たします。開発において私が最も学ぶのは、必要な場所にパラメーターを渡すことです。
Angularjsにおけるインジェクションは大きく3種類に分けられます:
推論インジェクション

表示インジェクション(アノテーション付きインジェクション)

インラインインジェクション(インラインインジェクション)

この記事はここで終わりです。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAngularJSの使い方は？ angularjs の使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。