AngularJs学习笔记--Understanding Angular Templates
原版地址：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）的第七、八步骤中。（这部分我稍后再玩-_-!）
- AngularJs学习笔记--bootstrap
- AngularJs学习笔记--html compiler
- AngularJs学习笔记--concepts
- AngularJs学习笔记--directive
- AngularJs学习笔记--expression
- AngularJs学习笔记--Forms
- AngularJs学习笔记--I18n/L10n
- AngularJs学习笔记--IE Compatibility
- AngularJs学习笔记--Modules
- AngularJs学习笔记--Scope
- AngularJs学习笔记--Dependency Injection
- AngularJs学习笔记--Understanding the Model Component
- AngularJs学习笔记--Understanding the Controller Component
- AngularJs学习笔记--E2E Testing
- AngularJs学习笔记--Understanding Angular Templates
- AngularJs学习笔记--Using $location
- AngularJs学习笔记--Creating Services
- AngularJs学习笔记--Injecting Services Into Controllers
- AngularJs学习笔记--Managing Service Dependencies
- AngularJs学习笔记--unit-testing
AngularJs学习笔记--Understanding Angular Templates的更多相关文章
- AngularJs学习笔记--Understanding the Model Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...
- AngularJs学习笔记--Understanding the Controller Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
随机推荐
- ckeditor添加代码插入功能及高亮显示（插件）
Auto SyntaxHighlighter SyntaxHighlighter CKEditor Button 下载以上两个插件,启用 以下可有可无: (设置在编辑器的显示样式) ckeditor高 ...
- 第八章使用java实现面向对象-File I/O
java.io.File类用于表示文件(目录) File类只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问 RandomAccessFile java提供的对文件内容的访问,既可以 ...
- Tool Scripts
1. Function: 16进制转字符串 Create FUNCTION [dbo].[f_hextostr] (@hexstring VARCHAR(max)) RETURNS VARCHAR(m ...
- java读取txt文件，对字符串进行操作后导出txt文件
嘿嘿,代码略为简单,不再多做解释,直接上码! package org.lq.com.util; import java.io.File; import java.io.InputStreamReade ...
- 使用mpvue搭建一个初始小程序
1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安 ...
- mac下配置环境变量-mongo
一 1打开终端查看echo $PATH所有环境变量会显示2输入sudo vi ~/.bash_profile回车后输入密码,然后到达vim查看状态3输入i改为编辑态,在后面追加路径4按esc然后shi ...
- Mysql与web之间的数据、查询等个问题
Mysql与web之间的数据.查询等个问题 在自己写的一个jsp主页连接数据库出现的各种问题,写记下来与大家分享,共勉.最后附jdbc代码. ---DanlV Error 1---错误代码: java ...
- js小数乘法精确率问题
研究拓扑图百分比乘法计算,带小数位计算会出现值溢出的问题 JS里做小数的乘法运算时会出现浮点错误: 结果是251.89999999999998 而不是251.9 这个问题想必有很多人为之头痛. 那 ...
- openlayers模仿google地图--地图版权随鹰眼关闭打开而改变位置
额..题目有点长......今天有个群友问我.想实现google地图地图版权随鹰眼关闭状态改变位置的功能.就是这种<ignore_js_op> 打开鹰眼时 地图版权也随着鹰眼位置改变而改 ...
- DUANG~ 万网轻云服务器，大促狂欢，不仅仅免单！
DUANG~ 万网轻云服务器,大促狂欢,不仅仅免单! 当老板第一次知道我们要做活动的时候,其实是拒绝的.DUANG~ 打折.降价.挥泪甩卖…太俗套.客户看到一定骂我们,根本没有诚意. 所以轻云大促 ...