AngularJS中的MVC概念

一 为什么需要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 演示代码

    
        
    
    
        

            

                
{
    {greeting.text}},Angular
                
                test1
            
            

                
{
    {greeting.text}},Angular
                test2
                通用
            
        
    
    
    

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 代码

    
        
    
    
        

            
            
{
    {greeting.text}},Angular
        
    
    

2 演示效果

九 scope实战

1 演示代码

    
        
        
    
    
        

            

                Hello {
    {name}}!
            
            

                

                    

                    
                        {
    {name}} from {
    {department}}
                    
                
            
        
    
    
    

2 控制器

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

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

3 运行效果