EDIT 7/1/15:
J'ai écrit cette réponse il y a assez longtemps et je n'ai pas beaucoup suivi angular depuis un moment, mais il semble que cette réponse soit encore relativement populaire, alors je voulais souligner que quelques-uns des points @nicolas les marques ci-dessous sont bonnes. D'une part, injecter $ rootScope et y attacher les helpers vous évitera d'avoir à les ajouter pour chaque contrôleur. Aussi - je conviens que si ce que vous ajoutez doit être considéré comme des services OU des filtres angulaires, ils doivent être adoptés dans le code de cette manière.
De plus, à partir de la version actuelle 1.4.2, Angular expose une API "Provider", qui est autorisée à être injectée dans les blocs de configuration. Consultez ces ressources pour en savoir plus:
https://docs.angularjs.org/guide/module#module-loading-dependencies
Injection de dépendance AngularJS de valeur à l'intérieur de module.config
Je ne pense pas que je vais mettre à jour les blocs de code réels ci-dessous, car je n'utilise pas vraiment activement Angular ces jours-ci et je ne veux pas vraiment risquer une nouvelle réponse sans me sentir à l'aise avec le fait qu'elle se conforme réellement au nouveau meilleur les pratiques. Si quelqu'un d'autre se sent à la hauteur, allez-y.
MODIFIER 2/3/14:
Après avoir réfléchi à cela et lu certaines des autres réponses, je pense en fait que je préfère une variante de la méthode évoquée par @Brent Washburne et @Amogh Talpallikar. Surtout si vous recherchez des utilitaires comme isNotString () ou similaire. L'un des avantages évidents ici est que vous pouvez les réutiliser en dehors de votre code angulaire et vous pouvez les utiliser à l'intérieur de votre fonction de configuration (ce que vous ne pouvez pas faire avec les services).
Cela étant dit, si vous cherchez un moyen générique de réutiliser ce qui devrait être correctement des services, je pense que l'ancienne réponse est toujours bonne.
Ce que je ferais maintenant, c'est:
app.js:
var MyNamespace = MyNamespace || {};
MyNamespace.helpers = {
isNotString: function(str) {
return (typeof str !== "string");
}
};
angular.module('app', ['app.controllers', 'app.services']).
config(['$routeProvider', function($routeProvider) {
// Routing stuff here...
}]);
controller.js:
angular.module('app.controllers', []).
controller('firstCtrl', ['$scope', function($scope) {
$scope.helpers = MyNamespace.helpers;
});
Ensuite, dans votre partiel, vous pouvez utiliser:
<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>
Ancienne réponse ci-dessous:
Il serait peut-être préférable de les inclure en tant que service. Si vous allez les réutiliser sur plusieurs contrôleurs, les inclure en tant que service vous évitera d'avoir à répéter le code.
Si vous souhaitez utiliser les fonctions de service dans votre partiel html, vous devez les ajouter à la portée de ce contrôleur:
$scope.doSomething = ServiceName.functionName;
Ensuite, dans votre partiel, vous pouvez utiliser:
<button data-ng-click="doSomething()">Do Something</button>
Voici un moyen de garder tout cela organisé et sans trop de tracas:
Séparez votre contrôleur, service et code / configuration de routage en trois fichiers: controllers.js, services.js et app.js. Le module de couche supérieure est "app", qui a app.controllers et app.services comme dépendances. Ensuite, app.controllers et app.services peuvent être déclarés en tant que modules dans leurs propres fichiers. Cette structure organisationnelle est juste tirée de Angular Seed :
app.js:
angular.module('app', ['app.controllers', 'app.services']).
config(['$routeProvider', function($routeProvider) {
// Routing stuff here...
}]);
services.js:
/* Generic Services */
angular.module('app.services', [])
.factory("genericServices", function() {
return {
doSomething: function() {
//Do something here
},
doSomethingElse: function() {
//Do something else here
}
});
controller.js:
angular.module('app.controllers', []).
controller('firstCtrl', ['$scope', 'genericServices', function($scope, genericServices) {
$scope.genericServices = genericServices;
});
Ensuite, dans votre partiel, vous pouvez utiliser:
<button data-ng-click="genericServices.doSomething()">Do Something</button>
<button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>
De cette façon, vous n'ajoutez qu'une seule ligne de code à chaque contrôleur et pouvez accéder à toutes les fonctions des services partout où cette portée est accessible.