AngularJs MVC 详解
- 为什么在前端也需要MVC
1、代码规模越来越大,切分职责是大势所趋
2、为了复用
3、为了后期维护方便
MVC的目的是为了模块化和复用
- 前端实现MVC的困难
1、操作DOM必须等整个页面加载完
2、多个js如果出现依赖,需要程序员自己解决
3、js的原型继承
- Controller
需求:有一些功能,在各个控制器中都会用到,怎么办?
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script>
<script type="text/javascript" src="demo02.js"></script>
</head>
<body>
<div ng-controller="CommonController">
<div ng-controller="Controller1">
<p>{{greet.text}},AngularJs</p>
<button ng-click="test1()">test1</button>
</div>
<div ng-controller="Controller2">
<p>{{greet.text}},AngularJs</p>
<button ng-click="test2()">test2</button>
</div>
<button ng-click="commonFn()">通用</button>
</div>
</body>
</html>
demo02.html
/**
* Created by sherry on 16/8/3.
*/ var myApp = angular.module("myApp",[]);
myApp.controller("CommonController",function ($scope) {
$scope.commonFn = function () {
alert("这是通用功能");
}
});
myApp.controller("Controller1",function ($scope) {
$scope.greet = {
text:"Hello1"
};
$scope.test1 = function () {
alert("test1");
}
});
myApp.controller("Controller2",function ($scope) {
$scope.greet = {
text:"Hello2"
};
$scope.test2 = function () {
alert("test2");
}
});
demo02.js
对于button,不管其隶属于哪个控制器,只要是在 CommonController 内的,就都能被调用 commonFn 方法就变成了两个“子”控制器的公共方法
如下:
<div ng-controller="CommonController">
<div ng-controller="Controller1">
<p>{{greet.text}},AngularJs</p>
<button ng-click="test1()">test1</button>
</div>
<div ng-controller="Controller2">
<p>{{greet.text}},AngularJs</p>
<button ng-click="test2()">test2</button>
<button ng-click="commonFn()">通用</button>
</div>
</div>
但是:AngularJs中并不推荐这么做,AngularJs的最佳实践,是把公共部分抽取成Service,被Controller调用
Controller使用中的注意点:
1、不要试图去复用Controller,一般控制器只负责一小块视图【一般一个Controller负责的是一个业务逻辑,除非业务逻辑切分得足够细,否则不具备复用的可能】
2、不要在Controller中操作DOM,这不是控制器的职责【推荐将DOM操作使用指令来做,Controller中操作DOM的速度是非常低的】
3、不要在Controller里面做数据格式化,AngularJs有很好的表单控件
4、不要在Controller里面做数据过滤操作,AngularJs有$filter服务
5、一般来说,Controller是不会相互调用的,控制器之间的交互通过事件进行
- Model
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script>
</head>
<body>
<input type="text" placeholder="输入..." ng-model="name">
<p>{{name}}</p>
</body>
</html>
通过 ng-model 标签,定义一个数据模型,实现双向绑定
- View
利用 driective 实现View的复用,就是定义一个指令,设置一个模板
AngularJs中的MVC,是借助$scope(作用域)实现的
- AngularJs作用域
$rootScope,根作用域,如果属性在当前控制器的$scope中找不到,就会依次向上去寻找,这点很像JavaScript中的原型继承
$scope是一个POJO
$scope提供了一些工具方法 $watch/$apply
$scope是表达式的执行环境
$scope是一个树型结构,与DOM标签平行
子$scope会继承父$scope上的属性和方法
每个AngularJs只有一个根$scope对象(一般位于ng-app上)
$scope可以传播事件,类似DOM事件,可以向上或向下传播
$scope不仅仅是MVC的基础,也是数据双向绑定的基础
使用 angular.element($0).scope() 获取当前$scope进行调试
最新文章
- src与 href 的一些区别
- C语言->;实验室->;指针数组
- docker 批量删除容器
- Windows7不能打开telnet功能
- ios项目开发(天气预报项目):通过经纬度获取当前城市名称
- 【Linux远程管理】RDP协议远程管理
- 如何用OS X的Xcode写C语言程序
- Apache http强制转为https页面访问(转)
- fuel Explain
- CentOS6.6普通用户使用sudo命令借用root用户权限
- STL 源代码剖析 算法 stl_algo.h -- equal_range
- 如何通过 WebP 兼容减少图片资源大小
- Cocos Creator 监听安卓屏幕下方返回键
- supervisor配置详解(转)
- 学习python 检测字符串的方法
- docker 创建私有仓库
- Sitecore CMS中删除项目
- 访问kubernetes ingress-controller
- mysql的性能监控指标(转载)
- JavaScript DOM 第3章 DOM