創(chuàng)建angular程序需要了解應(yīng)用中的不同的組件是如何構(gòu)建在一起的操骡。把a(bǔ)ngular的應(yīng)用分解成可重復(fù)使用的模塊并且分清楚之間的依賴關(guān)系。
創(chuàng)建一個(gè)模塊秽之,angular.module(name,[])是一個(gè)函數(shù)当娱,其中第一個(gè)參數(shù)是模塊的名字,第二個(gè)參數(shù)是一個(gè)數(shù)組考榨,用來指定填加的模塊(添加的模塊是當(dāng)前模塊所依賴的跨细,
如果沒有依賴的話,當(dāng)然就不用了河质。這里的第二個(gè)參數(shù)非常有用冀惭,當(dāng)我們構(gòu)件大型app的時(shí)候震叙,需要把一個(gè)頁面分成很多小的模塊,最后需要都添加到一個(gè)最終ng-app所指定的模塊上散休,
這樣所有的模塊應(yīng)用都構(gòu)建再了一起媒楼,以后會(huì)根據(jù)例子來講解。
第一個(gè)簡單的模塊
angular.module('firstNameModule',[]);//沒有添加別的依賴模塊
angular.module('firstNameModule',['moduleA','moduleB']);//moduleA/moduleB就是firstNameModule添加依賴的模塊
一旦創(chuàng)建了一個(gè)angular模塊戚丸,就可以添加不同的別的模塊依賴划址,要把a(bǔ)ngular.module理解成創(chuàng)建、檢索限府、注冊(cè)組件的一個(gè)全局API夺颤,基本上就包括了angular.module的所有功能。
angular.module('',[])會(huì)創(chuàng)建并且返回一個(gè)對(duì)于本身的引用胁勺,這樣在模塊中附加上控制器世澜。
var firstModule=angular.module('firstnameModule',[]);
firstModule.Controller('firstController',[function($scope){
.....
}]);
firstModule.directive('firstDriective',function(){
return {
....
}
});
這樣做的缺陷是創(chuàng)建了一個(gè)全局的作用域,這樣就會(huì)不可避免造成全局作用域的命名污染署穗。
為了避免這種情況寥裂,可以使用立即執(zhí)行函數(shù)來創(chuàng)建一個(gè)封閉的命名空間,也相當(dāng)于創(chuàng)建一個(gè)類
(function(){
var firstModule=angular.module('firstModule',[]);
firstModule.controller('firstController',function($scope){
....
});
firstModule.directive('firstDirective',function(){
return{
..../
}
})
})()
這樣當(dāng)函數(shù)創(chuàng)建時(shí)就立即被執(zhí)行案疲。這個(gè)firstModule沒有添加到全局作用域變量中封恰,這樣避免了全局作用域污染。
當(dāng)angular.module()里有兩個(gè)參數(shù)的時(shí)候络拌,第二個(gè)參數(shù)為依賴的參數(shù)俭驮,當(dāng)然也可以使用一個(gè)參數(shù),一個(gè)參數(shù)的含義就是用來建設(shè)模塊的名字
angular.module('firstModule',[]);//
angular.module('firstModule').controller('firstController',function($scope){
});
angular.module('firstModule').directive('firstDirective',function(){
return{
....
}
})
當(dāng)然還有追求更簡潔的方法春贸,這個(gè)在實(shí)際開發(fā)中用的比較多混萝。
angular.module('firstModule',[]).controller('firstController',function(){
}).directive('firstDirective',function(){
return {
.....
}
})
這是我寫的angular教程的其中一部分,詳細(xì)可以看我的github https://github.com/vista5004/angular-course/issues/1