AngularJs  Understanding Angular Templates


Posted in Javascript onSeptember 02, 2016

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

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

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

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

下面的代码片段,展示了一个简单的angular template,它由标准的HTML标签以及angular directive、花括号绑定的expression({{expression}},https://3water.com/article/91742.htm)组成。

<!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 Understanding Angular Templates的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 #Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 #Javascript
AngularJs  E2E Testing 详解
Sep 02 #Javascript
解决node.js安装包失败的几种方法
Sep 02 #Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 #Javascript
AngularJs Understanding the Controller Component
Sep 02 #Javascript
JS 拼凑字符串的简单实例
Sep 02 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
用js实现in_array的方法
2013/11/05 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
python实现斗地主分牌洗牌
2020/06/22 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
质量标语大全
2014/06/12 职场文书
机电专业求职信
2014/06/14 职场文书
生日赠语
2015/06/23 职场文书