angularjs の簡単な紹介勉強ノート_AngularJS-jsチュートリアル-php.cn

angularjs の簡単な紹介勉強ノート_AngularJS

WBOY

リリース： 2016-05-16 15:38:02

オリジナル

1005 人が閲覧しました

1. angularjs の概要

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

ここまで言っても、何も分からないと思います。。。そうですか？心配しないでください。モジュール性、双方向データバインディング、依存関係注入、命令などの機能のいくつかについて説明しましょう。以下でこれらの機能を調べてみましょう。

2.angularjs は MVC の概念に基づいています

いわゆるMVCはモジュール(データモデル)、ビュー(ビュー)、コントローラー(コントローラー)です

実際、angularjs はこれら 3 つのモジュールを組み合わせています。まず、私が描いたモデル図を見てみましょう。

3. 組み合わせた説明

上で述べたように、angularjs の特徴はモジュール化、依存性注入、双方向バインディング、命令です。上の図に基づいて説明しましょう:

モジュール性: 上の図のフィルター、ディレクティブ... の下にある 4 つの四角は、モジュールの代表的な 4 つのメソッドです (各関数の使い方と機能については後ほど 1 つずつ説明します)。これも理解できます。それぞれのモジュールは独立した小さなモジュールとして機能が異なりますが、分業が明確で構造が明確であり、モジュール化を実現しています。

依存性注入: 上記の 4 つの小さなモジュールは独立しているように見えますが、相互に依存しており、相互に参照して強力な機能を実現できます (参照方法については後で詳しく説明します))、これが依存性注入です。

命令: 上の図からわかるように、命令は図の指示メソッドです。 angularjs には、ng-app (angularjs のスコープを指定する)、ng-model (データモデルを定義し、双方向バインディングを実装する)、ng-repeat (ラベルを繰り返す)、ng- など、多くの組み込み命令があります。 change (タグの値が変更されたかどうかを監視する) など、ここでのディレクティブが最も重要な機能はカスタムディレクティブです (一部のチュートリアルでは、これが html の拡張であるとも述べています)。

双方向バインディング: 双方向バインディングは、上の図のモジュールとビュー、つまりデータとビューの双方向バインディングです。先ほど述べた ng-model ディレクティブが使用されます。

4. 簡単な双方向バインディングの例を見てください。

index.html:

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </head>
  <body>
    <div> 
      <input type="text" ng-model="text">
      <b>Hello {{text}}</b>
    </div>
  </body>
</html>

ログイン後にコピー

上記のコードをブラウザに取り込んで実行できます (angularjs を参照しているアドレスに注意してください) angularjs が非常に強力であることに驚くでしょう。！

上記のコードの理解しにくい箇所を簡単に説明します。

ng-app はアプリケーションのスコープを指定します。これは、HTML コード全体が angularjs を認識できることを意味します。
ng-model はデータモデル名のテキストを要素にバインドし、入力の入力値がこのモデルに保存されます。
{{text}} これはangularjsでの式の書き方です。つまり、真ん中のテキストが上記のモデル名に対応する変数になります。入力値の変化をリアルタイムに監視し、ビューを更新できます。リアルタイムで表示

はは、angularjs は非常にシンプルです。この小さなメモが皆さんの angularjs への興味を呼び起こすことを願っています。今後も angularjs の学習メモを更新していきます。皆さんのお役に立てれば幸いです。上記の注意事項についてわからないことがあれば、質問していただければ必ずお答えします。皆さんの幸せな人生を祈っています！