声明式界面开发小时钟--进阶阶段

先看看游戏规则

<html>
<head>
	<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
</head>
<body ng-app="ezstuff">
	<ez-clock></ez-clock>
</body>
</html>

  

angular.module("ezstuff",[])
.directive("ezClock",function(){
	return {
		restrict : "E",
		template : "<div></div>",
		link : function(scope,element,attrs){
			setInterval(function(){
				var d = new Date();
				element.text(d.toString());
			},1000);
		}
	}
})

  

具体玩家分类

AngularJS最大的卖点是用静态的HTML文档,就可以定义具有动态行为的页面。

还是前面的小时钟示例,我们使用AngularJS模板来重写,示例已经嵌入在编辑器中→_→:

先看HTML文件。请使用鼠标轻击右边编辑器的HTML按钮,切换到HTML编辑器。

HTML文件看起来像普通的HTML,只是其中多了一些特别的标记(比如:ng-app,ez-clock等等)。 在Angular中,这个HTML文件被称为模板。

第一种特别的标记我们称之为指令。指令可以为HTML元素添加额外的行为(让HTML 动起来)。在这个例子中,我们使用了一个ng-app指令,这个指令用来通知Angular自动 引导应用(晚点会解释这个“引导”);我们还使用了一个自定义的ez-clock指令, 这个指令是我们自己实现的,用来产生那个小时钟。

再切换到JavaScript编辑器查看一下JavaScript代码。

JavaScript代码就是ez-clock指令的实现,我们先不深究它的写法,但请注意下,在代码中 真正干活的是setInterval(...)那个调用。

当Angular启动应用时,它会通过一个编译器解析、处理这个模板文件,生成的结果就是:视图。

运行一下,你会看到和前面章节同样的时钟:

累是一样累收获不一样

我们在模板中指定了一个自定义的标签ez-clock,而它变成了一个会动的时钟。 这中间发生了什么?

浏览器不会理解ez-clock这个标签,是脚本做了这个工作。

angular.min.js引入了基本的angularJS框架,它会在浏览器载入HTML文档并且 建立好DOM树后,执行以下操作:

  1. 找到有ng-app属性的DOM节点
  2. 以这个节点为根节点,重新解释DOM树,具体说就是子树
  3. 在解释过程中,发现ez-clock这个指令
  4. 调用ez-clock指令的实现进行展开

ez-clock的展开操作如下:

  1. 使用一个div元素替换这个自定义标签
  2. 创建一个定时器,在定时器触发时刷新div元素的innerText

ez-clock这个自定义的标签,在AngularJS中北称为指令/directive,意思是 看到这个指令,AngularJS基础框架需要对其进行解释,以便展开成浏览器可以理解 的东西(HTML元素和脚本),而这个解释的过程,有一个特定的名称:编译。

可见,要写的代码一点也不会少,只是,代码被一种新的方式重新组织了。

有什么亮点让你这么痴迷

答案是在开发过程中,便于分工与代码复用。

在小的项目中也可以应用AngularJS,这样你可以得到思维的锻炼。但是真正发生 威力,是在一个团队中,可以有专人负责实现指令(比如:ez-clock),其他人只需要 利用这些指令编写模板,这样的成本更低。

符合经济学原理,不是吗?

当然,从编写界面HTML模板的角度看,ez-clock比div更具有语义性,使模板更容易维护, 使指令的实现升级不影响模板,这也是不小的好处了。

指令算是新型的API,与我们所熟悉的对象、函数这类接口完全不同,它提供了在 静态化的HTML文件中,指定动态行为的能力。

时间: 2024-10-28 15:36:55

声明式界面开发小时钟--进阶阶段的相关文章

AngularJS应用开发思维之1:声明式界面

这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板.指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以生成具有动态行为的页面. 还是前面的小时钟示例,我们使用AngularJS模板来重写,示例已经嵌入→_→: 示例地址:http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/ HTML文件看起来像普通的HTML,只是其中多了一些特别的标记 (比如:

Spring注解驱动开发(四)-----aop、声明式事务

AOP 概念 指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式:-----基于动态代理 一个aop示例 1.导入aop模块:Spring AOP:(spring-aspects)-----导入相关jar包 2.MathCalculator-----一个业务逻辑的类-----在业务逻辑运行的时候将日志进行打印(方法之前.方法运行结束.方法出现异常,xxx) package com.atguigu.aop; public class MathCalculator { publ

Spring Cloud Eureka 分布式开发之服务注册中心、负载均衡、声明式服务调用实现

介绍 本示例主要介绍 Spring Cloud 系列中的 Eureka,使你能快速上手负载均衡.声明式服务.服务注册中心等 Eureka Server Eureka 是 Netflix 的子模块,它是一个基于 REST 的服务,用于定位服务,以实现云端中间层服务发现和故障转移. 服务注册和发现对于微服务架构而言,是非常重要的.有了服务发现和注册,只需要使用服务的标识符就可以访问到服务,而不需要修改服务调用的配置文件.该功能类似于 Dubbo 的注册中心,比如 Zookeeper. Eureka

界面开发的三层境界

关键词:GUI框架,UI编辑器,界面引擎,MVC 第一层境界:代码写死笔者大学时候开始学习的语言是C/C++,学习完基本的概念后,后面想开发有界面的应用程序接触的是win32,你会发现创建一个窗口或者一个button控件要写好多代码,例如配置标题,位置,大小,背景颜色,icon等等各种属性,api接口一大堆参数. win32创建窗口api HWND CreateWindow( LPCTSTR lpClassName, //窗口类型名称 LPCTSTR lpWindowName, //窗口名称 D

Java 图形界面开发--图文并茂建立学生管理系统

图形用户界面(Graphics User Interface,GUI)是用户与程序交互的窗口,比命令行的界面更加直观并且更好操作. 这是本人在学习java图形界面开发阶段一步一步实现的超级简易的学生管理系统.虽然说不入大神法眼,但这确实是费了自己不少心血.对于我这样的菜鸟来说,考虑不周到,一不小心就Exception,然后就是自己调呀调.在此分享出来希望对和我一样的菜鸟有帮助. 程序完整代码下载地址见: https://github.com/chaohuangtianjie994/The-Sys

Java GUI图形界面开发工具

Applet 应用程序     一种可以在 Web 浏览器中执行的小程序,扩展了浏览器中的网页功能. 缺: 1.需要下载 Applet 及其相关文件 2.Applet 的功能是受限制的 优: 3.无需安装 4.平台无关性 5.安全 Applet 的生命周期 编写一个 Applet 程序,需要继承 JApplet 类,这个类提供了 Applet 程序的基本行为方式,只需要覆写其中的方法就可以完成我们自己的 Applet 程序. 生命周期 1.初始化阶段:init 方法 在 Applet 执行之初,

经验之谈:循序渐进学习Java Web开发的五个阶段

Java web开发是Java开发中的主要方向,那什么是Java web开发呢,Java web开发就是基于J2SE的web应用程序开发,就是通过Java来解决互联网web应用的问题,互联网Web包含两个部分:web服务器和web客户端,Java语言在web服务器端的应用十分丰富,比如常用的Servlet.JSP等,总之,Java编程技术的到来给Web互联网的发展注入了一针强心剂,既然Java Web开发功能这么强大,那我们应如何循序渐进的学习Java Web开发呢?下面亦是美网络小编分为五个阶

BugPhobia开发篇章:Alaph阶段Scurm Meeting

0x01 :目录与摘要 If you weeped for the missing sunset, you would miss all the shining stars 索引 提纲 整理与更新记录节点 起始记录时间 终止记录时间 0x01 目录与摘要 初次整理于2015/10/23 2015/10/23 12:00 A.M. -- 0x02 Alaph阶段第一次Scrum Meeting 初次整理于2015/10/24 2015/10/23 12:00 A.M. 2015/10/24 12:

JAVA与图形界面开发(Applet应用程序、AWT库、Swing)

Applet 1)简单说,Applet就是嵌入到网页中的小程序,Java代码. 2)编写Applet程序,要继承JApplet类,并根据自己需要覆写相关方法(init.start.stop.destroy<可选>)即可. 3)Applet生命周期: 初始化阶段:init方法(自动被调用,完成图形组件的初始化和版面分配) 执行阶段:start方法(当Applet当前窗口被激活时,执行相应代码) 终止阶段:stop方法(关闭Applet程序时) 释放资源:destroy方法 4)向Applet里添