原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model

  angular template是一个声明规范,与model、controller的信息一起,渲染成用户在浏览器中所看到的视图。它是静态的DOM,包括HTML、CSS、angular特别的元素和angular指定的元素属性。angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM。

  下面是我们可以在template中使用的angular元素已经元素属性的类型:

  • Directive(http://www.cnblogs.com/lcllao/archive/2012/09/09/2677190.html) - 一个扩展现有DOM元素或者代表一个可复用的DOM组件的属性或者元素,即控件。
  • Markup(http://code.angularjs.org/1.0.2/docs/api/ng.$interpolate) - 通过双大括号表示法{{}}来绑定表达式到元素中,是内建的angular标记。
  • Filter(http://code.angularjs.org/1.0.2/docs/guide/dev_guide.templates.filters)- 用于格式化我们给用户看的数据。
  • Form controls (http://www.cnblogs.com/lcllao/archive/2012/09/17/2688127.html)- 让我们验证用户输入。

  注意:除了可以在模版中声明上面的元素以外,我们也可以在javascript代码中访问这些元素。

  下面的代码片段,展示了一个简单的angular template,它由标准的HTML标签以及angular directive、花括号绑定的expression({{expression}},http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html)组成。

 
<!DOCTYPE html>
<!--ng-app,定义应用范围,在这里创建root scop-->
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>template</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<!--
ng-cloak,在编译后会去掉的class
ng-controller,一个directive,用于指定当前的模版对应的Controller为MyController
-->
<body class="ng-cloak" ng-controller="MyController"> <!--
ng-model,directive,用于指定input的值对应的model为foo。
-->
<input type="text" ng-model="foo" value=""/>
<!--
ng-click,directive,单击后需要做的事情,可以是expression,如 buttonText = '1';
也可以是调用函数,如下面所示。
{{buttonText}},用于展示当前scope链中能够或得到的buttonText的值
-->
<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 = "默认的东东";//初始化model buttonText
$scope.foo = "修改我吧";//初始化model foo
$scope.changeFoo = function() {//声明changeFoo
this.buttonText = this.foo;//将foo的值赋给buttonText
//这里使用的this,就是指向当前$scope的。
};
}
</script>
</body>
</html>
 

  在一个简单的单页应用中,模版由HTML、CSS以及angular directive组成,都包含在一个HTML文件中(通常叫它index.html)。但在一些更加复杂的应用中,我们可以在一个页面中,通过使用“partials”来显示多个视图,即将模版分段存放在独立的HTML文件中。我们可以在主页面中使用$route服务(http://code.angularjs.org/1.0.2/docs/api/ng.$route)与ngView directive(http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngView)来协同“include”那些partials。这个技术的一个例子,展示在angular tutorial(http://code.angularjs.org/1.0.2/docs/tutorial/index)的第七、八步骤中。(这部分我稍后再玩-_-!)

  1. AngularJs学习笔记--bootstrap
  2. AngularJs学习笔记--html compiler
  3. AngularJs学习笔记--concepts
  4. AngularJs学习笔记--directive
  5. AngularJs学习笔记--expression
  6. AngularJs学习笔记--Forms
  7. AngularJs学习笔记--I18n/L10n
  8. AngularJs学习笔记--IE Compatibility
  9. AngularJs学习笔记--Modules
  10. AngularJs学习笔记--Scope
  11. AngularJs学习笔记--Dependency Injection
  12. AngularJs学习笔记--Understanding the Model Component
  13. AngularJs学习笔记--Understanding the Controller Component
  14. AngularJs学习笔记--E2E Testing
  15. AngularJs学习笔记--Understanding Angular Templates
  16. AngularJs学习笔记--Using $location
  17. AngularJs学习笔记--Creating Services
  18. AngularJs学习笔记--Injecting Services Into Controllers
  19. AngularJs学习笔记--Managing Service Dependencies
  20. AngularJs学习笔记--unit-testing

AngularJs学习笔记--Understanding Angular Templates的更多相关文章

  1. AngularJs学习笔记--Understanding the Model Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...

  2. AngularJs学习笔记--Understanding the Controller Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  7. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

随机推荐

  1. 移动前端 HTML5 head

    移动前端不得不了解的HTML5 head 头标签(2016最新版) 发表于 2016年10月20日 by 愚人码头 被浏览 875 次 小编推荐:掘金是一个高质量的技术社区,从 ECMAScript ...

  2. javah找不到类文件

    这样即可,在src目录下寻找类,类要写全,即包名.类名

  3. Mybatis JdbcType与Oracle、MySql数据类型对应列表

    1. Mybatis JdbcType与Oracle.MySql数据类型对应列表 Mybatis JdbcType Oracle MySql JdbcType ARRAY     JdbcType B ...

  4. 1.Windows服务-->添加一个简单的服务

    Windows服务应用程序是一种需要长期运行的应用程序,它对于服务器环境特别适合.它没有用户界面,并且也不会产生任何可视输出.任何用户消息都会被 写进Windows事件日志.计算机启动时,服务会自动开 ...

  5. golang学习之奇葩的time format

    golang格式化时间时,比如如下格式进行格式化输出: fmt.Println(time.Now().Format("2007年03月")) 程序直接输出: 16007年02月 很 ...

  6. 01.MD5加密

    namespace _01.MD5加密 { class Program { static void Main(string[] args) { //MD5加密就是给想要的密码或者其它字符加密 //如果 ...

  7. [android] 练习PopupWindow实现对话框

    练习使用Dialog实习对话框 package com.example.tsh; import android.app.Activity; import android.app.Dialog; imp ...

  8. Java 方法重载和多态

    先来看看什么是方法重载? 方法重载的要求是:方法名相同,参数列表不同(不同的参数类型或者参数顺序或者参数个数).至于方法的其他部分,如方法返回值类型和修饰符,与方法重载没有任何关系.最好加上@Over ...

  9. poj 1155 树形背包

    http://blog.csdn.net/libin56842/article/details/9908199 树形背包: 首先是建树,每个结构体为一个节点,包括下一个点序号,值,和next. tre ...

  10. zookeeper学习实践1-实现分布式锁

    引言 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提 ...