アングラーJS

14311 ワード

AnglarJSはGoogleのオープンソースであるJavaScript MVCフレームであり、HTMLのアプリケーション構築における不足を補い、コマンド構造を使ってHTML語彙を拡張し、開発者がHTMLを使ってダイナミックコンテンツを声明することができ、Web開発とテスト作業がより容易になる.
概要
AnglarJSは、動的WEBアプリケーションを構築する際の静的なテキストの不足を補うために、HTMLの文法を拡張して、ウェブアプリケーションでHTML音声を使って動的なコンテンツを明らかにする新しい開発アプリケーションを提供する動的なフレームワークです.
AnglarJSには五つの主要な核心特性があります.以下のように紹介します.

双方向データバインディングは、modelとviewを完全に結びつけることを実現し、modelが変化し、viewも変化し、逆もまた然りである.

テンプレート——AnglarJSでは、HTMLファイルがブラウザでDOMに解析され、AnglarJSがこれらのDOMを巡回しています.つまりAugurJSはテンプレートをDOMとして操作し、いくつかのコマンドを生成してviewに対するデータバインディングを完了します.

MVM――伝統的なMVC設計パターン針を吸収しましたが、伝統的なMVCを実行しません.MVMに近いです.

注入に依存しています.AnglarJSは内部に構築された依存注入サブシステムを持っています.開発者の開発を容易にし、応用を理解し、テストすることができます.

コマンドは、カスタムラベルを作成するために使用されてもよく、要素を装飾するために使用されてもよいし、DOM属性を操作するために使用されてもよい.

アプリケーションを作成
AnglarJSフレームワークを認識し、AnglarJSアプリケーションの最初の作成を開始しました.
AnglarJSはJavaScriptファイルとしてリリースされています.Scriptタグを通じてAnglarJSスクリプトにロードすることができます.以下の通りです.


  
  
  
  
   
   
   
   <script src="http://www.hubwiz.com/javascripts/angular.min.js"></script>

以下のコードを右のバーにコピーして準備します.


  
  
  
  
   
   
   
   <div ng-app="" ng-init="name='World'">
   
   
   
    Hello {{ name }}！
   
   
   
   </div>

実行結果をクリックして、「ハローワールド」かどうかを確認します.正しいなら、AnglarJSスクリプトの導入に成功したということです.
コマンド紹介
AnglarJSは、ウェブアプリケーションの開発を支援するための完全なコマンドセットを持っています.HTMLは「特定の分野の言語(DSL)」に変換できます.これは、ブラウザの能力を拡張するための技術の一つです.DOMコンパイルの間にHTMLに関連するコマンドが検出され、実行されます.これにより、DOMのための動作を指定したり、変更したりすることができます.
AnglarJSは、コマンドの新しい属性と呼ばれるHTMLを拡張し、プレフィクスng-を有し、DOM要素に結合された関数としても知られています.方法、定義行為、バインディングcontroler、および$scopeオブジェクト、操作DOMなどを呼び出すことができます.
AngullarJS命令は、「関連するHTML構造がコンパイル段階に入った時に実行すべき操作」を示しています.本質的にはコンパイラが関連DOMにコンパイルする時に実行しなければならない関数だけで、要素の名前、属性、cssクラス名、コメントに書いてもいいです.
ブラウザが起動し、HTMLの解析を開始すると、DOM要素の命令属性は他の属性と同じように解析されます.つまりAnglar.jsアプリケーションが起動すると、AnglarコンパイラはDOMツリーを巡回してHTMLを解析します.これらのコマンド属性関数を探して、一つのDOM要素の上に一つ以上のこのような命令属性関数を見つけます.そして優先順位順に実行されます.
Anglar.jsアプリケーションのダイナミック性と応答力は、コマンド属性に起因します.よく見られるのは、ng-ap、ng-innit、ng-model、ng-bind、ng-repeatなどです.
「指令属性」については、とりあえずこれらを紹介します.あなたはすでにそれについての初歩的な理解があると信じています.
コマンド:ng-ap
AnglarJSアプリケーションを明示し、AnglarJSを通じて自動初期化アプリケーションとマークアプリケーションのルート機能領域を完了し、コマンドの内容に関連するモジュールをロードしながら、ng-apコマンドのラベルを持つことで、ルートノードにDOMのコンパイルを開始します.
引用方法は簡単で、以下の通りです.


  
  
  
  
   
   
   
   <div ng-app="">
   
   
   
    
   
   
   
   </div>

前述のように、AnglarJSアプリケーションの初期化が完了し、スコープをマークしました.つまり、div要素はAnglarJSアプリケーションの所有者です.その中にあるコマンドはAnglarコンパイラによってコンパイルされ、解析されます.
指令:ng-init
ng-nitコマンドはアプリケーションデータを初期化します.つまりAnglarJSアプリケーションのために初期値を定義します.通常はコントローラやモジュールを使ってそれを代替します.後にコントローラやモジュールに関する知識を紹介します.
下記のように、アプリケーション変数nameに初期値を割り当てます.


  
  
  
  
   
   
   
   <div ng-app="" ng-init="name='Hello World'">
   
   
   
    
   
   
   
   </div>

文字列だけでなく、数値、配列、オブジェクトとしても指定できます.また、複数の変数に初期値を割り当てることができます.以下のようになります.


  
  
  
  
   
   
   
   <div ng-app="" ng-init="quantity=1;price=5">
   
   
   
    
   
   
   
   </div>
   
   
   
   //  
   
   
   
   <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
   
   
   
    
   
   
   
   </div>

後はまた、コントローラを使ってデータを初期化する方法を学びます.次に、これらの初期化された値を呼び出す方法を学びます.
AnglarJS表式
AnglarJSフレームのコア機能の一つであるデータバインディングは、2つの括弧｛｝から構成されており、データをHTMLに結びつけることができます.Javascriptコードのセグメントのように、文字、演算子、変数を含むことができます.通常はバインディングデータに使用されます.式は数字、文字列、オブジェクト、配列を結びつけて、ダブル括弧内に書くことができます.

は、前の例のように、初期化変数値を以下のように式を用いて呼び出すことができます.


  
  
  
  
   
   
   
   <div ng-app="" ng-init="name='Hello World'">
   
   
   
    {{ name }}
   
   
   
   </div>

もちろん、表式出力数字、配列なども使用できます.
2.1.出力数字は、以下の例を示します.


  
  
  
  
   
   
   
   <div ng-app="" ng-init="quantity=12;price=5">
   
   
   
    
   
   
   
     ： {{ quantity * price }}
   
   
   
    
   
   
   
   </div>

2.2.出力先の例は以下の通りです.


  
  
  
  
   
   
   
   <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
   
   
   
    
   
   
   
      ： {{ names[0] }}
   
   
   
    
   
   
   
   </div>

の後に、私達はまた別のデーターバインディングの方法を学びます.
コマンド:ng-model
AnglarJSでは、ng-modelコマンドを使用するだけで、アプリケーションデータをHTML要素にバインドし、modelとviewの双方向バインディングを実現することができます.
以下の例では、データは、ng−model命令を使用してバインディングされる.


  
  
  
  
   
   
   
   <div ng-app="">
   
   
   
    
   
   
   
         ：<input type="text" ng-model="name" />
   
   
   
    
   
   
   
        ： {{ name }}
   
   
   
    
   
   
   
   </div>

n-modelは関連する処理イベントを指定のラベルに結び付けます.そうすると、私達はハンドメイドで関連するイベント(例えば、changeなど)を処理しないで、データに対するデモンストレーションを完成することができます.上記では、ng-modelの一方向バインディング(view->model)の後のコントローラを紹介しました.私たちはその双方向バインディング機能を使います.
コマンド:ng-bind
コマンドng-bindとAnglarJS表現{}は異曲同工法の妙があるが、違いはng-bindがanglar解析でレンダリングした後にデータを表示することにある.
以下のように、ng-bindコマンドを使用してアプリケーションデータをバインドします.


  
  
  
  
   
   
   
   <div ng-app="">
   
   
   
           ：<input type="text" ng-model="name" />
   
   
   
    Hello <span ng-bind="name"></span>
   
   
   
   </div>

PS:括弧文法を使う時、ブラウザはまずページをロードして、それをレンダリングする必要があるので、AnglarJSはそれをあなたが見たい内容に解析することができます.だから、最初のページのデータバインディング操作に対して、レンダリングされていないテンプレートがユーザーに見られないようにすることを提案します.
コマンド:ng-click
AnglarJSにも独自のHTMLイベントコマンドがあります.例えば、ng-clickでAnglarJSクリックイベントを定義します.
ボタン、リンクなどに対しては、リンクをリンクすることができます.以下のような簡単な例があります.


  
  
  
  
   
   
   
   <div ng-app="" ng-init="click=false">
   
   
   
    <button ng-click="click= !click">  /  </button>
   
   
   
    <div ng-hide="click">
   
   
   
           ：<input type="text" ng-model="name" />
   
   
   
    Hello <span ng-bind="name"></span> 
   
   
   
    </div>
   
   
   
   </div>

PS:ng-hide="true"は、HTML要素が見えないように設定します.n-clickコマンドは、DOM要素のマウスクリックイベント(すなわちmousedown)を一つの方法に結びつけ、ブラウザがDOM要素上でマウスクリックイベントをトリガすると、Anglarは対応する方法を呼び出す.
MVVM概要
クライアントアプリケーションに対してAnglarJSを開発し、従来のMVC基本原則を吸収しました.MVC(Model-View-Coontrol)設計モードは、異なる人に対して異なるものを意味するかもしれないが、AnglarJSは従来のMVCを実行しておらず、MVMに近い.
MVMモードはModel-View-View Modeモードの略称です.この三つの部分を通じてUI論理、提示論理、状態制御、データと業務ロジックの分離を実現します.
ModelはView Modelと対話して、Modelの変化をモニターします.これらはViewで送信したりレンダリングしたりできます.HTMLであなたのコードを示します.Viewは$routeProviderオブジェクトを介して支配することができますので、あなたのViewとControllerを深いリンクして組織することができます.彼らをナビゲーションURLにします.AngulalrJSは無状態のControllerを同時に提供し、$scopeオブジェクトを初期化および制御するために使用することができる.
ModelはMVCモードと同様に、アプリケーションの業務ロジックに関するデータをカプセル化し、データを処理する方法に用いられます.データに直接アクセスする権利を持っています.例えば、データベースへのアクセスは、ModelはViewやView Modelに依存しません.つまり、モデルはどのように表示されるか、またはどのように操作されるかに関心がなく、モデルもいかなるユーザーが使用するインタフェース関連のロジックを含んでいません.
View Modelは特別なデータと方法を提供して指定されたviewのオブジェクトを維持するために使用されます.View Modelは$scopeのオブジェクトで、AnguraJSのアプリケーションにのみ存在します.scopeは単純なjsオブジェクトです.このオブジェクトは簡単なAPIを使用して、放送状態の変化を検出します.
Controllerは動作を制御するために初期状態とパラメータ化$scope方法を設定する責任があります.指摘されているcontrollerは保存状態もリモートサービスとは連動しない.
ViewはAnglarJS解析後にレンダリングとバインディング後に生成されたHTMLです.この部分はウェブアプリケーションのアーキテクチャを作成するのに役立ちます.scopeはデータに対する参考を持っています.controller定義挙動、view処理レイアウトとインタラクティブです.
MVVMモードを使うといくつかのメリットがありますか?
1.低結合:ViewはModelの変化と修正に独立しています.View Modelは異なるViewに結び付けられます.Viewが変化するとModelは変化しません.Modelが変化するとViewも変わりません.

の再利用可能性:ビューの論理のいくつかをView Modelの中に置くことができ、多くのViewがこのビュー論理を再利用することができます.

独立開発:開発者は業務ロジックとデータの開発に専念できる.設計者はインタフェース(View)の設計に専念できる.

テスト可能性:View Modelに対してインターフェース(View)をテストすることができます.

文字列脱重C言語実現