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学习笔记和代码

转载于:https://my.oschina.net/javamaster/blog/1634316

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值