Creating common controller functions

问题

How do I create some sort of utils bundle that would be accessible from all my controllers?

I have this route code in my main module:

'use strict';

angular.module('lpConnect', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home', {template: 'views/home.html', controller: HomeCtrl}).
        when('/admin', {template: 'views/admin.html', controller: AdminCtrl}).
        when('/connect', {template: 'views/fb_connect.html', controller: MainAppCtrl}).
        otherwise({redirectTo: '/connect'});
}]);

I want a function that can be common to HomeCtrl, AdminCtrl and MainAppCtrl.

How should I do it in AngularJS?

回答1:

The way to define common code in angular is through Services.

You would define a new service like so :

.factory('CommonCode', function ($window) {
        var root = {};
        root.show = function(msg){
            $window.alert(msg);
        };
        return root;
    });

In your controller you would inject this service..like so

function MainAppCtrl($scope,CommonCode)
{
     $scope.alerter = CommonCode;
     $scope.alerter.show("Hello World");
}

Just include CommonCode as an argument to your controller function.. Angular will take care of injecting it for you ( Read on Dependancy Injection ..to understand what is happening here. )

回答2:

Just to update previous answer (which only define what factory is), there are 3 ways to inject dependencies (define common code) in AngularJS:

• Providers
• Factories
• Services

I will not talk much about provider because it is a more laborious method for dependency injection. However, this page explains very well how they work.

---

Technically, service and factory are used for the same thing. It turns out, a service is a constructor function whereas a factory is not.

From this post:

module.service( 'serviceName', function );

When declaring serviceName as an injectable argument you will be provided with an instance of the function.

module.factory( 'factoryName', function );

When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

---

You can use the one you prefer and obtain the same result.

Here is two codes doing exactly the same thing through service first, and then factory:

Service syntax

app.service('MyService', function () {
  this.sayHello = function () {
    console.log('hello');
  };
});

Factory syntax

app.factory('MyService', function () {
  return {
    sayHello: function () {
      console.log('hello');
    }
  }
});

来源：https://stackoverflow.com/questions/11324202/creating-common-controller-functions