CODEWITHSUNDEEP
javascriptangularjs
user7138187
user7138187

Reputation:

AngularJS - Failed to instantiate module

(Full error message below)

Causing all of my script to fail, and can't even run a simple $scope message.

JSFiddle: https://jsfiddle.net/cj5pe43k/5/.

HTML

<body ng-app="app" ng-controller="mainController">

    <div id="test" style="position:absolute;top:0;left:0;background:#000;width:100vw;height:100vh;color:#fff;display:flex;align-items:center;justify-content:center;"><p>{{message}}</p></div>

</body>

JS:

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

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl: 'index.html',
    controller: 'mainController'
  })

  .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })
})

app.controller('mainController', function($scope) {
  $scope.message = 'Main Controller Active';
})

Error: [$injector:modulerr] Failed to instantiate module justpayrollApp due to: [$injector:nomod] Module 'justpayrollApp' 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.

Upvotes: 0

Views: 72

Answers (3)

Varun Sukheja
Varun Sukheja

Reputation: 6516

I am not sure this wills solve the issues but one mistake that I can see is using same .when('/', in every route. In first case you can put when('/index' and in 2nd case when('/home' something like that

Check out this routing in angularjs

Upvotes: -2

Mistalis
Mistalis

Reputation: 18269

As you seems to be using the Angular native routing system, you don't need to include ngRoute. Furthermore, that is not exactly how you should use it: for each route, you are specifying a controller, so you don't have to specify it in the body element.

There are several things that which had to be resolved in your code, so here I fixed your Fiddle here:

Working Fiddle

Upvotes: 0

Maxwellt
Maxwellt

Reputation: 126

First, put angular.js script above the others.

Then, put your app script into the bottom of the body element of your page.

Then, delete one of two angular-resource.js dependencies you have. Should be only one instance of a dependency.

Upvotes: 0

Related Questions