как установить underscore.js в мое угловое приложение?

Я использовал yo-angular для создания своего шаблона angularjs с помощью bootstrap/grunt/bower. Я также хочу использовать подчеркивание в приложении:

npm install underscore --save-dev

В MainCtrl я вызываю underscore.js, чтобы посмотреть, работает ли он:

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

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

Когда я запускаю приложение с Chrome, я получаю эту ошибку в консоли:

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

После этой ошибки я добавил модуль в конфигурацию приложения: '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: '/'
      });
  });

Теперь я получаю эту ошибку:

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.

Последнее, что я пробовал, это добавить его в index.html:

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

Это приводит к той же ошибке, что и выше. Также получите 404 для underscore.js?? Это проблема конфигурации ворчания или что-то еще?


npm angularjs bower gruntjs underscore.js
person Pindakaas    schedule 21.04.2015    source источник
comment
Если вы установили его через npm install underscore --save-dev, вам нужно будет использовать что-то вроде Browserify, чтобы использовать его в браузере. Если вы не хотите этого делать, вам нужно установить через Bower и включить тег script в свой html, прежде чем включать angular. Также отбросьте флаг --save-dev, вместо этого используйте только --save, так как это НЕ зависимость разработки.   -  person deowk    schedule 21.04.2015

Ответы (3)


arrow_upward
16
arrow_downward

Я склонен просто использовать константу для этого типа вещей. Это простой подход, который позволяет явно указывать зависимости в приложении.

Установить с беседкой:

bower install underscore --save

Загрузите библиотеку перед angular:

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

Определите его как константу (например, в app/scripts/app.js):

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

Затем в ваших контроллерах/сервисах:

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');
});
person djskinner    schedule 21.04.2015
comment
есть ли конкретная причина объявить его как константу и внедрить туда, где мне это нужно, кроме как для создания более явного кода? Я могу использовать его глобально, просто загрузив библиотеку. - person aiguofer; 25.08.2015
comment
Это, безусловно, хорошая практика, чтобы сделать ваши зависимости ясными и избежать ссылок на глобальные объекты, замусоренные в вашем коде, но, как вы указываете, в этом случае это не обязательно, потому что он доступен на window. Кто-то может возразить, что объявление константы для вездесущей служебной библиотеки, такой как подчеркивание, является еще менее вероятным. Лично я бы порекомендовал просто привыкнуть к четкому объявлению зависимостей. - person djskinner; 25.08.2015

arrow_upward
13
arrow_downward

Создайте модуль с именем underscore модуль, а затем вы можете передать его в свое приложение, и он будет доступен. В настоящее время модуль подчеркивания не определен, и поэтому вы получаете эту ошибку.

Ваше приложение становится таким:

    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);
  });
person Jayram    schedule 21.04.2015
comment
Ответ djskinner мне не помог. Ему нужен модуль, как вы упомянули здесь. Спасибо, что поделились этим @Jayram - person Sebastian Sastre; 04.05.2016

arrow_upward
0
arrow_downward

Вот как это сделать:ссылка В основном вам нужно добавить угловой модуль подчеркивания, который действует как мост между ними.

person S Khurana    schedule 09.06.2016
comment
ссылка умерла. Хорошей практикой является размещение ответа вместо ссылки на него. - person Larry Flewwelling; 04.06.2020