CODEWITHSUNDEEP
javascriptangularjsyeomanyeoman-generator
Kriszta
Kriszta

Reputation: 720

How to use angularJS with Yeoman's webapp-generator

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?

Upvotes: 0

Views: 140

Answers (2)

ccjmne
ccjmne

Reputation: 9618

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 distribution
  • 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 requires 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!

Upvotes: 0

Alisson Alvarenga
Alisson Alvarenga

Reputation: 658

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.

Upvotes: 1

Related Questions