AngularJs Understanding Angular Templates

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

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

  1. Directive（http://www.jb51.net/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 （http://www.jb51.net/article/91744.htm）- 让我们验证用户输入。

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

　　下面的代码片段，展示了一个简单的angular template，它由标准的HTML标签以及angular directive、花括号绑定的expression（{{expression}}，http://www.jb51.net/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的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • AngularJS延迟加载html template

    当使用AngularJs中的routes/views模式建立大型网站或者应用的时候,把所有的自定义文件,如controllers和template等在初始化时全部加载进来,不是一个好的办法.最好的方式是,初始化时仅仅加载所需要的文件.这些文件可能会依赖一个连接或者多个文件,然而它们仅仅被特定的route所使用.当我们切换route时,未被加载的文件将会按需加载.这不但能提高初始化页面的速度,而且可以防止带宽浪费. 网上大部分文章都在讲通过$routeProvider以及第三方服务对control

  • Angular.JS中的指令引用template与指令当做属性详解

    Angular.JS中的指令引用template与指令当做属性详解

    一.引用template 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 指令要生效,那么html头里面要 <html lang="en" ng-app="app"> 制定ng-app的值和定义指令的module名字一致: angular.module('app',[]) 指令的完整参数: angular.module('myApp', []) .directive('myDirective', function

  • AngularJS ng-bind-template 指令详解

    AngularJS ng-bind-template 指令 AngularJS 实例 <p> 元素上绑定两个表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • AngularJS ng-template寄宿方式用法分析

    本文实例讲述了AngularJS ng-template寄宿方式用法.分享给大家供大家参考,具体如下: 如果你是一个angular的开发者的话,对于ng-html2js你应该 很熟悉.对于angular的指令,我们经常需要定义模板( directive template/templateUrl),你可以选择讲html page 放在真正的的web容器中寄宿,也可以选择angular的ng-template 放在view的page之上,抑或也可以讲html打成一个js文件和directive 的j

  • 浅谈AngularJs指令之scope属性详解

    AngularJS使用directive()方法类定义一个指令: .directive("name",function(){ return{ }; }) 上面是定义一个指令的主体框架,该方法接受两个参数: 1.第一个参数:name表示定义的指令的名称(angularjs会用这个name注册这个指令) 2.第二个参数:函数,该番薯必须返回一个对象或者一个函数,但通常我们会返回一个对象.return后接的就是返回的对象. 在返回的对象中有一个scope属性,这个属性用来修饰指令的作用域.

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

  • angularJs关于指令的一些冷门属性详解

    angularJs关于指令的一些冷门属性详解

    我们使用ng的时候,经常会使用到指令,大家所熟知的属性我在这里就不介绍了,讲讲大家没怎么留意的属性 1.multiElement 这是指定指令作用区间的功能,最常用的就是ng-repeat-start和ng-repeat-end了. 2.priority 指令优先级,优先级越高,指令越早执行. 3.terminal 是否允许优先级低的指令起作用,如果是true,那么只有比当前指令或跟当前指令等级相同的指令才可以执行.最典型的就是ngIf 4.templateNamespace 声明模板的格式有三

  • AngularJs Understanding Angular Templates

    angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在template中使用的angular元素已经元素属性的类型: Directive(http://www.jb51.net/article/91739.

  • AngularJs  Understanding Angular Templates

    angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在template中使用的angular元素已经元素属性的类型: Directive(https://www.jb51.net/article/91739

  • AngularJs Understanding the Controller Component

    在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope(http://www.jb51.net/article/91749.htm)的实例.当我们或者angular通过scope.$new API(http://docs.angularjs.org/api/ng.$rootScope.Scope#$new)创建新的child scope时,有一个选项作为方法的参数传入controller

  • AngularJs Understanding the Model Component

    AngularJs Understanding the Model Component

    在angular文档讨论的上下文中,术语"model"可以适用于单一对象代表一个实体(例如,一个叫" phones"的model,它的值是一个电话数组.)或者作为应用的全部数据Model(所有实体). 在angular中,model可以是任意数据,可以通过angular的scope对象的属性来获取model.属性的名称是model的标识,值可以是任意javascript对象(包括数组和原始数据). javascript想成为model的唯一的条件是对象必须作为一个s

  • AngularJS使用angular.bootstrap完成模块手动加载的方法分析

    本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法.分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <head> <script src="angular.js"></script> <script> // 创建moudle1

  • AngularJS入门教程之Helloworld示例

    AngularJS入门教程之Helloworld示例

    本文实例讲述了AngularJS入门教程之Helloworld示例.分享给大家供大家参考,具体如下: 什么是AngularJs? angularjs是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了.这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合. AngularJS简单的Helloworld例子: <!D

  • AngularJS 模块详解及简单实例

    AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> "m

  • AngularJS入门教程（零）：引导程序

    我们现在开始准备编写AngularJS应用--phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: 复制代码 代码如下: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: 复制代码 代码

  • AngularJS入门教程引导程序

    AngularJS入门教程引导程序

    我们现在开始准备编写AngularJS应用--phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: node scripts/web-s

  • angular.extend方法的具体使用

    angular.extend方法的具体使用

    AngularJs的angular.extend()方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中,使得这个对象拥有其他对象相同的方法和属性,如下图所示. angular.extends()方法的第一个参数是要被扩展的对象,后面可以传入一个或多个对象. 如果想要保存一个对象的状态,除了可以调用angular.copy()方法外,还可以把一个空对象{}作为第一个对象传入. 但要注意的是,angular.extends()是非递归的,也就是说:如果扩展的属性中有对象,那么二者同时引用同一

随机推荐