angular之MVC，内置指令

最新推荐文章于 2020-10-10 21:09:39 发布

Carrie_zzz

最新推荐文章于 2020-10-10 21:09:39 发布

阅读量633

点赞数

分类专栏：前端文章标签： angular mvc 内置指令

本文链接：https://blog.csdn.net/Carrie_zzz/article/details/80407329

版权

前端专栏收录该内容

73 篇文章 0 订阅

订阅专栏

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

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

过滤器

过滤器	作用
lowercase	转小写
uppercase	转大写

为什么需要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对象遵循原型继承，会继承父$ scope上的属性和方法
每一个angular应用只有一个根$rootscope对象的(ng-app）上
$scope是MVC和双向数据绑定的基础
$scope是表达式执行的上下文环境
有自己的生命周期创建->注册监控者->模型变化->检测变化->销毁
$scope提供一些工具方法$ 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。避免没有被渲染的页面被用户看到

Carrie_zzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular之MVC，内置指令

认识angularMVC 分类用途 Model 模型表示数据的部分 View 视图这是用户看到并与之交互的界面 Controller 控制器是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户的输入，并向模型发送数据MVC是一种使用MVC（Model View Controller 模型-视图-控制器）设...
复制链接

扫一扫

专栏目录