angular.js-1初認識

初対面AngularJS
AngularJSは、HTMLの構築ページでの不足を克服するために、新しい属性と式によってHTMLを拡張した(AngularJSは命令によってHTMLを拡張し、式によってデータをHTMLにバインドした).
1.四つの核心思想:依存注入、モジュール化、双方向バインド、意味化ラベル
2.利点:コードを簡略化し、開発を加速し、jQueryのように複雑なDOMコードを操作することなく、データモデルを変えるだけでよい.
AngularJS命令はngを接頭辞とするHTML属性である.
 
1、ng-app=""命令angularJSの使用範囲を定義し、angularJS管理境界を宣言する
2、ng-model=「変数」定義変数名;
3.AngularJS式は括弧で囲まれています:{{expression}}式はHTMLにデータをバインドし、式が書かれた場所でデータを「出力」します.式には、文字、演算子、変数などを含めることができます.
4.AngularJSモジュール(Module)は、AngularJSアプリケーションを定義します.ng-app命令で応用を示す
定義方法:angular.module('自己命名',[]);
5.AngularJSコントローラ(Controller)AngularJSアプリケーションを制御する.ng-controllerでコントローラを指定します.
制御方法:.コントローラ('コントローラ名',function($scope){$scope.変数="値";});$scopeアプリケーションが指すHTML要素

{{item}}
削除


<span style="color: #0000ff;">var</span> ap = angular.module('todolist',[]);<span style="color: #008000;">//</span><span style="color: #008000;">jsでtodolistを宣言するにはangularを使用します.module</span>
ap.controller('TaskCtrl',<span style="color: #0000ff;">function</span>($scope){<span style="color: #008000;">//</span><span style="color: #008000;">angularJSの内容を制御し、コントローラを使用する必要がある.コントローラ、コントローラの名前はTaskCtrlで、HTMLでバインドする必要があります</span>
<span style="color: #008000;">//</span><span style="color: #008000;">変数$scope</span>
$scope.task="";<span style="color: #008000;">//</span><span style="color: #008000;">ng-model=「task」を使用します.ng-model命令は、入力ドメインの値などの要素値をアプリケーション</にバインドする.span>
$scope.tasks=[];<span style="color: #008000;">//</span><span style="color: #008000;">ng-repeat="item in tasks"</span>
$scope.add=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
$scope.tasks.push($scope.task);</span><span style="color: #008000;">//</span><span style="color: #008000;">taskの内容をtasks配列に追加し、js配列に同じ内容を追加することは許されず、track by$indexで下付きで解決</span>
<span style="color: #000000;"> }
})
</span>
この例ではanjularjsを用いてtodolistを簡単に実現し,削除機能を追加する.
使用するコマンド:ng-app、アプリケーションのルート要素を定義する
ng-controller、適用するコントローラオブジェクトを定義する
ng-model、HTMLコントローラの値をアプリケーションデータにバインドする
ng-repeat,ng-repeat=「expression」コマンドは、指定した回数のHTML要素を循環出力するために使用されます.集合は配列またはオブジェクトでなければなりません.expression式は、配列の下に示すように、集合を循環する方法を定義します.
ng-if,ng-ifは、DOMから要素を除去するng-hideとは異なる
ng-hide、HTML要素を非表示または表示
ng-click,要素がクリックされたときの動作を定義する