angularJS中的MVC思想？

mvc 思想：

将应用程序的组成，划分为三个部分：model , controller 和 view ;

    - 控制器的作用是用来初始化模型用的；

    - 模型就是用于存储数据的；

    - 视图是展示数据的；

例如：登录案例：

模型：

    - 我们数据库中存储所有的用户信息

    - 接受控制器传过来的用户名和密码进行校验的业务逻辑，返回 true / false ;

控制器：

    - 接受用户再页面填写的用户名和密码；

    - 将用户名和密码提交给模型；

视图：

    - 给用户呈现一个表单；

    - 接受用户输入的信息，并将其提交给控制器；

 

angularJs创建模块：

// 注册模块， 通过module函数

// 第一个参数是这个模块的名字

// 第二个参数是这个模块所依赖的模块

// 如果不依赖任何模块也必须传递第二个参数，如果没有传递第二个参数，angular.module就不是创建一个模块

// angular.module 返回 刚刚创建的模块对象

<script type="text/javascript">
// 创建一个名字叫 myApp的模块，第二个参数是该模块所依赖的模块
var myApp = angular.module("myApp",[]);
</script>

<script type="text/javascript">
// 创建一个名字叫 myApp的模块，第二个参数是该模块所依赖的模块
angular.module("myApp",[])
    .controller("myAppController",['$scope',function($scope){
        $scope.user = {
            name:'小三',
        };
    }]);
</script>

如果需要通过某一个模块去管理某一个应用：

<div ng-app="myApp" ng-controller="myAppController">
<span>{{title}}</span>
<span>{{user.name}}</span>
<span>{{userOne.name}}</span>
<input type="button" value="点我啊" ng-click="show()">
</div>
<script type="text/javascript">
// 创建一个名字叫 myApp的模块，第二个参数是该模块所依赖的模块
var myApp = angular.module("myApp",[])
myApp.controller("myAppController",['$scope',function($scope){
    $scope.title = "欢迎光临！";
    $scope.user = {};
    $scope.user.name = "小三";
    $scope.user.password = "123";
    $scope.userOne = {
        name:'小四',
        password:'456'
    };
    $scope.show = function(){
        alert($scope.user.name);
        alert($scope.userOne.name);
    };
}]);
</script>

angular.module 不但可以帮助我们创建一个模块，也可以帮助我们取得一个模块：

这里传递一个参数是获取，传递两个参数是创建（就像上面的就是创建）：

<script type="text/javascript">
angular.module("myApp")
angular.module("myApp").controller("myAppController",['$scope',function($scope){}]);
</script>

 模块中的 $scope 是固定的，每一个都有不同的含义：（传递多个示例）

<script type="text/javascript">
module.controller('myAppController',['$scope','$http',function($scope,$http){
    console.log($scope);
    console.log($http);
}]);
</script>

 

angularJS 的控制器（Controller）：

主要三种职责：

    - 为应用中的模型设置初始状态；

    - 通过$scope对象把数据模型或函数行为暴露给视图

    - 监视模型变化，做出相应的动作

<script type="text/javascript">
// 监视购物车的内容变化 计算最新的结果
$scope.$watch($scope.totalCart,calculateDiscount);
</script>

监视小案例：（注册登录的时候，长度太短出现提示信息）

<div ng-app="myApp" ng-controller="myAppController">
    <input type="text" ng-model='user.name'>&nbsp;&nbsp;<span style='color:red;'>{{message}}</span>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('myAppController',['$scope',function($scope){
    $scope.user = {};
    $scope.message = '';
    $scope.user.name = "";
    //固定参数 现在的值和前面的值
    $scope.$watch('user.name',function(now,old){
        //监听 user.name
        //console.log(now);
        //console.log(old);
        if(now){
            console.log(now.length);
            if(now.length<7){
                $scope.message = "请输入合法的用户名";
            }else{
                $scope.message = "验证通过";
            }
        }else{
            $scope.message = "请输入用户名";
        };
    });
}]);
</script>