EDIT 7/1/15:
Ich habe diese Antwort vor ziemlich langer Zeit geschrieben und habe eine Weile nicht viel mit Angular Schritt gehalten, aber es scheint, als ob diese Antwort immer noch relativ beliebt ist, deshalb wollte ich darauf hinweisen, dass ein paar Punkte @nicolas Marken unten sind gut. Zum einen müssen Sie durch das Injizieren von $ rootScope und das Anhängen der Helfer diese nicht für jeden Controller hinzufügen. Außerdem stimme ich zu, dass wenn Sie das, was Sie hinzufügen, als Angular-Dienste ODER Filter betrachtet werden sollen, diese auf diese Weise in den Code übernommen werden sollten.
Außerdem stellt Angular ab der aktuellen Version 1.4.2 eine "Provider" -API zur Verfügung, die in Konfigurationsblöcke eingefügt werden darf. Weitere Informationen finden Sie in diesen Ressourcen:
https://docs.angularjs.org/guide/module#module-loading-dependencies
AngularJS-Abhängigkeitsinjektion des Werts innerhalb von module.config
Ich glaube nicht, dass ich die eigentlichen Codeblöcke unten aktualisieren werde, da ich Angular heutzutage nicht wirklich aktiv benutze und keine neue Antwort riskieren möchte, ohne mich sicher zu fühlen, dass sie tatsächlich dem neuen Besten entspricht Praktiken Methoden Ausübungen. Wenn jemand anderes Lust dazu hat, machen Sie es auf jeden Fall.
EDIT 2/3/14:
Nachdem ich darüber nachgedacht und einige der anderen Antworten gelesen habe, denke ich tatsächlich, dass ich eine Variation der von @Brent Washburne und @Amogh Talpallikar vorgebrachten Methode bevorzuge. Besonders wenn Sie nach Dienstprogrammen wie isNotString () oder ähnlichem suchen. Einer der klaren Vorteile hierbei ist, dass Sie sie außerhalb Ihres Winkelcodes wiederverwenden und innerhalb Ihrer Konfigurationsfunktion verwenden können (was Sie mit Diensten nicht tun können).
Abgesehen davon, wenn Sie nach einer generischen Möglichkeit suchen, die eigentlich wiederverwendeten Dienste wiederzuverwenden, ist die alte Antwort meiner Meinung nach immer noch eine gute.
Was ich jetzt tun würde, ist:
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;
});
Dann können Sie in Ihrem Teil verwenden:
<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>
Alte Antwort unten:
Es ist möglicherweise am besten, sie als Service einzuschließen. Wenn Sie sie auf mehreren Controllern wiederverwenden möchten, müssen Sie den Code nicht wiederholen, wenn Sie sie als Dienst einbeziehen.
Wenn Sie die Servicefunktionen in Ihrem HTML-Teil verwenden möchten, sollten Sie sie dem Bereich dieses Controllers hinzufügen:
$scope.doSomething = ServiceName.functionName;
Dann können Sie in Ihrem Teil verwenden:
<button data-ng-click="doSomething()">Do Something</button>
Hier ist eine Möglichkeit, wie Sie alles organisiert und frei von zu viel Ärger halten können:
Trennen Sie Ihren Controller-, Service- und Routing-Code / Ihre Konfiguration in drei Dateien: controller.js, services.js und app.js. Das Modul der obersten Ebene ist "app", das app.controllers und app.services als Abhängigkeiten hat. Dann können app.controllers und app.services als Module in ihren eigenen Dateien deklariert werden. Diese Organisationsstruktur stammt nur aus 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;
});
Dann können Sie in Ihrem Teil verwenden:
<button data-ng-click="genericServices.doSomething()">Do Something</button>
<button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>
Auf diese Weise fügen Sie jedem Controller nur eine Codezeile hinzu und können auf alle Dienstfunktionen zugreifen, wo immer auf diesen Bereich zugegriffen werden kann.