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

Я использовал yo- angular для создания моего шаблона angularjs с помощью бутстрапа /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, я получаю этот errmsg в консоли:

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) </anonymous><div ng-view="">
<p>После этой ошибки я добавил модуль в конфигурацию приложения:
'use strict';</p>
<pre class="prettyprint linenums">/**
 * @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:

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

3 ответа

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

Установить с помощью bower:

bower install underscore --save

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

Определите его как константу (например, в 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');
});


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

Ваше приложение будет выглядеть следующим образом:

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


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

licensed under cc by-sa 3.0 with attribution.