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.