comment faire pour installer underscore.js dans mon angulaire de l'application?

J'ai utilisé yo-angulaire pour générer mon angularjs modèle avec bootstrap/grunt/bower. Je tiens également à utiliser le trait de soulignement dans l'application:

npm install underscore --save-dev

Dans le MainCtrl je suis d'appel underscore.js juste pour voir si ça marche:

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

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

Quand je lance l'application avec google Chrome, j'obtiens cette errmsg dans la 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">

Après cette erreur, j'ai ajouté le module de l'application de config:
'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: '/'
      });
  });

Maintenant j'obtiens cette erreur:

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.

Dernière chose que j'ai essayé était de l'ajouter à la index.html:

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

Cette résultats dans la même erreur que ci-dessus. Également obtenir un 404 pour le underscore.js?? Est-ce un gros problème de configuration ou autre chose?

Si vous l'avez installé via npm install underscore --save-dev alors vous aurez besoin d'utiliser quelque chose comme Browserify de l'utiliser dans le navigateur. Si vous ne voulez pas faire cela, alors vous devez installer via bower et inclure la balise script dans votre code html avant de l'inclure angulaire. Également déposer le --save-dev drapeau au lieu d'utiliser seulement --save puisqu'il n'est PAS un développement de la dépendance.

OriginalL'auteur Pindakaas | 2015-04-21

16

J'ai tendance à utiliser une constante pour ce genre de chose. C'est une approche simple et vous permet d'indiquer explicitement les dépendances de votre application.

Installer avec bower:
```
bower install underscore --save
```
De charger la bibliothèque avant angulaire:
```
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="app/scripts/app.js"></script>
```
Définir comme une constante (dans app/scripts/app.js par exemple):
```
application.constant('_',
    window._
);
```
Ensuite dans vos controllers/services:
```
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');
});
```
qui a travaillé mec merci
est-il une raison spécifique pour le déclarer comme une constante et de l'injecter où j'en ai besoin que de creer plus explicite code? Je peux l'utiliser dans le monde de l'amende par juste le chargement de la bibliothèque.
C'est certainement de bonnes pratiques pour rendre vos dépendances clair et pour éviter d'avoir des références à des objets globaux parsemé tout au long de votre code, mais comme vous le soulignez, il n'est pas nécessaire dans ce cas, car il est disponible sur window. Certains diront qu'il est encore moins le cas pour la déclaration d'une constante pour un omniprésente bibliothèque utilitaire comme trait de soulignement. Personnellement, je vous recommande juste d'entrer dans l'habitude de déclarer les dépendances clairement.

OriginalL'auteur djskinner

Créer un module avec le nom de underscore un module, puis vous pouvez passer votre demande et elle sera accessible. Actuellement, le trait de soulignement module n'est pas défini et par conséquent, vous obtenez cette erreur.

Votre application devient comme ceci:

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

djskinner 's réponse n'a pas fonctionné pour moi. Il avait besoin d'un module comme vous l'avez mentionné ici. Merci pour le partage @Jayram

OriginalL'auteur Jayram Singh

1

Voici comment vous le faites:lien
En gros, vous avez besoin d'ajouter angulaire de soulignement module qui agit comme un pont entre les deux.

OriginalL'auteur Simran kaur

Vous devez vous connecter pour publier un commentaire.