在前面的幾個文章中,我們的數據都是以函數的方式定義在全局的作用域下,這樣很顯然是不對的,沒有模塊化的思想,下面的例子介紹Angular的模塊化!
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AngularJs模塊化</title><script type="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js"></head><body><div ng-controller='Aaa'> <p>{{name}}</p></div><div ng-controller='Bbb'> <p>{{name}}</p></div><script type="text/javascript">var m1 = angular.module('myApp',[]);//參數1:模塊的名字,參數2:當前模塊中依賴的模塊,後面的文章會介紹m1.controller('Aaa',function($scope){ $scope.name = 'hello AngularJs';});m1.controller('Bbb',function($scope){ $scope.name = 'Hi';});</script></body></html>首先在html上綁定初始化的名稱,并附上myApp,使用angular.model在JS中定義多個模塊,并附上參數。
再使用控制器定義數據,注意控制器傳遞的參數,模塊名和匿名函數。
都知道我們的項目在上線後合并壓縮的,這樣我們匿名函數傳遞的形參在壓縮後出現問題,所以這個時候我們需要將參數包裹成數組,來避免壓縮的問題!
m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello AngularJs';}]);m1.controller('Bbb',['$scope',function($scope){ $scope.name = 'Hi';}]);這個時候注意控制器傳遞的參數,模塊名和數組(包含服務和匿名函數)。
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持武林網!
新聞熱點
疑難解答