How to use angularJS with Yeoman's webapp-generator

Question

I'd like to use AngularJS in my Webapp generator setup. (I know there is an angular generator, but I prefer the folder structure of the Webapp generator).

I have installed Angular with bower install angular --save and have the reference to the js file in my index:

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="scripts/controllers/MainController.js"></script>
<!-- endbuild -->

When I run gulp serve, it all works perfectly.

But, when I run gulp default (and try to open the website elswhere, after copying the contents of the dist folder), i get an error injecting my controller:

Error: [$injector:unpr] Unknown provider: eProvider <- e <- MainCtrl
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20MainCtrl

Here's my folder structure:

app
-> scripts
->-> Controllers
->->-> MainController.js
->-> main.js

Here's main.js:

var app = angular.module('PentiaExercise', []);

And here's MainController.js:

/**
 * Created by kv on 24/02/16.
 */
app.controller('MainCtrl', function ($scope) {
  $scope.user = {};
  $scope.showSuccess = false;
  $scope.registerFormSubmitted = false;

  //Some other code...
});

What can be wrong? And/or what is the correct way to use Angular in a setup using Yeoman's webapp generator?

Answer 1

If you are minifying your code try this:

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.user = {};
  $scope.showSuccess = false;
  $scope.registerFormSubmitted = false;

  //Some other code...
}]);

When the code are minified the ...function ($scope) is changed to something like function (e) then the angular can find e to inject, but if you use like this: ['$scope', function ($scope) { ... the code minified will be something like this ['$scope', function (e) {. So when the angular do the inject he find the '$scope' and inject in e variable.

Answer 2

Alright, I'm gonna be doing lots of predictions here, but I'm somewhat confident I'm heading the right way.

Two things make me believe that your latter command, gulp default , minifies your js files:

• you're mentioning the dist folder, that is typically used for the dist ribution
• the error message refers to a e resource (that looks very much like a minified variable name).

What's going on, in my opinion, is that your code in main.js , somewhere used to contain something similar to:

myApp.controller('MainController', require('./scripts/Controllers/MainController.js'));

... and your MainController.js looks like the following:

function ($scope) {
    ...
}

What's happening, when your code is minified, is the following, in MainController.js :

function (e) {
    ...
}

So, one the require s are resolved, your compiled and minified script looks like:

a.controller('MainController', function (e) {
    ...
});

... and Angular is trying to provide your controller with the e service, which does not exist.

---

You have to declare your controller using explicit injection, when minifying your sources:

myApp.controller(MainController, ['$scope', require('./scripts/Controllers/MainController.js')]);

This way, Angular will still know what to provide your Controller with, regardless of how its parameters are named.

Cheers!