AngularJS modules

module

We can think of modules in angular as containers for application components, such as controllers, services, filters, directives, etc.

 Use the "Hello World" example to understand how the module works.

 

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

 

// declare a module
var myAppModule = angular.module ('myApp', []);  
  
// Configure the module.  
// we will create a greeting  
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!');  
});  

In js, we define a module through the module in dulemoAPI, and add the greet filter to it.

 

 The second parameter of the module method is an array, which is used to declare other modules that the myApp module depends on. Here, the second parameter of angular.module('myApp', []) is an empty array, and myApp does not depend on any modules.

Start myApp with <div ng-app="myApp"> in the HTML template.

When constructing a complex application, we need to divide the application into relatively independent multiple modules according to the following methods:

Divide modules by feature

Encapsulate reusable components, especially directives, filters, etc., into modules

 Application-level modules depend on the above two types of modules and contain the initialization code of the application

  

<div ng-controller="XmplController">  
  {{ greeting }}  
</div>  

ngular.module('xmpl.service', [])  
  
  .value('greeter', {  
    salutation: 'Hello',  
    localize: function(localization) {  
      this.salutation = localization.salutation;  
    },  
    greet: function(name) {  
      return this.salutation + ' ' + name + '!';  
    }  
  })  
  
  .value('user', {  
    load: function(name) {  
      this.name = name;  
    }  
  });  
angular.module('xmpl.directive', []);  
  
angular.module('xmpl.filter', []);  
  
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter'])  
  
  .run(function(greeter, user) {  
    // this is part of the main method initialization code
    greeter.localize({  
      greeting: 'Hello'  
    });  
    user.load('World');  
  })  
  
  .controller('XmplController', function($scope, greeter, user){  
    $scope.greeting = greeter.greet(user.name);  
  });

  Modules have to be loaded and depended on

angular.module('myModule', []).  
config(function(injectables) { // provider-injector  
  // This is an example of a configuration block.  
  // You can have as many as you want.
  //Inject Providers (not instances) into the configuration block.
}).  
run(function(injectables) { // instance-injector  
  
});  

 Create and get modules

We create the myModule module with angular.module('myModule', []) or override myModule if the module already exists. The myNodule module can be obtained through angular.module('myModule').

var myModule = angular.module('myModule', []);  
  
// add some commands and services
myModule.service('myService', ...);  
myModule.directive('myDirective', ...);  
  
// Override myService and myDirective by creating a new module
var myModule = angular.module('myModule', []);  
  
// throws an error because myOtherModule has not been defined
var myModule = angular.module('myOtherModule');