《AngularJS实例-01》

发表于   |   分类于   |  

初探四大特性

angular四大核心特性：

  • MVC

  • 模块化

  • 指令系统（ng特有）

  • 双向数据绑定(ng特有)

MVC

首先，来了解ng的第一个特性：MVC

Model:数据模型层；

View :视图层，负责展示，我们眼睛能看到的那些东西都属于视图；

Controller:业务逻辑和控制逻辑放的地方；

MVC的好处：

职责清晰，代码模块化，便于复用，例如像Model、View这种东西，能够经常的复用，因为很多地方的界面展示是一模一样的；

MVC属于架构模式，它是观察者模式、策略模式、组合模式的组合；

在ng的语境下，你要很熟悉代码中哪些是Model，哪些是View，哪些是Controller；

例如：有这么一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html ng-app>
<head>
	<head>
		<meta charset="utf-8">
	</head>
	<title></title>
	<script type="text/javascript" src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.js"></script>
</head>
<body>
	<!--Controller: 给div放置一个控制器testController -->
	<div ng-controller="testController">
		<!-- Model、View:数据模型{{}}、View:<p>标签 -->
		<p>{{greeting.text}}</p>
	</div>

	<script type="text/javascript">
		function testController($scope) {//控制器,负责业务逻辑与控制逻辑
			$scope.greeting={
				text:'Hello ng'
			};
		}
	</script>
	
</body>
</html>

模块化

上面的代码中我们看到，我们定义了一个全局的函数testController,这显然不好。现在我们对这个function进行改进：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html ng-app="test_ng">
<head>
	<head>
		<meta charset="utf-8">
	</head>
	<title></title>
	<script type="text/javascript" src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.js"></script>
</head>
<body>
	<!--Controller: 给div放置一个控制器testController -->
	<div ng-controller="testController">
		<!-- Model、View:数据模型{{}}、View:<p>标签 -->
		<p>{{greeting.text}}</p>
	</div>

	<script type="text/javascript">
		var myModule=angular.module("test_ng",[]);//定义一个模块
		//用模块生成一个控制器testController
		myModule.controller("testController",['$scope',
			function testng($scope){//第一个参数$scope,在告诉ng,请再testng里注入$scope————即，依赖注入
			$scope.greeting={
				text:'Hello ng'
			};
		}
		]);
	</script>
	
</body>
</html>

下面我们具体看一下ng的模块化Module概念，并且在Module下有很多的概念。

需要注意的是：angular是从模块开始的，你在做东西的时候，需要首先想到Module,只有在Module下你才能使用ng的一些概念；

我们来看一张图：

alt text

指令系统

指令系统，是angular最吸引人的部分。

首先上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html ng-app="MyNg">
<head>
	<head>
		<meta charset="utf-8">
	</head>
	<title></title>
	<script type="text/javascript" src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.js"></script>
</head>
<body>
	<!-- 浏览器不是识别hello标签 -->
	<hello></hello>

	<script type="text/javascript">
		var myModule=angular.module("MyNg",[]);//定义一个模块
		// 为了让浏览器解析hello这个自定义标签，我们需要借助ng的directive特性
		myModule.directive("hello",function(){//hello 对应指令名称，即<hello></hello>标签名
			return {
				restrict:'E',
				template:'<div>Hello angular</div>',//hello标签被替换为该模板
				replace:true
			}
		});
	</script>
	
</body>
</html>

这就是angular的指令系统，有了这个指令系统我们能够做很多事情，比如我们将一个具体的指令进行封装，在其他地方我们就能够进行调用。

当然，指令不仅仅是用来使用自定义标签，它还有其他神奇的功能，例如：

ng-app:这是一个ng指令，ng-app=”MyNg”,表示告诉angular去使用MyNg这个模块。ng-app这个指令可以看成是一个angular的启动指令，或是入口，相当于C语言中得Main（）函数。故，在任意一个单页中只能出现一次ng-app。

双向数据绑定

在单向数据绑定中，通常是把模板和数据模型都写好，这个数据模型可能来自后端数据，然后将模板与数据模型合并输出到视图进行展示，这样有一个缺点：即一旦模板与数据模型写好之后，View就无法改变了，如果要改变，那么只能重新再来一次。

在JqueryUi\Backbone\Flex这样的前端框架中都是这么处理的，这样是否优雅呢？

Angular看到了，就不喜欢了，它就弄了一个双向数据绑定，它认为：

  • 视图View和数据Model是对应的，当View上面的内容发生变化的时候，Model也发生变化；当Model发生变化，View会自动更新；——这样的思路需要借助一种事件机制；

例如：在HTML中，表单常常会发生变化，因为表单是用来搜集用户的输入，故常常容易发生变化。在angular中，如果数据/表单发生变化，就会同步到Model上面；

下面看代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html ng-app>
<head>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.js"></script>
</head>
<body>

	<form>
		<!-- 在input中绑定一个ng-model -->
		<input type="text" placeholder="请输入" ng-model="greeting.text">
		<!-- 在p标签中去获取值，双花括弧在angular中表示取值 -->
		<p>{{greeting.text}}</p>
	</form>
	
</body>
</html>

在上面这段代码中，你无需写任务angular代码就能实现一个简单的双向数据绑定。

思考

  • 为什么其他的前端框架不实现双向数据绑定？
  • 双向数据绑定有什么缺点？

搭建开发、调式、测试工具

前端开发中需要什么样的开发环境？

  • 代码编辑工具：sublime编辑器
  • 断点调式工具：chrome 插件Batarang
  • 版本管理工具: git,在从github上克隆项目前需要先fork(相当于建立一个自己的分支)，然后再Clone.
  • 代码合并和混淆工具:gulp、grunt
  • 依赖管理工具:bower(自动安装依赖组件、组件之间的依赖检测、版本兼容性自动检测)
  • 轻量级Server—http-server(一款简单的http-server,能将电脑上得任意一个目录变成在浏览器上能访问的；它基于NodeJS的HTTP接口，通过npm 安装，主要用来模拟与后端交互的数据)

  • 单元测试工具：karma配合jasmine（通过npm安装）。jasmine有四个核心概念：分组、用例、期望、匹配，分别对应jasmine四种函数。

    （1）describe(string,function)分组，一组测试用例；

    （2）it(string,function)表示测试用例

    （3）expect(expression)表示期望expression这个表达式具有某个值或者具有某种行为；

    （4）to*(arg)表示匹配；

  • 集成测试工具：Proctactor-专门为Angular应用而设计；
    Proctactor基于webDriverJs;
    利用webDriverJS,能借助于NodeJS直接调用浏览器的接口；
    https://github.com/angular/protractor
    https://code.google.com/p/selenium/wiki/WebDriverJs
    angular官方提供angular-phonecat的例子做为测试；

最后我们来看一个完整的项目目录结构实例：

alt text