轉載出處：http://www.cnblogs.com/liulangmao/p/3711047.html
如果在頁面的html標籤(或任意標籤)中添加ng-app,表示對整個頁面應用angular來管理. 他是一個模塊.
模塊有助於把東西從全局命名空間中隔離.
今天學習如何自定義創建模塊:
<!DOCTYPE html> <html> <head> <title>2.1模塊</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="TextController"> <h1>{{text.message}}</h1> <h1>{{text.name}}</h1> </div> </div> </body> </html>
var messages = {}; messages.message = 'hi'; messages.name = 'code_bunny'; var myAppModule = angular.module('myApp',[]); myAppModule.controller('TextController',function($scope){ $scope.text = messages; });
<div ng-app="myApp">:
1. ng-app可以加在任何元素上,表示使用這個模塊來管理這個元素中的所有內容,
2. 一個頁面裏只能有一個ng-app,不能有多個,不同的頁面可以運用不同的ng-app模塊,但是可以在同一個js裏定義多個模塊
var messages = {}; messages.message = 'hi'; messages.name = 'code_bunny'; var myAppModule = angular.module('myApp',[]); myAppModule.controller('TextController',function($scope){ $scope.text = messages; }); var otherAppModule = angular.module('otherApp',[]); otherAppModule.controller('TextController',function($scope){ $scope.text = messages; $scope.text.name = 'white-bunny'; });
3. ng-app="模塊名"
然後在js中使用如下方法來擴展模塊:
var myAppModule = angular.module('模塊名',[]);
angular.module()中的第二個參數是必須是一個數組,用於定義該模塊依賴的模塊,數組的值是字符串,也就是依賴的模塊的名字.一旦寫入了依賴的模塊,那麼該模塊也就擁有了依賴的模塊的指令,方法,等...
比如常用的ngResource模塊:
var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource',function($resource){ return $resource('/card/user/:userID/:id',{userID:123,id:'@id'},{charge:{method:'POST',params:{charge:true},isArray:false}}) });
在這裏依賴了ngResource模塊,就可以使用$resource服務了.(當然需要加載angular-resource.min.js這個文件)
又比如:
//myRecipe.service模塊用來定義服務
var service = angular.module('myRecipe.service',['ngResource']); service.factory('Recipe',['$resource',function($resource){ return $resource('/recipe/:id',{id:'@id'}); }]); service.factory('loadRecipes',['Recipe','$q',function(Recipe,$q){ return function(){ ... } }]); service.factory('loadRecipe',['Recipe','$q','$route','$routeParams',function(Recipe,$q,$route,$routeParams){ return function(){ ... } }]);
//myRecipe.directive模塊用來定義指令
var directive = angular.module('myRecipe.directive',[]); directive.directive('focus',function(){ return { ... } }); directive.directive('loading',['$rootScope',function($rootScope){ return { ... } }]);
//在myRecipe中就可以使用myRecipe.service和myRecipe.directive裏面的服務和指令了.
var app = angular.module('myRecipe',['myRecipe.service','myRecipe.directive']);
4. 可以在自己擴展的模塊下添加控制器:
myAppModule.controller('TextController',function($scope){
...
});
$scope.text = messages;
text是$scope作用域下的一個對象,但是message卻是一個外部的對象,使用這種方式來定義作用於下的對象,而不是直接在作用域中聲明,這樣,同一個變量,可以在多個模塊或多個控制器中被使用
相關代碼託管:
https://github.com/OOP-Code-Bunny/angular
