Angular雙向數據綁定MVVM以及基本模式分析

時間 2019-11-29

標籤 angular 雙向數據綁定 mvvm 以及基本模式分析欄目 AngularJS 简体版

原文原文鏈接

MVVM:html

angular的MVVM實現的是雙向數據綁定，模型從服務器端抓取到數據，將數據經過控制器（controller）傳遞到視圖（view）顯示，視圖數據發生變化時一樣也會影響到模型數據的變化，這既是雙向數據綁定。gulp

$scope即是視圖模型，controller的做用即是view與model之間的橋樑（紐帶）。服務器

基本模式分析：app

 1  <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4    <meta charset="UTF-8">
 5     <title>test</title>
 6  </head>
 7  <body ng-app="app">　　　　<!-- angular模塊 -->
 8  <p ng-controller="myCtr">{{msg}}</p>   <!-- angular控制器 -->
 9  </div>
10  <script src="angular.min.js"></script>
11  <script>
12  var m = angular.module("app", []);                  //加載angular模塊，[]表示有其餘模塊須要加載時纔會用到
13  m.controller("myCtr", ["$scope", function($scope){  //定義控制器   推薦使用這種寫法,縮後不易出現問題
14     $scope.msg="lol";
15  }]);
16  </script>
17  </body>
18  </html>

注意上述代碼，每一句都有加分號，是由於在代碼經過gulp壓縮後，代碼會連在一塊兒，若不加分號，壓縮後就沒法正常運行了spa

對比下面的寫法：code

1 var m = angular.module("app", []); //加載angular模塊，[]表示有其餘模塊須要加載時纔會用到
2  m.controller("myCtr", function($scope){ //定義控制器  不建議使用這種寫法
3     $scope.msg="lol";
4  });

這種寫法是比較精簡，可是代碼壓縮後，形式參數$scope會變成單個字母，如"a"等，這樣代碼就不能正常運行了，而上面的第一種寫法，能夠正常運行，因此建議寫成第一種htm

1 angular.module("app", []).controller("myCtr",["$scope", function(a){a.msg="lol";}]); //能夠正常運行
2 angular.module("app", []).controller("myCtr", function(a){a.msg="lol"; });            //不能正常運行

因此綜上所訴，代碼書寫注意規範且加「;」,這樣代碼在壓縮後就不會出現問題了。blog