Angularテンプレートは、ユーザーがブラウザーでモデルとコントローラーの情報と一緒に表示するビューにレンダリングされる宣言仕様です。これは、HTML、CSS、角度特別要素、角度指定要素属性を含む静的なDOMです。角度要素と属性は、動作を拡張し、テンプレートDOMを動的ビューDOMに変換するための角度を示します。
これは、テンプレートで使用できる既に属性の角度要素のタイプです。
注:テンプレート内の上記の要素を宣言することに加えて、JavaScriptコードのこれらの要素にもアクセスすることもできます。
次のコードスニペットには、標準のHTMLタグと角度指示、ブレースバウンド式({{expression}}、//www.vevb.com/article/91742.htm)で構成される単純な角度テンプレートが表示されます。
<!doctype html> <! - ng-app、アプリケーションスコープを定義し、ルートscopを作成します - > <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title>テンプレート</title> <meta content = 1 "IE = 1エッジ= 1 http-equiv = "x-ua-compatible"> <style type = "text/css"> .ng-cloak {display:none; } </style> </head> <! - ng-cloak、現在のテンプレートの対応するコントローラーがMyControllerであることを指定するために使用される指令であるコンピレーションNG-Controllerの後に削除されるクラス - > <body ng-controller = "myController"> <! - ng-modelは、対応モデルの指定を指定するために使用されます。 - > <入力型= "text" ng-model = "foo" value = ""/> <! - ng-click、directive、[buttontext = '1'など]などの[buttontext = '1'など]の式になる可能性があります。または、以下に示すように、呼び出し関数にすることができます。 {{buttonText}}, used to display the value of buttonText that can be or obtained in the current scope chain--><button ng-click="changeFoo()">{{buttonText}}</button><script src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript"> function myController($ scope){$ scope.buttontext = "default futts"; //初期化モデルbuttontext $ scope.foo = "modify me"; //初期化モデルfoo $ scope.changefoo = function(){// declare changefoo this.buttontext = this.foo; }; } </script> </body> </html>単純なシングルページアプリケーションでは、テンプレートはHTML、CSS、およびAngularディレクティブで構成され、すべてHTMLファイル(通常はindex.htmlと呼ばれる)に含まれています。ただし、いくつかのより複雑なアプリケーションでは、「部分的」、つまりテンプレートセグメントを別のHTMLファイルに保存することにより、1つのページに複数のビューを表示できます。 $ Route Service(http://code.angularjs.org/1.0.2/docs/api/ng.$Route)およびngviewディレクティブ(http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngview)を使用できます。この手法の例は、Angularチュートリアルの7番目と8番目のステップ(http://code.angularjs.org/1.0.2/docs/tutorial/index)に示されています。 (後でこの部分で遊ぶ-_-!)
上記は、AngularJSの角度テンプレートを理解することに関する情報のコレクションです。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます!