AngularJSは、Googleが開発したハイエンドのフロントエンドMVC開発フレームワークです。
Angularjs公式ウェブサイト：https：//angularjs.org/公式ウェブサイトにはデモがあり、FQにアクセスする必要がある場合があります
Angularjs中国のコミュニティ：http：//www.angularjs.cn/初心者に適しています
参照ファイル：https：//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Angularを使用する場合のメモ
Angularjsライブラリを引用：https：//github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 ....このセクションの例のgithubにダウンロードできます。
使用している領域または直接ng-app（グローバル）にng-app = "appname"を追加する必要があります。
コントローラーng-controller = "ctrl"を設定します。
例をテストするときは、次のポイントに注意してください
頭の前にAngularJSコードを導入する必要があります。著者はAngular-1.0.1.min.jsを使用しています。バージョンの違いに注意してください。
すべての小さな例は次の領域で実行されます。アクティブな領域にNG-APPを追加することを忘れないでください。
以下は、AngularJSのデフォルトの一般的な指示と使用法を説明するためのいくつかの小さなケースです。
HelloWorldプログラム（デュアルデータバインディング）
ng-model = {{name}}を使用してデータをバインドします
コードコピーは次のとおりです。
<ラベル= "name"> name：</label>
<入力型= "text" ng-model = "name" id = "name"/>
<hr>
こんにちは：{{name || 'liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
イベントバインディング使用の小さなケース
コードコピーは次のとおりです。
<div>
単位価格：<入力タイプ= "番号" min = 0 ng-model = "rish" ng-init = "rice = 299">
数量：<入力型= "number" min = 0 ng-model = "quanty" ng-init = "数量= 1">
<br>
合計価格：{{（価格） *（数量）}}
<dt>
<DL>注：</dl>
<dd> html5を含む入力：<a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_input_type.asp.asp.asp.asp.asp.asp.asp.asp.asp
<dd> ng-init：初期値を設定</dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
ng-init：属性値はデフォルトで指定できます
コードコピーは次のとおりです。
<p ng-init = "value = 'hello world'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
ng-repeat：JSの情報のためにIに類似したデータを反復するために使用
コードコピーは次のとおりです。
<div ng-init = "friends = [{name： 'jhon'、age：25}、{name： 'mary'、age：28}]"> </div>
<p>私は{{friends.length}}の友達を持っています。それらは</p>です
<ul>
<li ng-repeat = "friend in friends">
[{{$ index+1}}]：{{friend.name}} age is：{{friend.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
ng-click：domクリックイベント
コードコピーは次のとおりです。
<div ng-controller = "ctrl">
<button ng-dblclick = 'showmsg（）'> {{a}} </button>
</div>
<スクリプト>
関数ctrl（$ scope）{
$ scope.a = 'hello';
$ scope.showmsg = function（）{
$ scope.a = 'world';
}
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ng-click.html
ng-show：要素表示を設定します
注：ng-show = "！xx"：属性値の前に追加！それは、追加されていない場合は必ず表示することを意味します！不確かな場合は表示されません
コードコピーは次のとおりです。
<div ng-show = "！show">
ng-show = "！show"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
ng-hide：要素の隠れを設定します
コードコピーは次のとおりです。
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "！aaa">
ng-show = "！aaa"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
NG-Showを使用して、トグルエフェクトを作成します
コードコピーは次のとおりです。
<h2>トグル</h2>
<a href ng-click = "showlog =！showlog"> show logo </a>
<div ng-show = "showlog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
NGスタイル：デフォルトスタイルに似ています
執筆形式はこちら：文字列を引用符に含める必要があります
コードコピーは次のとおりです。
<div ng-style = "{width：100+'px'、height：200+'px'、backgroundcolor： 'red'}">
箱
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-style.html
フィルター：フィルターフィールド
コードコピーは次のとおりです。
<div> {{9999 | number}} </div> <！ - 9,999->
<div> {{9999+1 |番号：2}} </div> <！ - 10,000.00->
<div> {{9*9 |通貨}} </div> <！ - $ 81.00->
<div> {{'hello world' |大文字}} </div> <！ - hello world->
http://2.liteng.sinaapp.com/angularjstest/filter.html
ng-template：テンプレートをロードできます
コードコピーは次のとおりです。
<div ng-include = "'tpl.html'"> </div>
tpl.html
コードコピーは次のとおりです。
<h1>こんにちは</h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ http：ajaxと同様の方法は非常にうまく機能します
コードコピーは次のとおりです。
<div ng-controller = "testctrl">
<h2> http request-method 1 </h2>
<ul>
<li ng-repeat = "x in names">
{{x.name}}+{{x.country}}}
</li>
</ul>
</div>
<h2>方法2 </h2>
<div ng-controller = "testctrl2">
<ul>
<li ng-repeat = "y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<スクリプト>
//方法1
var testctrl = function（$ scope、$ http）{
var p = $ http（{
方法：「取得」、
url： 'json/date.json'
}）;
p.success（function（response、status、headers、config）{
$ scope.names = response;
}）;
p.error（function（status）{
console.log（status）;
}）;
}
//方法2
関数testctrl2（$ scope、$ http）{
$ http.get（ 'json/yiqi_article.json'）。success（function（response）{
$ scope.info = response;
}）;
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
上記のすべてのコード：https：//github.com/litengdesign/angularjstest
実装されたデモ：http：//2.liteng.sinaapp.com/angularjstest/index.html
Angularjsのルーターと指令については、次回は別々に取り出します。