AngularJS中的MVC概念

最新推荐文章于 2019-11-02 16:09:56 发布

chengqiuming

最新推荐文章于 2019-11-02 16:09:56 发布

阅读量1.3k

点赞数

分类专栏： AngularJS 文章标签： AngularJS

本文链接：https://blog.csdn.net/chengqiuming/article/details/82316064

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一为什么需要MVC　

代码规模越来越大，切分职责是大势所趋。

为了复用:很多逻辑是一模一样的。

为了后期维护方便：修改一块代码不影响其他功能。

MVC只是手段，终极目标是模块化和复用。

二前端MVC的困难

JS脚本的执行过程：浏览器加载脚本，加载完成后JIT编译执行。

困难：

1 操作DOM的代码必须等待整个页面全部加载完成。

2 多个JS文件之间如果出现互相依赖，程序员必须自己解决。

3 JS的原型继承也给前端编程带来了困难。

三 MVC——Controller的实现方式1

这种方式带来的问题：如果“视图1”和“视图2”根本没有任何逻辑关系，“控制器”的角色就会很尴尬，代码实现比较混乱。

四 MVC——Controller的实现方式2

这种方式带来的问题：如果“控制器1”和“控制器2”里面的2个方法是一模一样的，就会出现代码冗余。

五 MVC——Controller的实现方式3

六 Controller使用过程中的注意点

1 不要试图去复用Controller，一个控制器一般只负责一小块视图。

2 不要在Controller中操作DOM，这不是控制器的职责。

3 不要在Controller里面做数据格式化，ng有很好用的表单控件。

4 不用在Controller里面做数据过滤操作，ng有$filter服务。

5 一般来说，Controller是不会互相调用的，控制器之间的交换会通过事件进行。

七实战

1 演示代码

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="CommonController">
            <div ng-controller="Controller1">
                <p>{{greeting.text}},Angular</p>
                <!--test1在控制器Controller1的scope变量中定义-->
                <button ng-click="test1()">test1</button>
            </div>
            <div ng-controller="Controller2">
                <p>{{greeting.text}},Angular</p>
                <button ng-click="test2()">test2</button>
                <button ng-click="commonFn()">通用</button>
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="MVC3.js"></script>
</html>

2 控制器代码

function CommonController($scope){
    $scope.commonFn=function(){
        alert("这里是通用功能！");
    };
}

function Controller1($scope) {
    $scope.greeting = {
        text: 'Hello1'
    };
    $scope.test1=function(){
        alert("test1");
    };
}

function Controller2($scope) {
    $scope.greeting = {
        text: 'Hello2'
    };
    $scope.test2=function(){
        alert("test2");
    }
}

3 演示效果

4 说明

Scope是AngularJS的内置对象，用$Scope来获得。在Scope中定义的数据是数据模型，可以通过{{模型名}}在视图中获得。

Scope主要是在编码中需要对数据模型进行处理的时候使用。

Scope的作用范围与在页面声明的范围一致（如在Controller内使用，scope的作用范围是页面声明ng-controller标签元素的作用范围）。

AngularJS的MVC是借助于$scope实现的。

定义

$scope.greeting='Hello'

获取

{{greeting}}

八如何复用model

1 代码

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input ng-model="greeting.text"/>
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>

2 演示效果

九 scope实战

1 演示代码

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="Scope1.css" />
    </head>
    <body>
        <div class="show-scope-demo">
            <div ng-controller="GreetCtrl">
                Hello {{name}}!
            </div>
            <div ng-controller="ListCtrl">
                <ol>
                    <li ng-repeat="name in names">
                    <!--department来自$rootScope-->
                        {{name}} from {{department}}
                    </li>
                </ol>
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="Scope1.js"></script>
</html>

2 控制器

function GreetCtrl($scope, $rootScope) {
    $scope.name = 'World';
    $rootScope.department = 'Angular';
}

function ListCtrl($scope) {
    $scope.names = ['Igor', 'Misko', 'Vojta'];
}

3 运行效果

chengqiuming

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
AngularJS中的MVC概念

一为什么需要MVC　代码规模越来越大，切分职责是大势所趋。为了复用:很多逻辑是一模一样的。为了后期维护方便：修改一块代码不影响其他功能。MVC只是手段，终极目标是模块化和复用。二前端MVC的困难JS脚本的执行过程：浏览器加载脚本，加载完成后JIT编译执行。困难：1 操作DOM的代码必须等待整个页面全部加载完成。2 多个JS文件之间如果出现互相依赖，程序员必须...
复制链接

扫一扫