ホームページ >ウェブフロントエンド >jsチュートリアル >angularjs の簡単な紹介勉強ノート_AngularJS
angularjs の簡単な紹介勉強ノート_AngularJS
- WBOYオリジナル
- 2016-05-16 15:38:021004ブラウズ
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 の学習メモを更新していきます。皆さんのお役に立てれば幸いです。上記の注意事項についてわからないことがあれば、質問していただければ必ずお答えします。皆さんの幸せな人生を祈っています！