AngularJs  Understanding Angular Templates

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

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

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

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

　　下面的代码片段，展示了一个简单的angular template，它由标准的HTML标签以及angular directive、花括号绑定的expression（{{expression}}，https://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)

相关推荐

  • SpringBoot中关于static和templates的注意事项以及webjars的配置

    SpringBoot中关于static和templates的注意事项以及webjars的配置

    1. 默认情况下, 网页存放于static目录下, 默认的"/"指向的是~/resouces/static/index.html文 2. 如果引入了thymeleaf, 则默认指向的地址为~/resouces/templates/index.html <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymel

  • 深入浅析springboot中static和templates区别

    静态页面的return默认是跳转到/static/目录下,当在pom.xml中引入了thymeleaf组件,动态跳转会覆盖默认的静态跳转,默认就会跳转到/templates/下,注意看两者return代码也有区别,动态没有html后缀. 1.1 在static下新建hello1.html 运行程序,浏览器输入http://localhost:8080/hello1.html so,可以在根目录下访问hello1.html,static目录类似于传统Java web中的webroot或webcon

  • Springboot读取templates文件html代码实例

    SpringBoot里面没有我们之前常规web开发的WebContent(WebApp),它只有src目录 在src/main/resources下面有两个文件夹,static和templates springboot默认 static中放静态页面,而templates中放动态页面 在不使用第三方jar包的情况下, Springboot不能直接访问templates下的静态页面, 需要加其他jar包依赖. 代码如下 import org.slf4j.Logger; import org.slf4

  • SpringBoot用JdbcTemplates访问Mysql实例代码

    本文介绍springboot通过jdbc访问关系型MySQL,通过spring的JdbcTemplate去访问. 准备工作 jdk 1.8 maven 3.0 idea mysql 初始化mysql: -- create table `account` DROP TABLE `account` IF EXISTS CREATE TABLE `account` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL,

  • 详解Python的Django框架中的templates设置

    TEMPLATES Django 1.8的新特性 一个列表,包含所有在Django中使用的模板引擎的设置.列表中的每一项都是一个字典,包含某个引擎的选项. 以下是一个简单的设定,告诉Django模板引擎从已安装的应用程序(installed applications)的templates子目录中读取模板: TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'APP_DIRS': True,

  • Blitz templates 最快的PHP模板引擎

    Blitz templates 最快的PHP模板引擎

    简介:Blitz templates 是一个用C语言开发的快速的PHP模板引擎,它是作为一个PHP的扩展功能.它开始作为一个php_templates更换,但发展到更多的工作.它是基于可扩展的模板控制器(自定义视图类在PHP )和简单的逻辑 .基准测试表明,这是最快的一个PHP的模板引擎,使Web应用程序更接近于一个聪明的MVC 结构模型,最大从您的代码分离出HTML. 这是专为大高负荷的有许多复杂的演示文稿的逻辑的互联网项目. 下图是几个模板的性能测试结果: 示例模板代码:index.html

  • asp.net使用jquery模板引擎jtemplates呈现表格

    在Asp.net MVC 中,使得我们能够更加自由控制我们所想显示HTML.通常情况下,都要做一下数据列表.那么我们可以手动去拼一个表格出来,但这样有时对于复杂的表格说,那就JS代码比较复杂了.我们可以借助JS下的模板引擎,来实现这一功能.下面要介绍就是JTemplates,它也是基于Jquery的. 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!D

  • Springboot访问templates html页面过程详解

    springboot项目默认是不允许直接访问templates下的文件的,是受保护的. 如果要访问templates下的文件,推荐使用thymeleaf. 注:使用thymeleaf这一点要牢牢记住! 如何使用: 1.pom依赖 <!--thymeleaf 模板依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter

  • 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()是非递归的,也就是说:如果扩展的属性中有对象,那么二者同时引用同一

随机推荐