如何在我的角度应用程序中安装underscore.js？ [英] how to install underscore.js in my angular application?

问题描述

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

  npm install下划线--save-dev 
  
在MainCtrl中，我调用underscore.js来查看它是否有效：
 
  $ b  pre $  angular.module（'yomanApp'）
 .controller（'MainCtrl'，function（$ scope）{
 $ scope.awesomeThings = [
 'HTML5 Boilerplate'，
'AngularJS'，
'AngularJS'
]; 
 
 _.each（[1,2,3]，console.log） ; 
}）; 
  

当我使用Chrome运行应用程序时，我在控制台中得到这个errmsg：

  ReferenceError：_未在新< anonymous>中定义
 （http：// localhost：9000 / scripts / controllers / main.js：18：5）
 at invoke（http：// localhost：9000 / bower_components / angular / angular.js：4203：17）$ b在http：// localhost：9000 / bower_components / angular / angular.js处的
：http：// localhost：9000 / bower_components / angular / angular.js：4211：27 $ b：8501： 
 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）
在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概述
 * @name yomanApp 
 * @description 
 *＃yomanApp 
 * 
 *应用程序的主模块。 
 * / 
 $ 
 .module（'yomanApp'，[
'ngAnimate'，
'ngCookies'，
'ngResource'，
'ngRoute'，
'ngSanitize'，
'ngTouch'，
'下划线'
 
]）
 .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：'/'
}）; 
}）; 
  

现在我收到了这个错误：



 未捕获错误：[$ injector：modulerr]由于以下原因未能实例化模块yomanApp：
错误：[$ injector：modulerr]由于以下原因而无法实例化模块下划线：
错误：[$ injector：nomod]模块下划线不可用！您拼错了模块名称或忘记加载模块名称。如果注册模块确保您指定依赖关系作为第二个参数。 
  

我试过的最后一件事是将它添加到index.html中：

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

这会导致与上述相同的错误。还得到一个404为underscore.js ??这是一个咕噜配置问题或其他什么？

解决方案

我倾向于使用一个常量来处理这种类型的事情。这是一种简单的方法，并允许您在应用程序中明确声明您的依赖项。

使用bower安装：

  bower install下划线--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 例如）：
$ b $ pre $ application.constant（'_'，
window._
）;


然后在您的控制器/服务中：

 application.controller（'Ctrl'，function（$ scope，_）{
 //在这里使用下划线和其他角度依赖关系一样
 var stooges = [{name ：'moe'，年龄：40}，{姓名：'larry'，年龄：50}，{姓名：'卷曲'，年龄：60}]; 
 $ scope.names = _.pluck（stooges， 'name'）; 
}）; 
  

I used yo-angular to generate my angularjs template with bootstrap/grunt/bower. I also want to use underscore in the app:

npm install underscore --save-dev

In the MainCtrl I am calling underscore.js just to see whether it works:

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

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

When I run the application with Chrome I get this errmsg in the 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">

After this error I added the module to the app 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: '/'
      });
  });

Now I am getting this error:

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.

Last thing I tried was adding it to the index.html:

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

This results in the same error as above. Also get a 404 for the underscore.js?? Is this a grunt configuration issue or anything else?

解决方案

I tend to just use a constant for this type of thing. It's a simple approach and allows you to explicitly state your dependencies in your application.

Install with bower:

bower install underscore --save

Load the library before angular:

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

Define it as a constant (in app/scripts/app.js for example):

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

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

这篇关于如何在我的角度应用程序中安装underscore.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！