angularJS的MVC的用法

1.前端MVC：
M:Model,数据库
V:HTML页面
C:Control控制器
比较很有名的前端MVC框架：ExtJs

2.angularJS的MVC框架搭建
index.html代码如下：

   
          
          
                     
                     
                     
          
          
                 

                     
                     
{{msg}}
                 
          
          
          

myCtrol.js的代码如下：

          angular.module('app', [])
          .controller('MyCtrol', function ($scope) {
                     $scope.msg = "Angular";
          });

---

ng-bind的使用：

   
          
          
          
          
          
   
   
   

              
              
{{msg}}
              
              

              
{{msg}}
          
   
   
   

---

controller的用法

index.html代码如下：

myCtrol.js的代码如下：

   angular.module('app', [])
   .controller('MyCtrol', function ($scope) {
       $scope.msg = "Hello angular";
   })
   .controller('MyCtrol2',function ($scope) {
       $scope.msg = "World angular";
   })

---

$scope中方法和变量的使用

   
   
   
       
       
       
   
   
       

           
           
           
           
登录
           
{{errormsg}}
       
   
   
   
   

   angular.module("app",[])
   .controller('MyCtrol',function ($scope) {
       $scope.msg = "";
       $scope.user = {uname:'',pwd:''};
       $scope.errormsg = "";
       $scope.reverse = function () {
           return $scope.msg.split(" ").reverse().join("");
       }
       $scope.login = function () {
           if($scope.user.uname == "admin" && $scope.user.pwd == "123"){
               alert("登录成功！");
           }else{
               $scope.errormsg = "用户名或密码错误";
           }
       }
   })

转载于:https://www.cnblogs.com/Zhangqwr/p/7738096.html