EDYCJA 7/1/15:
Napisałem tę odpowiedź dość dawno temu i od jakiegoś czasu niewiele nadążam za angularem, ale wygląda na to, że ta odpowiedź jest nadal stosunkowo popularna, więc chciałem zwrócić uwagę, że kilka punktów @nicolas sprawia, że poniżej są dobre. Po pierwsze, wstrzyknięcie $ rootScope i dołączenie tam pomocników pozwoli uniknąć konieczności dodawania ich dla każdego kontrolera. Ponadto - zgadzam się, że jeśli to, co dodajesz, powinno być traktowane jako usługi Angular LUB filtry, to należy je zaadaptować do kodu w ten sposób.
Ponadto, od aktualnej wersji 1.4.2, Angular udostępnia API „Provider”, które może być wstrzykiwane do bloków konfiguracyjnych. Zobacz te zasoby, aby uzyskać więcej informacji:
https://docs.angularjs.org/guide/module#module-loading-dependencies
Wstrzyknięcie zależności od AngularJS wartości wewnątrz module.config
Nie sądzę, żebym zaktualizował rzeczywiste bloki kodu poniżej, ponieważ obecnie nie używam aktywnie Angular i nie chcę ryzykować nowej odpowiedzi bez poczucia komfortu, że faktycznie dostosowuje się do nowego najlepszego praktyki. Jeśli ktoś inny czuje się na siłach, zrób to.
EDYCJA 2/3/14:
Po przemyśleniu tego i przeczytaniu niektórych innych odpowiedzi wydaje mi się, że wolę odmianę metody przedstawioną przez @Brent Washburne i @Amogh Talpallikar. Zwłaszcza jeśli szukasz narzędzi takich jak isNotString () lub podobnych. Jedną z wyraźnych zalet jest to, że możesz ich ponownie używać poza swoim kodem kątowym i możesz ich używać wewnątrz funkcji konfiguracyjnej (czego nie możesz zrobić z usługami).
Biorąc to pod uwagę, jeśli szukasz ogólnego sposobu ponownego wykorzystania tego, co powinno być usługami, myślę, że stara odpowiedź jest nadal dobra.
To, co bym teraz zrobił, to:
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;
});
Następnie w części możesz użyć:
<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>
Stara odpowiedź poniżej:
Najlepiej byłoby uwzględnić je jako usługę. Jeśli zamierzasz ponownie użyć ich na wielu kontrolerach, w tym jako usługa, unikniesz konieczności powtarzania kodu.
Jeśli chcesz korzystać z funkcji usług w części html, powinieneś dodać je do zakresu tego kontrolera:
$scope.doSomething = ServiceName.functionName;
Następnie w części możesz użyć:
<button data-ng-click="doSomething()">Do Something</button>
Oto sposób, w jaki możesz to wszystko zorganizować i uniknąć zbytniego kłopotu:
Podziel swój kontroler, usługę i kod / konfigurację na trzy pliki: controllers.js, services.js i app.js. Moduł górnej warstwy to „aplikacja”, która zawiera kontrolery aplikacji i usługi aplikacji jako zależności. Następnie app.controllers i app.services można zadeklarować jako moduły we własnych plikach. Ta struktura organizacyjna pochodzi właśnie z 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;
});
Następnie w części możesz użyć:
<button data-ng-click="genericServices.doSomething()">Do Something</button>
<button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>
W ten sposób dodajesz tylko jedną linię kodu do każdego kontrolera i masz dostęp do dowolnej funkcji usług, gdziekolwiek ten zakres jest dostępny.