Użyj podkreślenia w kontrolerach Angular

126

Jak używać biblioteki podkreślenia w kontrolerach angularjs?

W tym poście: AngularJS limitTo przez ostatnie 2 rekordy ktoś zasugerował przypisanie zmiennej _ do rootScope, aby biblioteka była dostępna dla wszystkich zakresów w aplikacji.

Ale nie wiem, gdzie to zrobić. Chodzi mi o to, czy powinno to iść na deklarację modułu aplikacji? to znaczy:

var myapp = angular.module('offersApp', [])
            .config(['$rootScope', function($rootScope) { }

Ale gdzie w takim razie załadować underscore lib? Po prostu mam na mojej stronie indeksu dyrektywę ng-app i odwołanie do skryptu do bibliotek angular-js i underscore?

index.html:

<head>
</head>
<body ng-app="offersApp">
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/vendor/angular.js"></script>
<script src="scripts/vendor/underscore.js"></script>
...

Jak to osiągnąć?

javascript angularjs underscore.js

— Pablo
źródło

dobrze, co próbowałeś i nie zadziałało?

— mpm

Cóż, nie wiem, od czego zacząć. Jak powiązać dowolny typ plików <script> z częścią angularjs? (administratorzy, usługi, dyrektywy ... itd.). Czy jest jakieś wyrażenie typu require ('...')?

— Pablo

po prostu zadeklaruj odpowiedni znacznik skryptu z podkreśleniem w pliku html, tak jak w przypadku angular lub jquery.

— mpm

Czy będzie dostępny automatycznie pod znakiem _ ?? W jaki sposób??

— Pablo,

231

Kiedy włączysz podkreślenie, przyczepia się do windowobiektu, więc jest dostępna globalnie.

Możesz więc używać go z kodu Angular w takiej postaci, w jakiej jest.

Możesz również zapakować go w usługę lub fabrykę, jeśli chcesz, aby został wstrzyknięty:

var underscore = angular.module('underscore', []);
underscore.factory('_', ['$window', function($window) {
  return $window._; // assumes underscore has already been loaded on the page
}]);

Następnie możesz poprosić o _moduł w swojej aplikacji:

// Declare it as a dependency of your module
var app = angular.module('app', ['underscore']);

// And then inject it where you need it
app.controller('Ctrl', function($scope, _) {
  // do stuff
});

— satchmorun
źródło

27

Nie rozumiem, dlaczego miałbyś go wstrzyknąć, skoro jest już w globalnym zakresie okna.

— Walter Stabosz,

36

Prawdopodobnie z tych samych powodów, dla których wprowadzasz cokolwiek, zamiast umieszczać wszystko w zasięgu globalnym. Jednakże, ponieważ jest dużo mniej prawdopodobne, że będziesz chciał zastąpić swoją bibliotekę podkreśleń podczas testowania niż inne, bardziej szczegółowe zależności, zrozumiałe jest, że nie wydaje się to konieczne.

— fess.

50

jest to konieczne, gdy dodasz do pliku słowo „użyj ścisłego”. Ponieważ podkreślenie / lodash nie jest zdefiniowane, spowoduje to zgłoszenie błędu ReferenceError: _ nie jest zdefiniowane ... musisz go wstrzyknąć lub użyć okna._

— Shanimal

23

Ha! Chciałem zrobić zastrzyk, ponieważ jest fajny, dzięki za podanie mi prawdziwego powodu, @Shanimal.

— Aditya MP

10

możesz także chcieć wstrzyknąć _ w celu przetestowania. Jak

— zabrałbyś

32

Wdrożyłem sugestię @ satchmorun tutaj: https://github.com/andresesfm/angular-underscore-module

Aby z niego skorzystać:

Upewnij się, że w swoim projekcie umieściłeś podkreślenie.js
```
<script src="bower_components/underscore/underscore.js">
```
Zdobyć:
```
bower install angular-underscore-module
```

Dodaj angular-underscore-module.js do swojego głównego pliku (index.html)

<script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>

Dodaj moduł jako zależność w definicji aplikacji

var myapp = angular.module('MyApp', ['underscore'])

Aby użyć, dodaj jako wstrzykniętą zależność do kontrolera / usługi i jest gotowa do użycia

angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...

— ujednolicić
źródło

Wydaje się, że nie działa. Otrzymuję nieokreślony błąd:Uncaught ReferenceError: _ is not defined

— chovy

Dodałem wyjaśnienie: musisz dołączyć podkreślenie.js. To złącze pomaga tylko w używaniu go w usłudze. Zobacz odpowiedź @ satchmorun

— ujednolicić

31

Używam tego:

var myapp = angular.module('myApp', [])
  // allow DI for use in controllers, unit tests
  .constant('_', window._)
  // use in views, ng-repeat="x in _.range(3)"
  .run(function ($rootScope) {
     $rootScope._ = window._;
  });

Więcej informacji na ten temat można znaleźć na https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injectionrun .

— przewody
źródło

to wygląda dobrze, ale czy masz przykład? Muszę zmienić wszystkie wielkie litery na wielkie na pierwszym znaku tylko za pomocą _.capitalize ()

— Nate

2

Myślę, że to powinno działać <p>{{ _.capitalize('lalala') }}</p>?

— przewody

1

@LVarayut Nie wiem, dlaczego nie spróbować? (Mam od przeniósł się do ReactJS)

— przewody

Zamiast tego skorzystaj z usługi. Unikaj dodawania rzeczy do $ rootScope pomoże ci uzyskać lepszą wydajność.

— Tim Hong

Nie jestem pewien, co zrobiłem źle, ale nie udało mi się uruchomić części dotyczącej używania w widokach. Ale przekazanie usługi do kontrolera, a następnie do tpl przez $ ctrl działa.

— Olivvv

3

Możesz również przyjrzeć się temu modułowi pod kątem kątów

https://github.com/floydsoft/angular-underscore

— Paul Sheldrake
źródło

jak ładujesz to do kontrolera?

— chovy

3

Zawsze martwię się o moduły, które nie były aktualizowane od lat

— Tahir Khalid

1

Jeśli nie masz nic przeciwko używaniu lodash, wypróbuj https://github.com/rockabox/ng-lodash , całkowicie otacza lodash, więc jest to jedyna zależność i nie musisz ładować żadnych innych plików skryptów, takich jak lodash.

Lodash jest całkowicie poza zasięgiem okna i nie ma nadziei, że został załadowany przed Twoim modułem.

— Nick White
źródło

-2

możesz użyć tego modułu -> https://github.com/jiahut/ng.lodash

to jest dla lodashtak robiunderscore

— jiahut
źródło

1

czy możesz podać instrukcje użytkowania

— Paul Preibisch,