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

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:

Verifique se você incluiu underscore.js no seu projeto

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

Pegue:
```
bower install angular-underscore-module
```

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

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

Adicione o módulo como uma dependência na sua definição de aplicativo
```
var myapp = angular.module('MyApp', ['underscore'])
```

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