come installare underscore.js nella mia applicazione angolare?

Question

Ho usato yo-angolare per generare il mio modello angularjs con bootstrap/grunt/bower. Voglio anche usare sottolineatura nel app:

npm install underscore --save-dev 

Nel MainCtrl sto chiamando underscore.js solo per vedere se funziona:

angular.module('yomanApp') 
    .controller('MainCtrl', function ($scope) { 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'AngularJS' 
    ]; 

    _.each([1,2,3],console.log); 
    }); 

Quando eseguo l'applicazione con Chrome ottengo questo errmsg nella console:

ReferenceError: _ is not defined 
    at new <anonymous> (http://localhost:9000/scripts/controllers/main.js:18:5) 
    at invoke (http://localhost:9000/bower_components/angular/angular.js:4203:17) 
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4211:27) 
    at http://localhost:9000/bower_components/angular/angular.js:8501:28 
    at link (http://localhost:9000/bower_components/angular-route/angular-route.js:975:26) 
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9) 
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7768:11) 
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7117:13) 
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6996:30) 
    at $get.boundTranscludeFn (http://localhost:9000/bower_components/angular/angular.js:7135:16) <div ng-view="" class="ng-scope"> 

Dopo questo errore ho aggiunto il modulo alla configurazione app: 'use strict';

/** 
* @ngdoc overview 
* @name yomanApp 
* @description 
* # yomanApp 
* 
* Main module of the application. 
*/ 
angular 
    .module('yomanApp', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch', 
    'underscore' 

    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl' 
     }) 
     .when('/accordeon', { 
     templateUrl: 'views/accordeon.html', 
     controller: 'IssuesCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

Ora sto ottenendo questo errore:

Uncaught Error: [$injector:modulerr] Failed to instantiate module yomanApp due to: 
Error: [$injector:modulerr] Failed to instantiate module underscore due to: 
Error: [$injector:nomod] Module 'underscore' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

Ultima cosa che ho provato è stata aggiunta al index.html:

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

Il risultato è lo stesso errore come sopra. Anche ottenere un 404 per il underscore.js ?? Si tratta di un problema di configurazione grunt o altro?

Answer 1

tendo di utilizzare solo una costante per questo tipo di cose. È un approccio semplice e ti consente di dichiarare esplicitamente le tue dipendenze nella tua applicazione.

Installare con pergolato:

bower install underscore --save 

caricare la libreria prima angolare:

<script src="bower_components/underscore/underscore.js"></script> 
<script src="bower_components/angular/angular.js"></script> 
<script src="app/scripts/app.js"></script> 

definirlo come una costante (in app/scripts/app.js per esempio):

application.constant('_', 
    window._ 
); 

Poi, nel tuo controller/servizi:

application.controller('Ctrl', function($scope, _) { 
    //Use underscore here like any other angular dependency 
    var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}]; 
    $scope.names = _.pluck(stooges, 'name'); 
}); 

Answer 2

Creare un modulo con il nome di underscore un modulo e quindi è possibile passarlo nella propria applicazione e sarà accessibile. Attualmente il modulo di sottolineatura non è definito e quindi stai ricevendo questo errore.

La vostra applicazione diventa in questo modo:

var underscore = angular.module('underscore', []); 
     underscore.factory('_', function() { 
      return window._; //Underscore should be loaded on the page 
     }); 

     angular 
     .module('yomanApp', [ 
     'ngAnimate', 
     'ngCookies', 
     'ngResource', 
     'ngRoute', 
     'ngSanitize', 
     'ngTouch', 
     'underscore' 

     ]) 
     .config(function ($routeProvider) { 
     $routeProvider 
      .when('/', { 
      templateUrl: 'views/main.html', 
      controller: 'MainCtrl' 
      }) 
      .when('/about', { 
      templateUrl: 'views/about.html', 
      controller: 'AboutCtrl' 
      }) 
      .when('/accordeon', { 
      templateUrl: 'views/accordeon.html', 
      controller: 'IssuesCtrl' 
      }) 
      .otherwise({ 
      redirectTo: '/' 
      }); 
     }) 
.controller('MainCtrl', function ($scope, _) { 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'AngularJS' 
    ]; 

    _.each([1,2,3],console.log); 
    }); 

Answer 3

Ecco come procedere: link Fondamentalmente è necessario aggiungere il modulo di sottolineatura angolare che funge da ponte tra i due.