8

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?

Improve this question
1
  • 1
    If you installed it via npm install underscore --save-dev then you will need to use something like Browserify to use it in the browser. If you don't want to do that then you need to install via bower and include the script tag in your html before you include angular. Also drop the --save-dev flag instead use only --save since it's NOT a development dependency. Commented Apr 21, 2015 at 9:29

3 Answers 3

Reset to default
16

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');
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

is there a specific reason to declare it as a constant and inject it where I need it other than to create more explicit code? I can use it globally just fine by just loading the library.
It's certainly good practice to make your dependencies clear and to avoid having references to global objects littered throughout your code but as you point out it is not necessary in this case because it is available on window. Some might argue that there is an even lesser case for declaring a constant for a ubiquitous utility library like underscore. Personally, I would recommend just getting into the habit of declaring dependencies clearly.
13

Create a module with the name of underscore a module and then you can pass it in your application and it will be accessible. Currently the underscore module is undefined and hence you are getting this errror.

Your app becomes like this:

    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);
  });
Improve this answer

1 Comment

djskinner 's answer didn't worked for me. It needed a module as you mentioned here. Thanks for sharing that @Jayram
0

Here's how you do it:link You basically need to add angular underscore module which acts as a bridge between the two.

Improve this answer

1 Comment

link died. It is good practice to post an answer instead of linking to one.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.