テンプレートとデータの基本的な動作プロセスは次のとおりです。
ユーザー要求アプリケーションの開始ページ
ユーザーのブラウザは、サーバーへの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>