AngularJS 模版介绍

来源:luqidong 发布时间:2013-12-19 19:57:41 点击数:

一个angular模板是声明性指定,随着从模型和控制器的信息,变成用户看到在浏览器中呈现的视图。它是静态的DOM,包含HTML,CSS和角度的特定元素和angular度特定元素的属性。对angular元素和属性的直接角度来添加行为和变换模板的DOM到动态视图的DOM。

这些都是angular元素和元素的类型属性,你可以在模板中使用:

  • 指令 -窗口小部件-即增强现有的DOM元素或代表一个可重复使用的组件的DOM属性或元素。
  • 标记 -双花括号标记{{}}绑定表达式的元素是内置的angular标记。
  • 过滤器 -格式化您的数据显示给用户。
  • 表单控件 -可让您验证用户输入。

注:除上述声明模板中的元素,你也可以访问JavaScript代码这些元素。

下面的代码片段显示了由标准的HTML标签和angular的简单angular模板指令和大括号与绑定达式

 

  1. <html ng-app>
  2. <!-- Body tag augmented with ngController directive -->
  3. <body ng-controller="MyController">
  4. <input ng-model="foo" value="bar">
  5. <!-- Button tag with ng-click directive, and
  6. string expression 'buttonText'
  7. wrapped in "{{ }}" markup -->
  8. <button ng-click="changeFoo()">{{buttonText}}</button>
  9. <script src="angular.js">
  10. </body>
  11. </html>

在一个简单的单页应用程序,该模板由HTML,CSS和包含在短短的一个HTML文件(通常是角指令的index.html)。在更复杂的应 ​​用程序,可以显示使用“谐音”,这是样板段位于单独的HTML文件中的一个主要的页面多个视图。你“包括”用在主网页的谐音$路线与服务相结合ngView指令。这种技术的一个例子是显示在角度教程,在步骤7和8。