如何在我的角度应用程序中安装underscore.js？

Pindakaas 发表于 Dev

花生酱

我用yo-angular用bootstrap / grunt / bower生成我的angularjs模板。我还想在应用程序中使用下划线：

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>

这将导致与上述相同的错误。还可以为underscore.js获取404 ？？这是配置问题吗？

杰斯金纳

我倾向于只将常量用于此类事情。这是一种简单的方法，可让您在应用程序中明确声明依赖项。

安装凉亭：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。