angular之MVC，内置指令

た入场券 2022-05-24 06:37 169阅读 0赞

## 认识angular ##

## MVC ##

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th align="center">用途</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Model</td> 
   <td align="center">模型表示数据的部分</td> 
  </tr> 
  <tr> 
   <td>View</td> 
   <td align="center">视图这是用户看到并与之交互的界面</td> 
  </tr> 
  <tr> 
   <td>Controller</td> 
   <td align="center">控制器是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户的输入，并向模型发送数据</td> 
  </tr> 
 </tbody> 
</table>

*  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添加行为或使之具有能力，如：可拖动，添加样式  
    **组件形**

<!DOCTYPE html>
    <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:'<form><span red>用户名</span><input name="username"/></form>' } }).directive('red',function(){ return { //scope作用域，当前元素本身 link:function(scope,element){ element.css('color','red'); element.css('border','1px solid red'); } } }); </script>
    </html>

**装饰形**

<!DOCTYPE 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中的数据也会更新到最新值

<!DOCTYPE html> <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>

**过滤器**

<table> 
 <thead> 
  <tr> 
   <th>过滤器</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>lowercase</td> 
   <td align="center">转小写</td> 
  </tr> 
  <tr> 
   <td>uppercase</td> 
   <td align="center">转大写</td> 
  </tr> 
 </tbody> 
</table>

**为什么需要mvc**

*  项目规模越来越大，需要切分模块和职责
 *  消除重复 的代码，实现复用
 *  方便重构，修改哟个地方不影响其他的功能
 *  核心目标是模块化和复用
    
    **共享同一个数据**

<!DOCTYPE html> <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事件，可以向上也可以向下传播

**向上向下传递**

<!DOCTYPE html> <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。避免没有被渲染的页面被用户看到