AngularJS第三课：MVW与控制器

一.名词解释：MVC、MVVM和MVW

MVC：Model-View-Controller，模型-视图-控制器,核心思想：把数据的管理、业务逻辑控制和数据的展示分离开。

MVVM：Model-View-ViewModel，MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。ViewModel包含所有由UI特定的接口和属性，并由一个 ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，所以需要在ViewModel 直接更新视图中编写相应代码。

MVW：Model-View-Whatever，不管是MVC还是MVVM,无论什么(Whatever)都行。

讲了这么多，选择一个适合团队的模式进行开发才是正道，突破局限。

二.AngularJS控制器

        function UserInfoDemo($scope,$log){
            $scope.name = "admin";
            $scope.password = "111111";
            $log.info("UserInfoController->name:"+$scope.name);
            $log.info("UserInfoController->password:"+$scope.password);
        }
        var app = angular.module("app",[]);
        app.controller("UserInfoController",UserInfoDemo);// 声明一个控制器

1.控制器定义

如上所示,使用模块实例的controller()方法来声明一个控制器,接收两个参数：第一个是控制器名称(自定义名称),第二个是方法名称(可以是匿名方法)

2.使用模块实例：用angular对象的module()方法返回一个模块实例。

3.控制器构造方法的两个参数：$scope、$log

(1)$scope是作用域对象,是控制器与视图之间传递信息的载体;

(2)$log是AngularJS框架内置的日志服务对象,用于向控制台输入日志信息。

向控制器构造方法指定参数后,控制器将依赖这两个对象,控制器实例化的时候会把两个对象注入控制器中。

4.ng-controller指令

内置指令,用于实例化控制器对象，当AngularJS框架解析到ng-controller指令时会查找名为指定名称的构造方法实例化构造器对象。
可作为标签的扩展属性使用：支持使用as语法指定控制器对象名称。

<div  ng-controller="CalcController as calc">

使用注意作用域的范围：每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。

5.控制器中处理DOM事件

DOM事件处理可以在控制器中完成,AngularJS提供了很多事件绑定指令：ng-click、ng-keyup等。

<button ng-click="login()" type="submit" class="btn btn-sm btn-info">登录</button>

        function loginControllerFunc($scope,$log){
            $scope.login = function(){// 控制器向作用域中注册方法
                $log.info("LoginController->name:"+$scope.uname);
                $log.info("LoginController->password:"+$scope.pword);
                if($scope.uname=="admin"&&$scope.pword=="admin1"){
                    alert("登录成功!");
                }else{
                    alert("用户名密码错误!");
                }
            }
        }

三.控制器中的一个细节问题

在控制器中定义方法时：如果在控制器的方法里面使用 this.方法名定义时，调用方法的时候使用 {{控制器名称.方法名}} ;如果在控制器的方法里面使用 $scope.方法名定义时，调用方法的时候可以直接使用 {{方法名}}：

            <div>运算结果：{{calc.totalPrice()}}</div>
            this.totalResult = function(){
                $log.info("CalcController->name:"+$scope.name);
                $log.info("CalcController->password:"+$scope.password);
                return $scope.mult*$scope.multee;
            }
            <div>运算结果：{{totalPrice()}}</div>
            $scope.totalResult = function(){
                $log.info("CalcController->name:"+$scope.name);
                $log.info("CalcController->password:"+$scope.password);
                return $scope.mult*$scope.multee;
            }

代码和笔记放在码云上：AngularJS学习笔记和代码