AngularJS 学习笔记---Module

What is a Module?

You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

Why?

Most applications have a main method that instantiates and wires together the different parts of the application.

Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:

• The declarative process is easier to understand.
• You can package code as reusable modules.
• The modules can be loaded in any order (or even in parallel) because modules delay execution.
• Unit tests only have to load relevant modules, which keeps them fast.
• End-to-end tests can use modules to override configuration.

The Basics

I'm in a hurry. How do I get a Hello World module working?

<div ng-app="myApp">
  <div>
    {{ 'World' | greet }}
  </div>
</div>

// declare a module
var myAppModule = angular.module('myApp', []);

// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
 return function(name) {
    return 'Hello, ' + name + '!';
  };
});

it('should add Hello to the name', function() {
  expect(element(by.binding("'World' | greet")).getText()).toEqual('Hello, World!');
});

Important things to notice:

• The Module API
• The reference to myApp module in <div ng-app="myApp">. This is what bootstraps the app using your module.
• The empty array in angular.module('myApp', []). This array is the list of modules myApp depends on.

Recommended Setup

While the example above is simple, it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:

• A module for each feature
• A module for each reusable component (especially directives and filters)
• And an application level module which depends on the above modules and contains any initialization code.

You can find a community
style guide to help yourself when application grows.

The above is a suggestion. Tailor it to your needs.

The angular.module is a global place for creating, registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.

Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module

Module

A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the$injector.

// Create a new module
var myModule = angular.module('myModule', []);

// register a new service
myModule.value('appName', 'MyCoolApp');

// configure existing services inside initialization blocks.
myModule.config(['$locationProvider', function($locationProvider) {
  // Configure existing providers
  $locationProvider.hashPrefix('!');
}]);

Then you can create an injector and load your modules like this:

var injector = angular.injector(['ng', 'myModule'])

However it's more likely that you'll just use ngApp or angular.bootstrap to simplify this process for you.

Usage

angular.module(name, [requires], [configFn]);

Arguments

Param	Type	Details
name	string	The name of the module to create or retrieve.
requires (optional)	!Array.<string>=	If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.
configFn (optional)	Function=	Optional configuration function for the module. Same as Module#config().

Returns

angular.Module

new module with the angular.Module api.

转载于:https://my.oschina.net/weaver/blog/685451