1.MVC
M:model 数据模型层
V:view 视图层,负责展示
C:controller 业务逻辑和控制逻辑
好处:职责清晰,代码模块化
为什么需要MVC?
代码规模越来越大,切分职责大势所趋。
为了复用抽出逻辑
为了后期维护,修改一块功能不影响其他内容
MVC只是手段,终极目标是模块化和复用。
前端MVC困难
操作DOM的代码必须等待整个页面全部加载完成
多个JS文件之间如果出现相互依赖,程序员必须自己解决
JS原型继承也带来困难
Controller使用过程中的注意点
不要试图去复用Controller,一个控制器一般只负责一小块试图
不要在Controller里操作DOM,这不是控制器的职责
不要在Controller里面做数据格式化,ng有很好的表单控件
不要在Controller里面做数据过滤操作,ng有$filter服务
一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行
AngularJs的MVC是借助于$scope
实现的!
神奇的$scope
$scope
是一个POJO(plain old javascript object)
$scope
提供了一些工具方法$watch()和$apply()
$scope
是表达式的执行环境(或叫作用域)
$scope
是一个树形结构,与DOM标签平行
子$scope
对象会继承父$scope
上的属性和方法
每一个angular应用只有一个根$scope
对象(一般位于ng-app上)
$scope
可以传播事件,类似于DOM事件,可以向上也可以向下
$scope
不仅是MVC的基础,也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试
2.模块化
代码事例:
ng1.html
<!doctype html>
<html ng-app="helloangular">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="hng">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="angular.min.js"></script>
<script src="helloangular_model.js"></script>
</html>
模块js:helloangular_model.js
var myModule=angular.module("helloangular",[]);
myModule.controller("hng",['$scope',
function helloangular($scope){
$scope.greeting={
text:'hello'
};
}
]);
运行结果:
3.指令系统(特有)
ng2.html
<!doctype html>
<html ng-app="myModule">
<head>
<meta charset="utf-8">
</head>
<body>
<hello></hello>
</body>
<script src="angular.min.js"></script>
<script src="helloangular_directive.js"></script>
</html>
指令文件js:helloangular_directive.js
var myModule=angular.module("myModule",[]);
myModule.directive("hello",function(){
return {
restrict:'E',
template:'<div>Hi everyone!</div>',
replace:true
}
});
运行结果:
4.双向数据绑定(特有)
目前大多数前端框架都是单向数据绑定:JQueryUI,BackBone,Flex
ng3.html
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input ng-model="greeting.text">
<p>{{greeting.text}}</p>
</div>
</body>
<script src="angular.min.js"></script>
</html>
运行结果: