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 相关文章推荐
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
VueJS全面解析
Nov 10 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
python实现计算倒数的方法
2015/07/11 Python
代码分析Python地图坐标转换
2018/02/08 Python
python爬取网易云音乐评论
2018/11/16 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
小学学雷锋活动总结
2014/04/25 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
死者家属慰问信
2015/03/24 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL