angular学习笔记(二)-创建angular模块

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



  

posted @ 2014-05-06 11:13  诗&远方  阅读(5459)  评论(1)  编辑  收藏  举报