3-Angular的模組化

標籤：

在前面的幾個文章中，我們的資料都是以函數的方式定義在全域的範圍下，這樣很顯然是不對的，沒有模組化的思想，下面的例子介紹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‘;}]);

 

 

 

學習筆記，如有不足，請指正！轉載請保留原文連結，謝謝。

最後，微博求粉，謝謝。

 

3-Angular的模組化