Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/csharp/325.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 如何在我的angular应用程序中安装下划线.js?_Angularjs_Gruntjs_Npm_Underscore.js_Bower - Fatal编程技术网

Angularjs 如何在我的angular应用程序中安装下划线.js?

Angularjs 如何在我的angular应用程序中安装下划线.js?,angularjs,gruntjs,npm,underscore.js,bower,Angularjs,Gruntjs,Npm,Underscore.js,Bower,我用bootstrap/grunt/bower生成了我的angularjs模板。我还想在应用程序中使用下划线: npm install underscore --save-dev 在MainCtrl中,我调用下划线.js只是为了看看它是否有效: angular.module('yomanApp') .controller('MainCtrl', function ($scope) { $scope.awesomeThings = [ 'HTML5 Boilerplate

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

npm install underscore --save-dev
在MainCtrl中,我调用下划线.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">
现在我得到了这个错误:

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.js??这是grunt配置问题还是其他问题?

创建一个名为
下划线的模块,然后您可以将其传递到应用程序中,并且可以访问该模块。当前下划线模块未定义,因此您将收到此错误

您的应用程序如下所示:

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

我倾向于用一个常数来表示这类事情。这是一种简单的方法,允许您在应用程序中显式地声明依赖关系

使用bower安装:

bower install underscore --save
在执行以下操作之前加载库:

<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="app/scripts/app.js"></script>
然后在控制器/服务中:

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');
});
以下是您的操作方法:
基本上,您需要添加角度下划线模块,该模块充当两者之间的桥梁。

如果通过
npm安装下划线--save dev
进行安装,则需要使用类似于Browserify的工具在浏览器中使用它。如果您不想这样做,那么您需要通过bower安装,并在包含angular之前在html中包含脚本标记。另外,请删除
--save dev
标志,而只使用
--save
,因为它不是开发依赖项。除了创建更明确的代码外,是否有特定的原因将其声明为常量并将其插入需要的位置?只需加载库,我就可以在全局范围内使用它。明确依赖关系,避免全局对象的引用散落在整个代码中,这当然是一个很好的做法,但正如您所指出的,在这种情况下,这是不必要的,因为它可以在
窗口中使用。有些人可能会争辩说,为普遍存在的实用程序库(如下划线)声明常量的可能性更小。就我个人而言,我建议养成明确声明依赖关系的习惯。djskinner的回答对我不起作用。正如你在这里提到的,它需要一个模块。感谢分享@Jayramlink去世的消息。张贴答案而不是链接到答案是一种很好的做法。
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');
});