Utilice guiones bajos dentro de los controladores angulares

126

¿Cómo uso la biblioteca de subrayado dentro de los controladores angularjs?

En esta publicación: AngularJS limitTo por los últimos 2 registros alguien sugirió asignar una variable _ al rootScope para que la biblioteca esté disponible para todos los ámbitos dentro de la aplicación.

Pero no tengo claro dónde hacerlo. Quiero decir, ¿debería ir en la declaración del módulo de la aplicación? es decir:

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

Pero entonces, ¿dónde cargo lib de subrayado? ¿Acabo de tener en mi página de índice la directiva ng-app y la referencia del script para las bibliotecas angular-js y subrayado?

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>
...

¿Cómo logro esto?

javascript angularjs underscore.js Pablo
fuente
bueno, ¿qué intentaste y no funcionó?
mpm
Bueno, no sé por dónde empezar. ¿Cómo vinculo cualquier rey de archivos <script> con la parte angularjs? (controladores, servicios, directivas ... etc.). ¿Hay algún requerimiento ('...') como expresión?
Pablo
simplemente declare la etiqueta de script adecuada con guión bajo en su archivo html, como lo hizo con angular o jquery.
mpm
¿Estará disponible automáticamente bajo el carácter _? ¿¿Cómo??
Pablo

Respuestas:

231

Cuando incluye Underscore, se adjunta al windowobjeto y, por lo tanto, está disponible globalmente.

Para que pueda usarlo desde el código angular tal como está.

También puede envolverlo en un servicio o una fábrica, si desea que se inyecte:

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

Y luego puede solicitar el _en el módulo de su aplicación:

// 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
fuente
27
No entiendo por qué lo inyectarías cuando ya está en el ámbito de la ventana global.
Walter Stabosz
36
Probablemente por las mismas razones que inyectas algo, en lugar de poner todo en el ámbito global. Sin embargo, dado que es mucho menos probable que desee sustituir su biblioteca de guiones bajos durante las pruebas que otras dependencias más específicas, es comprensible que no parezca necesario.
Fess.
50
es necesario cuando agrega 'use estricto' a su archivo. Dado que el subrayado / lodash no está definido, arrojará ReferenceError: _ no está definido ... debe inyectarlo o usar window._
Shanimal
23
¡Decir ah! Quería hacer la inyección porque es genial, gracias por darme una razón real, @Shanimal.
Aditya MP
10
También es posible que desee inyectar _ en aras de la prueba. ¿Cómo haría para llevar la dependencia de subrayado a un entorno de conjunto de pruebas
Sunwukung
32

He implementado la sugerencia de @ satchmorun aquí: https://github.com/andresesfm/angular-underscore-module

Para usarlo:

  1. Asegúrese de haber incluido underscore.js en su proyecto

    <script src="bower_components/underscore/underscore.js">

  2. Consíguelo:

    bower install angular-underscore-module

  3. Agregue angular-underscore-module.js a su archivo principal (index.html)

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

  4. Agregue el módulo como una dependencia en la definición de su aplicación

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

  5. Para usar, agregue como una dependencia inyectada a su Controlador / Servicio y está listo para usar

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
unificar
fuente
No parece funcionar. Me sale un error indefinido:Uncaught ReferenceError: _ is not defined
chovy
Agregué la aclaración: debe incluir underscore.js. Este conector solo le ayuda a usarlo en un servicio. Ver la respuesta de @ satchmorun
unificar el
31

Yo uso esto:

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._;
  });

Consulte https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection a mitad de camino para obtener más información run.

alambres
fuente
esto se ve bien, pero ¿tienes un ejemplo? Necesito cambiar todo en mayúsculas a mayúsculas en el primer carácter solo usando _.capitalize ()
Nate
2
Creo que esto debería funcionar <p>{{ _.capitalize('lalala') }}</p>?
cables
1
@LVarayut No lo sé, ¿por qué no probarlo? (Desde entonces me mudé a ReactJS)
cables
Utilice el servicio en su lugar. Evite agregar cosas a su $ rootScope lo ayudará a tener un mejor rendimiento.
Tim Hong
No estoy seguro de lo que hice mal, pero no pude conseguir que funcionara la parte de "uso en vistas". Pero pasar el servicio al controlador y luego al tpl a través de $ ctrl funciona.
Olivvv
3

También puede echar un vistazo a este módulo para angular

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

Paul Sheldrake
fuente
¿Cómo se carga esta cosa en un controlador?
chovy
3
Siempre me preocupo por los módulos que no se han actualizado durante años
Tahir Khalid
1

Si no te importa usar lodash, prueba https://github.com/rockabox/ng-lodash, lo envuelve completamente, por lo que es la única dependencia y no necesita cargar ningún otro archivo de script como lodash.

Lodash está completamente fuera del alcance de la ventana y no "espera" que se haya cargado antes de su módulo.

Nick White
fuente