ホームページ > ウェブフロントエンド > jsチュートリアル > angularjs の簡単な紹介勉強ノート_AngularJS

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 の学習メモを更新していきます。皆さんのお役に立てれば幸いです。上記の注意事項についてわからないことがあれば、質問していただければ必ずお答えします。皆さんの幸せな人生を祈っています!

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート