テンプレートとデータの基本的な動作プロセスは次のとおりです。
ユーザー要求アプリケーションの開始ページ
ユーザーのブラウザは、サーバーへのHTTP接続を開始し、テンプレートを含むindex.htmlページをロードします。
Angularはページにロードされ、ページがロードされるのを待っています。NG-APPディレクティブを探してテンプレートの境界を定義します。
角度トラバーサルテンプレート、指定された関係とバインドされた関係を見つけ、列のアクションをトリガーします：リスナーを登録し、いくつかのDOM操作を実行し、サーバーから初期化データを取得します。最後に、アプリケーションが起動され、テンプレートがDOMビューに変換されます
サーバーに接続して、ユーザーに表示する必要がある他のデータをロードする
テキストを表示します
{{{Greeting}}}などのフォーム{{}}を使用します。
最初のタイプを使用して、ユーザーが未排除ページを見ることができます。 2番目のタイプのインデックスページを使用することをお勧めし、残りのページは最初のタイプを使用できます
フォーム入力
コードコピーは次のとおりです。
<html ng-app>
<head>
<title> form </title>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<script type = "text/javascript">
function startupcontroller（$ scope）{
$ scope.funding = {startingestime：0};
Computeneeded = function（）{
$ scope.funding.needed = $ scope.funding.startingestime * 10;
};
$ scope。$ watch（ 'funding.startingestime'、computeneeded）; //ウォッチモデルの変更
}
</script>
</head>
<body>
<form ng-controller = "StartupController">
開始：<入力ng-change = "Computeneeded（）" ng-model = "fund.startingimate"> //変更時に関数を呼び出します
推奨事項：{{Fundind.Needed}}
</form>
</body>
</html>
場合によっては、変更があるときにすぐに動きをしたくありませんが、待たなければなりません。例えば：
コードコピーは次のとおりです。
<html ng-app>
<head>
<title> form </title>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<script type = "text/javascript">
function startupcontroller（$ scope）{
$ scope.funding = {startingestime：0};
Computeneeded = function（）{
$ scope.funding.needed = $ scope.funding.startingestime * 10;
};
$ scope。$ watch（ 'funding.startingestime'、computeneeded）; //監視式を監視し、この式が変化すると、コールバック関数が呼び出されます
$ scope.requestFunding = function（）{
window.alert（「申し訳ありませんが、より多くの顧客を最初に取得してください。」）
};
}
</script>
</head>
<body>
<form ng-submit = "requestfunding（）" ng-controller = "startupcontroller"> // ng-submit
開始：<入力ng-change = "Computeneeded（）" ng-model = "funding.startingestime">
推奨事項：{{Fundind.Needed}}
<ボタン>私のスタートアップに資金を提供します！</button>
</form>
</body>
</html>
非型の提出相互作用、例としてクリックしてください
コードコピーは次のとおりです。
<html ng-app>
<head>
<title> form </title>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<script type = "text/javascript">
function startupcontroller（$ scope）{
$ scope.funding = {startingestime：0};
Computeneeded = function（）{
$ scope.funding.needed = $ scope.funding.startingestime * 10;
};
$ scope。$ watch（ 'funding.startingestime'、computeneeded）;
$ scope.requestFunding = function（）{
window.alert（「申し訳ありませんが、より多くの顧客を最初に取得してください。」）
};
$ scope.reset = function（）{
$ scope.funding.startingestime = 0;
};
}
</script>
</head>
<body>
<form ng-controller = "StartupController">
開始：<入力ng-change = "Computeneeded（）" ng-model = "funding.startingestime">
推奨事項：{{Fundind.Needed}}
<button ng-click = "requestfunding（）">私の起動に資金を提供！</button>
<button ng-click = "reset（）"> reset </button>
</form>
</body>
</html>
リスト、テーブル、およびその他の反復要素
Ng-Reepeatは、$ INDEXから現在参照されている要素番号を返します。サンプルコードは次のとおりです。
コードコピーは次のとおりです。
<html ng-app>
<head>
<title> form </title>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<script type = "text/javascript">
var husthen = [{name： 'mary'、score：10}、{name： 'jerry'、score：20}、{name： 'jack'、score：30}]
関数StudentListController（$ scope）{
$ scope.students = desustor;
}
</script>
</head>
<body>
<表ng-controller = "StudentListController">
<tr ng-repeat = '学生の学生'>
<td> {{$ index+1}} </td>
<td> {{sustent.name}} </td>
<td> {{sustent.score}} </td>
</tr>
</table>
</body>
</html>
隠れて見せます
NG-ShowおよびNg-Hide関数は同等ですが、操作効果はまったく逆です。
コードコピーは次のとおりです。
<html ng-app>
<head>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<スクリプト>
関数DeathRaymenucontroller（$ scope）{
$ scope.menustate = {show：false}; // menustate.show = falseに変更した場合、効果は表示されません。将来、変数を{}に入れます
$ scope.togglemenu = function（）{
$ scope.menustate.show =！$ scope.menustate.show;
};
}
</script>
</head>
<body>
<div ng-controller = 'deathraymenucontroller'>
<button ng-click = 'togglemenu（）'>トグルメニュー</button>
<ul ng-show = 'menustate.show'>
<li ng-click = 'stun（）'> stun </li>
<li ng-click = 'Disintegrate（）'> Disintegrate </li>
<li ng-click = 'erase（）'>歴史から消去</li>
</ul>
</div>
</body>
</html>
CSSクラスとスタイル
NGクラスとNGスタイルの両方が式を受け入れることができ、式の実行の結果は次の値の1つである可能性があります。
スペースで区切られたCSSクラス名を表す文字列
CSSクラス名配列
CSSクラス名のマッピングブール値へ
コードの例は次のとおりです。
コードコピーは次のとおりです。
<html ng-app>
<head>
<style type = "text/css">
。エラー {
背景色：赤;
}
。警告 {
背景色：黄色。
}
</style>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<スクリプト>
function headercontroller（$ scope）{
$ scope.iserror = false;
$ scope.iswarning = false;
$ scope.showerror = function（）{
$ scope.messagetext = "error !!!"
$ scope.iserror = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function（）{
$ scope.messagetext = "警告!!!"
$ scope.iswarning = true;
$ scope.iserror = true;
}
}
</script>
</head>
<body>
<div ng-controller = "headercontroller">
<div ng-class = "{error：iserror、warning：iswarning}"> {{messageText}} </div>
<button ng-click = "showerror（）">エラー</button>
<button ng-click = "showwarning（）">警告</button>
</div>
</body>
</html>
CSSクラス名のマッピングブール値へ
サンプルコードは次のとおりです。
コードコピーは次のとおりです。
<html ng-app>
<head>
<style type = "text/css">
。選択された{
背景色：lightgreen;
}
</style>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<スクリプト>
機能レストラン（$ scope）{
$ scope.list = [{name： "The Handome"、Cuisine： "BBQ"}、{name： "green"、cuisine： "salads"}、{name： "house"、cuisine： 'seafood'}];
$ scope.selectrestaurant = function（row）{
$ scope.selectedRow = row;
}
}
</script>
</head>
<body>
<表ng-controller = "Restaurant">
<tr ng-repeat = 'restaurant in list' ng-click = 'selectrestaurant（$ index）' ng-class = '{selected：$ index == selectedRow}'> // CSSクラス名のマップはブール値に。モデル属性の値がng-repeatの$ indexに等しい場合、selectdスタイルはその行に設定されます
<td> {{restaurant.name}} </td>
<td> {{restaurant.cuisine}} </td>
</tr>
</table>
</body>
</html>