AngularJS とは何ですか? AngularJS_AngularJS の概要

AngularJS とは何ですか?

AngularJS は、動的な WEB アプリケーション用に設計された構造フレームワークです。 HTML をテンプレート言語として使用できるようになり、HTML の構文を拡張することで、アプリケーション コンポーネントをより明確かつ簡潔に構築できます。その革新的な点は、データ バインディングと依存関係の注入を使用して、大量のコードを作成する手間を省くことです。これらはすべてブラウザー側の Javascript を通じて実装されており、サーバー側のテクノロジと完全に統合されます。

AngularJS は、アプリケーションの構築における HTML の欠点を克服するように設計されています。 HTML は、静的なテキスト表示用に設計された優れた宣言型言語ですが、WEB アプリケーションの構築には弱いです。そこで、ブラウザに希望どおりの動作をさせるために、いくつかの作業 (トリックと言ってよいでしょう) を実行しました。形式日付

通常、動的アプリケーションを構築する際の静的 Web ページ テクノロジーの欠点を解決するために、次のテクノロジーを使用します。

1. クラス ライブラリ - クラス ライブラリは、WEB アプリケーションの作成に役立つ関数のコレクションです。制御するのはコードであり、ライブラリをいつ使用するかを決定するのはあなたです。クラス ライブラリには、jQuery などがあります。

2. フレームワーク - フレームワークは、すでに実装されている特別な WEB アプリケーションです。これに特定のビジネス ロジックを入力するだけで済みます。ここでのフレームワークは主導的な役割を果たし、特定のアプリケーション ロジックに従ってコードを呼び出します。フレームワークには、ノックアウト、スプラウトコアなどが含まれます。

AngularJS は別のアプローチを使用し、アプリケーションを構築する際の HTML 自体の欠点を補おうとします。 AngularJS では、ディレクティブと呼ばれる構造を使用してブラウザが新しい構文を認識できるようにします。例:

1. データ バインディングには二重中括弧 {{}} 構文を使用します。 2. DOM 制御構造を使用して DOM フラグメントを反復または非表示にします。 3. サポートフォームとフォーム検証
4. 論理コードを関連する DOM 要素に関連付ける機能
5. HTML を再利用可能なコンポーネントにグループ化する機能。

エンドツーエンドのソリューション

AngularJS は、WEB アプリケーションのエンドツーエンドのソリューションとなることを目指しています。これは、Web アプリケーションの単なる一部ではなく、完全なエンドツーエンドのソリューションであることを意味します。これにより、CRUD (作成の追加、取得のクエリ、更新の更新、削除の削除) アプリケーションを構築するときに、AngularJS が非常に「独自の」ものになります (元のテキストは独自の意見があり、他の方法があまりないことを意味します)。ただし、たとえ「頑固」であっても、その「頑固さ」はアプリケーションを構築するときの開始点にすぎず、変更する柔軟性は依然として確保されています。 AngularJS の優れた機能のいくつかは次のとおりです:

1. CRUD アプリケーションの構築に使用できるものには、データ バインディング、基本テンプレート識別子、フォーム検証、ルーティング、ディープ リンク、コンポーネントの再利用、依存関係の挿入が含まれます。

2. テストには、単体テスト、エンドツーエンドのテスト、シミュレーション、自動テスト フレームワークが含まれます。

3. ディレクトリ レイアウトを使用してアプリケーションをシードし、開始点としてスクリプトをテストします。

AngularJS のかわいさ

AngularJS は、開発者により高いレベルの抽象化を提供することで、アプリケーション開発を簡素化します。他の抽象化手法と同様に、ある程度の柔軟性が失われます。言い換えれば、すべてのアプリケーションが AngularJS に適しているわけではありません。 AngularJS は主に CRUD アプリケーションの構築に関係します。幸いなことに、WEB アプリケーションの少なくとも 90% は CRUD アプリケーションです。ただし、AngularJS での構築に何が適しているかを理解するには、AngularJS での構築に何が適していないのかを理解する必要があります。

たとえば、ゲーム、グラフィカル インターフェイス エディター、頻繁で複雑な DOM 操作を行うアプリケーションは CRUD アプリケーションとは大きく異なり、AngularJS での構築には適していません。このような状況では、jQuery のような軽量でシンプルなテクノロジを使用する方が良いかもしれません。

簡単な AngularJS の例

以下は、フォームを含む典型的な CRUD アプリケーションです。フォーム値は最初に検証され、次にローカル スタイルにフォーマットされた合計値の計算に使用されます。最初に理解する必要がある、開発者間で共通の概念をいくつか示します:

1. データモデル (data-model) をビュー (UI) に関連付けます。 2. ユーザー入力を書き込み、読み取り、検証します

3. モデルに従って新しい値を計算します。

4. 出力形式をローカライズします。

index.html:

コードをコピー コードは次のとおりです:

    <頭>
        <スクリプト src="http://code.angularjs.org/angular-1.1.0.min.js">
        <スクリプト src="script.js">
   
   
       

            請求書:
           

           

            <表>
                数量コスト
               
                   
                   
               
           
           

---

            合計: {{数量 * コスト |通貨}}
       

   

script.js:

复制代码代码如下:

function InvoiceCntl($scope) {
    $scope.qty = 1;
    $scope.cost = 19.95;
}

エンドツーエンドのテスト:

复制代码代码如下:

it('角度バインディングを表示する必要があります', function() {
    Expect(binding('数量 * コスト')).toEqual('$19.95');
    input('数量').enter('2');
    input('コスト').enter('5.00');
    Expect(binding('数量 * コスト')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

运行效果：

复制代 代码如下:

請求書:
数量、コスト
合計: {{数量 * コスト |通貨}}

この例を次に説明し、次にこの例の動作原理を一緒に見ていきます。マークは AngularJS** 自動初期化** (自動初期化) を可能にするアプリケーションです。 .min.js">
ボックスに ng-model プロパティを設定することにより、AngularJS はデータの双方向認証を自動的に実行します。

复制代 代码如下:

数量:
コスト:

この入力ボックスのウィジェットは非常に普通に見えますが、次の点に注意すると、非常に優れたものになります:

1. ページがロードされると、AngularJS はウィジェットで宣言されたモデル名 (数量、コスト) に従って同じ名前の変数を生成します。これらの変数は、MVC 設計パターンの M (モデル) として考えることができます。

2. 上記のウィジェットの入力には特別な機能があることに注意してください。データを入力していない場合、または入力したデータが無効な場合は、入力ボックスが自動的に赤色になります。入力ボックスのこの新機能により、開発者は CRUD アプリケーションに共通のフィールド検証機能を実装しやすくなります。

最後に、謎の二重中括弧 {{}} を見てみましょう:

コードをコピーします コードは次のとおりです:

合計: {{数量 * 通貨}}

この {{expression}} タグは AngularJS データ バインディングです。式には、式とフィルターを組み合わせたものを使用できます ({{ 式 | フィルター }})。 AngularJS は、入力データと出力データをフォーマットするためのフィルターを提供します。

上記の例では、{{}} の式は、入力ボックスから取得したデータを乗算し、乗算結果を現地通貨スタイルにフォーマットしてページに出力するように AngularJS に指示します。

ここで言及しておく価値があるのは、AngularJS メソッドを呼び出したり、フレームワークを使用するような特定のロジックを書いたりしておらず、上記の関数を完了しただけであるということです。この実装の背後にある理由は、ブラウザーが動的 WEB アプリケーションのニーズを満たすことができるように、静的ページを生成するために以前よりも多くの作業を行うようになったためです。 AngularJS は、クラス ライブラリやフレームワークが必要ない点まで、動的 WEB アプリケーション開発の敷居を下げます。

AngularJS の「Zen Tao (コンセプト)」

Angular は、ビュー (UI) の構築とソフトウェア ロジックの作成を同時に行う場合、命令型コードは命令型コードよりも宣言型コードの方がはるかに優れていると考えていますが、ビジネス ロジックの表現には命令型コードが非常に適しています。

1. DOM 操作とアプリケーション ロジックを分離することは非常に良いアイデアであり、コードの調整性を大幅に向上させることができます。 2. テストと開発を同等に扱うことは、非常に良い考えです。テストの難易度は、コードの構造に大きく依存します。 3. クライアントとサーバーを分離することは特に良い方法であり、これにより両側での並行開発が可能になり、両側でのコードの再利用が可能になります。 4. フレームワークが、UI の設計からビジネス ロジックの作成、テストに至るまで、開発プロセス全体にわたって開発者をガイドできれば、開発者にとって非常に役立ちます。

5. 「複雑さを単純化して、複雑さをゼロにする」ことは常に良いことです。

AngularJS を使用すると、次の悪夢から解放されます:

1. コールバックを使用する: コールバックを使用すると、コードの可読性が損なわれ、コードが断片化され、元のビジネス ロジックがわかりにくくなります。コールバックなどの一般的なコードを削除することは良いことです。 JavaScript 言語の設計により、記述しなければならないコードが大幅に削減されるため、アプリケーションのロジックをより明確に確認できるようになります。

2. DOM 要素を操作するコードを手動で作成する: DOM の操作は AJAX アプリケーションの非常に基本的な部分ですが、常に「扱いにくく」エラーが発生しやすくなります。宣言的な方法で記述された UI インターフェイスは、アプリケーションの状態の変化に応じて変更できるため、低レベルの DOM 操作コードを記述する必要がなくなります。 AngularJS で作成されたほとんどのアプリケーションでは、開発者自身が DOM を操作するコードを作成する必要はなくなりましたが、必要に応じてコードを作成することもできます。

3. UI インターフェイスでのデータの読み取りと書き込み: AJAX アプリケーションの大部分は CRUD 操作です。古典的なプロセスでは、サーバー側のデータを内部オブジェクトに編成し、そのオブジェクトを HTML フォームにコンパイルします。ユーザーがフォームを変更した後、フォームが検証され、エラーがある場合はエラーが表示されます。データは内部オブジェクトに再編成され、サーバーに返されます。このプロセスでは繰り返し記述する必要があるコードが多すぎるため、コードは常に特定のビジネス ロジックやビジネスの詳細ではなく、アプリケーションの実行プロセス全体を記述しているように見えます。

4. 開始する前に、多くの基本コードを記述する必要があります。通常、「Hello World」アプリケーションを実装するには、多くの基本コードを記述する必要があります。 AngularJS を使用すると、アプリケーションの正式な作成を簡単に開始できるいくつかのサービスが提供されます。これらのサービスは、Guice のような依存関係注入を通じてアプリケーションに自動的に追加され、特定の開発にすぐに入ることができます。あなたのアプリケーション。特に、自動テストの初期化プロセスも完全に把握できます。