原版地址：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. Mysql远程连接配置

    Mysql远程连接配置 环境:unbuntu 16.04 最新版本的Mysql在远程连接的配置上与老版本有了一些出入,照原先的配置已经不行了,所以在这里记录一下遇到的所有新问题. 配置远程连接的步骤如 ...

  2. wordpress编辑器选择ckeditor、ckfinder

    CKEditor for WordPress 搜索安装 上传功能需要ckfinder 下载 CKFinder for PHP: http://ckfinder.com/download 上传ckfin ...

  3. Android OpenGL教程-第四课【转】

    第四课 旋转: 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转. 我们增加两个变量来控制这两个对象的旋转.这两个变量加在程序的开始处其他变量的后面.它们是浮 ...

  4. windows 下配置ndk环境，无需cygwin

    时隔好久要用ndk编译jni库,本以为配制安装cygwin环境,便按部就班的下载安装,但是公司的网速真的不给力,三天安装了三四次都没有安装成功(我选择的是在线安装),于是我便开始查ndk的官网看看,发 ...

  5. jquery.edatagrid（可编辑datagrid）的使用

    用spring+springmvc+mybatis+mysql实现简单的可编辑单元格,首先是页面效果图: 其中,“编号”列是不可编辑的,“暂缓措施”是可以自由编辑的,主要html组成: <%@ ...

  6. 一、快速构建Springboot应用

    1.基本概念 Spring的出现对于企业级应用来说是一个福音,它让企业级应用开发更加地简单.但是随着Spring的不断发展,它也慢慢变得越来越重.即使apache出品的maven工具能够使得项目创建. ...

  7. IDEA 2017的插件mybatis plugin（绿色免安装）

    https://blog.csdn.net/u014365133/article/details/78885189 插件下载 https://files.cnblogs.com/files/techl ...

  8. Chrome 声音自动播放抱错问题【play() failed】

    Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document firs ...

  9. 模块—— 序列化模块、random模块、os模块 、 sys模块、hashlib模块、collections模块

    今天我们来说说Python中的模块: 第三方模块 可以下载/安装/使用 第一步:将pip.exe 所在的目录添加到环境变量中第二步:输入pip第三步:pip install 要安装的模块名称  #pi ...

  10. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...