angular之MVC，内置指令
认识angular
MVC
| 分类 | 用途 |
|---|---|
| Model | 模型表示数据的部分 |
| View | 视图这是用户看到并与之交互的界面 |
| Controller | 控制器是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户的输入，并向模型发送数据 |
- MVC是一种使用MVC（Model View Controller 模型-视图-控制器）设计创建Web应用程序的模式
- MVC分层同时也简化了分组的开发。不同的开发人员可同时开发视图，控制器逻辑和业务逻辑
- MVVM模式由视图（View），视图模型（ViewModel），模型（Model），三部分组成，同今年刚过这三部分实现UI逻辑，呈现逻辑和状态控制，数据与业务的分离
- View将和ViewModel互动（通过$scope对象），将监听Model的变化，这些可以通过View来发送和渲染，由HTML来展示你的代码。
使用MVVM模式的好处 - 低耦合：View可以独立于Model变化和修改，一个viewModel可以绑定到不同的view
- 可重用性：可以把一些试图的逻辑放在ViewModel里面，让很多的View重用这段视图逻辑
- 独立开发：开发人员可以专注与业务逻辑和数据的开发（ViewModel）,设计人员可以专注于界面（View）的设计
- 可测试性：可以针对ViewModel来对界面进行测试 -
用户输入——>Controller（控制器，接受用户请求并且把数据传递给业务模型）——>Model（模型，业务处理，从数据库中读取数据）——>View（视图，选择视图呈现给用户）——>用户输入
内置指令
- 指令指的是当关联的HTML结构进入编译阶段时应该执行的操作
- 当浏览器启动，开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说一个angular应用启动
- （1）angular编译器就会遍历dom树来解析HTML，寻找这些指令属性的函数
- （2）在一个dom元素上找到一个或多个这样的属性指令函数
- （3）他们就会被收集起来，排序，然后按照优先级顺序被执行
- 组件形指令主要是为了将复杂的视图分离，实现高内聚低耦合，是自封装和内聚性的整体，包含了视图和交互逻辑，比如登录框
- 装饰性指令是为dom添加行为或使之具有能力，如：可拖动，添加样式
组件形
<html ng-app="zzmod">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<zfrom>zfrom>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
angular.module('zzmod',[]).directive('zfrom',function(){
//要用这个dom内容添加到原来指令的内部
return {
template:''
}
}).directive('red',function(){
return {
//scope作用域，当前元素本身
link:function(scope,element){
element.css('color','red');
element.css('border','1px solid red');
}
}
});
script>
html>
装饰形
<html ng-app="zzz">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div red>
zzzzz
div>
<span red>enenne span>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
//定义一个指令（指令的名字，指令的定义
angular.module('zzz',[]).directive('red',function(){
return {
//scope作用域，当前元素本身
link:function(scope,element){
element.css('color','red');
element.css('border','1px solid red');
}
}
})
script>
html>
依赖注入
只需要声明要使用的对象，就可以自动得到，不需要自己创建
单项数据绑定
双向数据绑定
- 当view中有任何数据发生了变化，那么这个变化也会自动的反馈到scope的数据上，scope模型会自动的更新
- 当scope模型发生变化时，view中的数据也会更新到最新值
<html ng-app>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
{{name}}
<input type="text" ng-model="name"/>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
//找到ng-app之后，会生成一个$rootScope
script>
html>
过滤器
| 过滤器 | 作用 |
|---|---|
| lowercase | 转小写 |
| uppercase | 转大写 |
为什么需要mvc
- 项目规模越来越大，需要切分模块和职责
- 消除重复 的代码，实现复用
- 方便重构，修改哟个地方不影响其他的功能
核心目标是模块化和复用
共享同一个数据
<html ng-app="z">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div ng-controller="z1">
{{Service.count}}
<input type="button" value="加一" ng-click="add()"/>
div>
<div ng-controller="z2">
{{Service.count}}
<input type="button" value="加一" ng-click="add()"/>
div>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
angular.module('z',[]).controller('z1',function($scope,Service){
$scope.Service=Service;
$scope.add=function(){
Service.add();
}
}).controller('z2',function($scope,Service){
$scope.Service=Service;
$scope.add=function(){
Service.add();
}
console.log(Service);
console.log($scope.count);
}).factory('Service',function(){
return {
count :0,
add:function(){
this.count++;
}
}
})
script>
html>
Model模型的使用
- MVC借助于$scope实现
- $scope是基本javascript对象
- $scope是一个树形结构，与DOM标签平行
- 子 scope对象遵循原型继承，会继承父 s c o p e 对 象 遵 循 原 型 继 承 ， 会 继 承 父 scope上的属性和方法
- 每一个angular应用只有一个根$rootscope对象的(ng-app）上
- $scope是MVC和双向数据绑定的基础
- $scope是表达式执行的上下文环境
- 有自己的生命周期 创建->注册监控者->模型变化->检测变化->销毁
- scope提供一些工具方法 s c o p e 提 供 一 些 工 具 方 法 watch/$apply
- $scope可以传播事件，类似于DOM事件，可以向上也可以向下传播
向上向下传递
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div ng-controller="ParentCtrl">
parent:{{count}}
<div ng-controller="sonCtrl">
<input type="text" ng-model='num'/>
<input type="button" ng-click="$emit('add',num)" value="向上发射"/>
<input type="button" ng-click="$broadcast('add',num)" value="向下发射" />
son:{{count}}
<div ng-controller="grandCtrl">
grandson:{{count}}
div>
div>
div>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
angular.module('zz',[]).controller('ParentCtrl',function($scope){
$scope.count=0;
$scope.$on('add',function(eve,num){
$scope.count+=num;
});
}).controller('sonCtrl',function($scope){
$scope.count=0;
$scope.$on('add',function(eve,num){
$scope.count+=num;
});
}).controller('grandCtrl',function($scope){
$scope.count=0;
$scope.$on('add',function(eve,num){
$scope.count+=num;
});
});
script>
html>
指令-控制器
- ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上
- 不要复用Controller,一个控制器值负责一个视图
- 不要再控制器中操作DOM，使用指令
- 不要再Cotroller里做数据过滤喝格式化，使用filter过滤器
- 控制器之间不要相互调用，控制器之间的交互通过事件交互
模块化
- 模块化是哦你过来分割，组织喝打包软件
- 每个模块安城一个特定的子功能
- 所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能
- 一切是从模块开始，.module就是容器，其他的元素都挂在module里面
- 模块是一些功能的集合，如控制器，服务，过滤器，指令等子元素组成的整体
ng-model原理
- angular加载完成之后会启动，首先找ng-app指令
- 找到后认为ng-app里面的所有的内容都归angular来管
- 找子层标签所有的指令，然后就可以找到ng-model
- 找到后会生成数据模型，然后挂在作用域上面
- 使用此数据模型的变量和视图进行绑定
ng-bind
- ng-bind和AngularJS功能类似，但是ng-bind是再angular解析渲染完毕之后才讲数据显示出来
- 使用花括号语法的时候，因为浏览器需要先加载页面，渲染它。然后AngularJS才能把它解析成你期望看到的内容，所以对于首个页面中的数据绑定操作，建议采用ng-bind。避免没有被渲染的页面被用户看到