Use sublinhado dentro dos controladores angulares

126

Como uso a biblioteca de sublinhado nos controladores angularjs?

Nesta postagem: AngularJS limitTo nos últimos 2 registros, alguém sugeriu atribuir uma variável _ ao rootScope para que a biblioteca fique disponível para todos os escopos no aplicativo.

Mas não estou claro onde fazê-lo. Quero dizer, deve ir na declaração do módulo de aplicativo? ou seja:

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

Mas então, onde eu carrego a sublinhada lib? Eu só tenho na minha página de índice a diretiva ng-app e a referência de script para as bibliotecas angular-js e 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>
...

Como faço para conseguir isso?

javascript angularjs underscore.js Pablo
fonte
bem, o que você tentou e não funcionou?
mpm
Bem, eu não sei por onde começar. Como vincular qualquer rei de arquivos <script> à parte angularjs? (controladores, serviços, diretivas ... etc). Existe alguma exigência ('...') como expressão?
1919 Pablo Pablo
basta declarar a tag de script apropriada com sublinhado no seu arquivo html, como você fez com angular ou jquery.
mpm
Ele estará disponível automaticamente sob o caractere _ ?? Quão??
1919 Pablo Pablo

Respostas:

231

Quando você inclui o Sublinhado, ele se anexa ao windowobjeto e, portanto, está disponível globalmente.

Então você pode usá-lo no código Angular como está.

Você também pode envolvê-lo em um serviço ou fábrica, se desejar que ele seja injetado:

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

E então você pode solicitar o _módulo do seu aplicativo:

// 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
fonte
27
Não entendo por que você injetaria quando já está no escopo da janela global.
Walter Stabosz
36
Provavelmente pelas mesmas razões pelas quais você injeta qualquer coisa, em vez de colocar tudo no escopo global. No entanto, como é muito menos provável que você queira substituir sua biblioteca de sublinhado durante o teste do que alguma outra dependência mais específica, é compreensível que isso não pareça necessário.
confessar.
50
é necessário quando você adiciona 'use strict' ao seu arquivo. Desde sublinhado / lodash não for definido ele irá lançar ReferenceError: _ não está definido ... você tem que injetá-lo, ou o uso window._
Shanimal
23
Ha! Eu queria fazer a injeção porque é legal, obrigado por me dar uma verdadeira razão, @ Shanimal.
Aditya MP
10
você também pode injetar _ para fins de teste. Como você introduziria a dependência de sublinhado em um ambiente de suíte de testes
sunwukung
32

Eu tenho implementado @ sugestão de satchmorun aqui: https://github.com/andresesfm/angular-underscore-module

Para usá-lo:

  1. Verifique se você incluiu underscore.js no seu projeto

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

  2. Pegue:

    bower install angular-underscore-module

  3. Adicione angular-underscore-module.js ao seu arquivo principal (index.html)

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

  4. Adicione o módulo como uma dependência na sua definição de aplicativo

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

  5. Para usar, adicione como dependência injetada ao seu Controlador / Serviço e ele estará pronto para uso

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
unificar
fonte
Não parece funcionar. Eu recebo um erro indefinido:Uncaught ReferenceError: _ is not defined
chovy
Eu adicionei o esclarecimento: você precisa incluir underscore.js. Este conector apenas ajuda você a usá-lo em um serviço. Veja a resposta de @satchmorun
unifique
31

Eu uso isso:

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 sobre a meio caminho para obter mais informações sobre run.

fios
fonte
isso parece bom, mas você tem um exemplo? Eu preciso mudar todas as letras maiúsculas para superior no primeiro caractere usando apenas _.capitalize ()
Nate
2
Eu acho que isso deve funcionar <p>{{ _.capitalize('lalala') }}</p>?
fios
1
@LVarayut Eu não sei, por que não tentar? (Desde então, mudei para ReactJS)
fios
Por favor, use o serviço. Evite adicionar coisas ao seu $ rootScope para ajudá-lo a ter um melhor desempenho.
Tim Hong
Não tenho certeza do que fiz de errado, mas não consegui que a parte "use in views" funcionasse. Mas passar o serviço para o controlador e depois para o tpl através de $ ctrl funciona.
Olivvv
3

Você também pode dar uma olhada neste módulo para obter informações angulares.

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

Paul Sheldrake
fonte
como você carrega essa coisa em um controlador?
Chovy
3
Eu sempre se preocupar com módulos que não foram atualizados há anos
Tahir Khalid
1

Se você não se importa em usar o lodash, experimente https://github.com/rockabox/ng-lodash, que envolve o lodash completamente, portanto é a única dependência e você não precisa carregar outros arquivos de script, como o lodash.

O Lodash está completamente fora do escopo da janela e não "espera" que ele tenha sido carregado antes do seu módulo.

Nick White
fonte
-2

você pode usar este módulo -> https://github.com/jiahut/ng.lodash

isto é para o lodashmesmo aconteceunderscore

jiahut
fonte
1
você pode fornecer instruções de uso
Paul Preibisch