如果在页面的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