web-dev-qa-db-fra.com

Création de fonctions de contrôleur communes

Comment puis-je créer une sorte de bundle d'utilitaires qui serait accessible à partir de tous mes contrôleurs?

J'ai ce code d'itinéraire dans mon module principal:

'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'});
}]);

Je veux une fonction qui peut être commune à HomeCtrl, AdminCtrl et MainAppCtrl.

Comment dois-je le faire dans AngularJS?

javascriptangularjswebangularjs-service
40
Shlomi Schwartz

La façon de définir le code commun dans angular est via les services.

Vous définiriez un nouveau service comme ceci:

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

Dans votre contrôleur, vous injecteriez ce service.

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

Incluez simplement CommonCode comme argument pour la fonction de votre contrôleur .. Angular se chargera de l'injecter pour vous (Lisez sur Injection de dépendance ..pour comprendre ce qui se passe ici.)

63
ganaraj

Juste pour mettre à jour la réponse précédente (qui définit uniquement ce qu'est factory), il y a 3 façons de injecter des dépendances (définir le code commun) dans AngularJS:

  • Fournisseurs
  • Des usines
  • Prestations de service

Je ne parlerai pas beaucoup du prestataire car c'est une méthode plus laborieuse pour l'injection de dépendance. Cependant, cette page explique très bien comment ils fonctionnent.

Techniquement, service et usine sont utilisés pour la même chose. Il s'avère qu'un service est une fonction constructeur alors qu'une usine ne l'est pas.

De ce message :

module.service( 'serviceName', function );

Lorsque vous déclarez serviceName comme argument injectable, vous recevrez une instance de la fonction .

module.factory( 'factoryName', function );

Lorsque vous déclarez factoryName comme argument injectable, vous recevrez la valeur renvoyée en appelant la référence de fonction passée à module.factory .

Vous pouvez utiliser celui que vous préférez et obtenir le même résultat .

Voici deux codes faisant exactement la même chose via service d'abord, puis factory:

Syntaxe du service 

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

Syntaxe d'usine 

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