<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <strong>First name:</strong> {{personManagerInstance.getPersonFirstName()}}<br /> <strong>Last name:</strong> {{personManagerInstance.getPersonLastName()}}<br /> <strong>Full name:</strong> {{personManagerInstance.getPersonFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="personInstance.firstName"/></label><br /> <label>Set the last name: <input type="text" ng-model="personInstance.lastName"/></label> </div> </body> </html>
// Definition of a PersonManager object var PersonManager = function () { var fullNameSeparator = " "; return { setFullNameSeparator: function (separator) { fullNameSeparator = separator; }, $get: function (person) { return { getPersonFirstName: function () { return person.firstName; }, getPersonLastName: function () { return person.lastName; }, getPersonFullName: function () { return person.firstName + fullNameSeparator + person.lastName; } }; } }; }; // Initialization of the "mainModule" angular.module("mainModule", []) // Register an object instance as a value and name it "person" .value("person", { firstName: "", lastName: "" }) // Register a provider with person management functions and name it "personManager". // This provider requires the "person" object instance registered as a value in the // "mainModule" and that instance is passed to the constructor through Dependency Injection // simply writing "person" (the name of the registered value) as parameter name. .provider("personManager", PersonManager) // Initial configuration of "mainModule". To get an instance of the "personManager" provider // we simply add a parameter to the configuration function with the "Provider" suffix after // the name of the registered provider (for the registered "personManager" provider instance // we must write "personManagerProvider"). .config(function (personManagerProvider) { personManagerProvider.setFullNameSeparator("*"); }) // The run phase of the "mainModule" could be useful for any initialization procedure. // We get a reference to the "person" object simply specifying it as a parameter in the // "run" function. .run(function (person) { person.firstName = "John"; person.lastName = "Doe"; }) // Get the "person" registered object instance and the "personManager" service // instance (created by the "PersonManager" provider) through Dependency Injection. .controller("mainController", function ($scope, person, personManager) { // Set variables on the scope to reference the "person" object instance // and the "personManager" service from the HTML template. $scope.personInstance = person; $scope.personManagerInstance = personManager; });



A module gives us a config and a run function.

The config function is useful to configure providers before they're actually created. In the example, we register PersonManager as a provider (with the personManager name). The object returned by the PersonManager function contains the $get method to create a provider instance and a setFullNameSeparator method. The latter is useful to configure the provider instance before it actually gets created and it sets the fullNameSeparator that will be used in the getPersonFullName function.

It's important to note that the config function can accept some providers as parameters through Dependency Injection, but the name of the function arguments must be written with the Provider suffix (in the example we write personManagerProvider as argument of the config function because we want the personManager provider injected).

The run function could be useful to perform any kind of initialization after the objects instances registered in the module have already been created.

We can have multiple config and run functions in the same module.