1

I've been trying to set up basic AngularJS functionality for a project but have been hitting a brick wall when it comes to including angular-route. Both are version 1.4.8. I'm currently using gulp-require to concatenate my JS, here's my main javascript file

//  =require ../components/jquery/dist/jquery.min.js

//  =require ../components/angular/angular.js
//  =require ../components/angular-route/angular-route.js

$(document).ready(function() {

  // =require app/app.js

}); //  Doc ready is done!

And my app.js file

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

app.controller("ctrl", ["$scope", 'ngRoute', function($scope) {

    $scope.test = "It works!";

}]);

I've checked and all the files are concatenating properly. The ng-app and ng-controller attributes are on my HTML file. I've tried adding and removing the ngRoute injection and switching the order of the files but to no avail. It's frustrating since I used Angular 1.4.5 in almost the exact same way without these issues popping up but I can't replicate the same here even when going back. But the {{test}} variable in my HTML is still not rendering, and basic operations like {{2 + 3}} aren't either.

EDIT: here is the link to the original error message I'm currently receiving: http://tinyurl.com/zx3k85f

EDIT 2: The parts of my HTML code that's calling the app and the controller:

<html lang="en" ng-app="myApp">
    <body ng-controller="ctrl">

    </body>
</html>

I'm using nunjucks for HTML dynamic generation, although I've changed the syntax for this so it doesn't conflict with Angular's double curly braces.

Max Antonucci
  • 11
  • 5

2 Answers2

2

You can't inject module as dependency inside controller, you should remove 'ngRoute' from the controller DI inline array.

app.controller("ctrl", ["$scope", , function($scope) {

Update

Basically the real problem is you are loading your angular component script using requirejs(lazily), so while you are having ng-app="myApp" with module name start looking for myApp module, and the module has not loaded therefore it throws an error .

So I'd recommend you to don't use ng-app directive to start angular on page load. Instead you should wait until all the scripts related to angular loaded, & then to bootstrap angular app lazily using angular.bootstrap method.

Code 

$(document).ready(function() {
   requirejs(["app/app.js"], function(util) {
      angular.bootstrap(document, ['myApp']);
   });
});
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • I've tried this but still wind up getting the same error. I'll update the original message to include the specific error message I'm getting if that helps. – Max Antonucci Jan 09 '16 at 03:26
  • I'm actually using gulp-include for file concatenation, although the issue of loading the angular scripts before page load was still there. I tried the above solution after adding requireJS but got an endless console.log error. I did more the //=require code for the angular scripts to the app.js file, so they're brought up after page load. No longer getting any errors which is great, but angular still isn't working since data-binding isn't functioning. – Max Antonucci Jan 09 '16 at 20:01
  • Nevermind, fixed a small syntax error and it's now working fine! Thank you very much for your help! – Max Antonucci Jan 09 '16 at 20:26
  • Np. Glad to help you..Thanks :) – Pankaj Parkar Jan 09 '16 at 20:30
0

ngRoute is a provider that needs to be configured in the module config section before being used. Using it within a controller does not make any sense. Here the version that will work:

angular.module('myApp', ['ngRoute']);

angular.module('myApp').controller("ctrl", ["$scope",function($scope) {

$scope.test = "It works!";

}]);

Moreover, you need to call your module using directive ng-app=myapp in the html element where you plan to render your app.

Ahmed Roshdy
  • 381
  • 6
  • 15