AngularJS（二）创建模块

来源：互联网发布：启示录2知乎编辑：程序博客网时间：2024/06/14 22:32

转载出处：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

阅读全文

0 0