Angular JS Error: $injector:nomod Module Unavailable during routing

Question

So, I am really new to angular JS and I'm working on a project for a company with a team from my school as an internship. I have to get the routing working first though, and it just will not work no matter what I have tried. I tried it with angular JS 1.0.7 and with that I could get it to work, but with the newest version (1.5.7) I just can't after many many hours of trying. This is the error the console currently gives me:

Error: $injector:nomod Module Unavailable Module 'app' 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. The error originates from the line in index.html as far as I know, since the error disappears if i remove it, but the routing doesn't work then either.

I'd really appreciate any help with this. I know I probably missed something incredibly basic (and the code is probably pretty sloppy), but I just can't figure it out. Oh and by the way, I tried putting the content from app.js to index .html inside script tags and then it didn't give the error, but didn't display anything either, really weird. I have also tried many different ways to do routing as instructed by different tutorials or guides, but I still can't get it to work.

Code: Index.html (modified so as to not give way the name of the company etc.)




  
  
  
  
  
  
  
   
  
  
  
  
  




  
    
      
        
          
          Products and Company Info
        
      

    

    
        Howto
        Home
    
  




  
   
    App name

Code app.js:

var app = angular.module('mainApp', ['ngResource', 'ngRoute']);
app.run(function($rootScope) {

});

Code ctrl.js

app.controller("mainCtrl", function($scope) {
    $scope.firstName = "first name";
    $scope.lastName = "last name";
});

app.controller('howtoCtrl', function($scope) {
    $scope.message = 'How To guide here';   
});

Code routing.js:

// configure our routes
    app.config(function($routeProvider) {
        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'home.html',
            controller  : 'mainCtrl'
        })

        // route for the how to page
        .when('/howto', {
            templateUrl : 'howto.html',
            controller  : 'howtoCtrl'
        })

        // route for the test2 page
        .when('/testi2', {
            templateUrl : 'test2.html',
            controller  : 'test2Controller'
        });
    });

Edit: After changing ng-app="app" to ng-app="mainApp", I got the following errors

Final Edit: Thanks guys, it works now. The problem was first that ng-app="app" should have been ng-app"mainApp", and I forgot to include the folder to the address of the tempaltes in routing.js after I had originally moved the files to their own folder.

JulCh · Accepted Answer

You call in your html

but your app is named mainApp. Try to change

to

Angular JS Error: $injector:nomod Module Unavailable during routing

Answers (2)

Related Questions