Jak Mogę dodać kilka małych funkcji użytkowych do mojej aplikacji AngularJS?

Edytuj 7/1/15:

Napisałem tę odpowiedź dość dawno temu i nie nadążam za dużo z angular przez jakiś czas, ale wydaje się, że ta odpowiedź jest nadal stosunkowo popularna, więc chciałem podkreślić, że kilka z punktu @nicolas robi poniżej są dobre. Po pierwsze, wstrzyknięcie $rootScope i dołączenie tam pomocników powstrzyma cię od dodawania ich dla każdego kontrolera. Również-zgadzam się, że jeśli to co dodajesz powinno być traktowane jako kanciaste usługi lub filtry, powinny być przyjęte do kodeksu w ten sposób.

Również, od obecnej wersji 1.4.2, Angular wyświetla API" Provider", które może być wstrzykiwane do bloków konfiguracyjnych. Zobacz te zasoby, aby uzyskać więcej:

Https://docs.angularjs.org/guide/module#module-loading-dependencies

AngularJS dependency injection wartości wewnątrz modułu.config

Nie sądzę, że będę aktualizować rzeczywiste bloki kodu poniżej, ponieważ ostatnio nie używam Angular i nie chcę ryzykować nowej odpowiedzi bez poczucia, że jest ona zgodna z nowymi najlepszymi praktykami. Jeśli ktoś inny czuje się na siłach, proszę bardzo.

Edytuj 2/3/14:

Po zastanowieniu się nad tym i przeczytaniu kilku innych odpowiedzi, myślę, że wolę odmianę metody podniesionej przez @ Brent Washburne i @Amogh Talpallikar. Zwłaszcza jeśli szukasz narzędzia takie jak isNotString () lub podobne. Jedną z wyraźnych zalet jest to, że możesz ponownie użyć ich poza kodem kątowym i możesz użyć ich wewnątrz funkcji konfiguracji (której nie możesz zrobić z usługami).

Biorąc to pod uwagę, jeśli szukasz ogólnego sposobu na ponowne wykorzystanie tego, co powinno być odpowiednio usługami, stara odpowiedź, myślę, że nadal jest 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...
   }]);

Kontroler.js:

angular.module('app.controllers', []).                                                                                                                                                                                  
  controller('firstCtrl', ['$scope', function($scope) {
    $scope.helpers = MyNamespace.helpers;
  });

Wtedy w Twoim częściowy można użyć:

<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>

Stara odpowiedź poniżej:

Jeśli chcesz korzystać z funkcji usługi w części html, powinieneś dodać je do zakresu kontrolera:

$scope.doSomething = ServiceName.functionName;

Wtedy w części możesz użyć:

<button data-ng-click="doSomething()">Do Something</button>

Oto sposób, w jaki możesz trzymaj to wszystko zorganizowane i wolne od zbyt wielu kłopotów: {]}

Rozdziel kontroler, usługę i Kod/konfigurację routingu na trzy pliki: Kontrolery.js, usługi.js i app.js. Moduł górnej warstwy to "app", który ma aplikację.kontrolery i aplikacja.usługi jako zależności. Następnie app.kontrolery i aplikacja.usługi mogą być deklarowane jako moduły w ich własnych plikach. Ta struktura organizacyjna pochodzi właśnie z Seed :

App.js:

 angular.module('app', ['app.controllers', 'app.services']).                             
   config(['$routeProvider', function($routeProvider) {
     // Routing stuff here...
   }]);  

Usługi.js:

 /* Generic Services */                                                                                                                                                                                                    
 angular.module('app.services', [])                                                                                                                                                                        
   .factory("genericServices", function() {                                                                                                                                                   
     return {                                                                                                                                                                                                              
       doSomething: function() {   
         //Do something here
       },
       doSomethingElse: function() {
         //Do something else here
       }
    });

Kontroler.js:

angular.module('app.controllers', []).                                                                                                                                                                                  
  controller('firstCtrl', ['$scope', 'genericServices', function($scope, genericServices) {
    $scope.genericServices = genericServices;
  });

Wtedy 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 jeden wiersz kodu do każdego kontrolera i możesz uzyskać dostęp do dowolnej funkcji usług wszędzie tam, gdzie ten zakres jest dostępny.