why i have this error? this is my error: "Failed to instantiate module ngRoute"
Details:
"Uncaught Error: [$injector:modulerr] .3.11/$injector/modulerr?p0=Rerp&p1=Error%3A%2…gleapis%2Fajax%2Flibs%2Fangularjs%2F1.3.11%2Fangular.min.js%3A17%3A350)"...
and
"Failed to instantiate module TestApp due to: Error: [$injector:modulerr] .3.11/$injector/modulerr?p0=...)"
and
"Failed to instantiate module ngRoute due to: Error: [$injector:nomod] .3.11/$injector/nomod?p0=ngR..."
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="TestApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<!-- JQUERY -->
<script src=".1.3/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href=".3.0/css/bootstrap.min.css"/>
<script src=".3.0/js/bootstrap.min.js"> </script>
</head>
<body ng-controller="MainCtrl">
<div class="main">
<div class="container" ng-view="">
</div>
</div> <!-- fine main -->
<!-- ANGULAR -->
<script src="//ajax.googleapis/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script scr="//ajax.googleapis/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
APP.JS:
var TestApp = angular.module('TestApp', ['ngRoute']);
var configuration = {
appPartialPath: "/partial/",
appApiEntryPoint: "/api/"
};
TestApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/moduli', {
templateUrl: configuration.appPartialPath + 'moduli.html',
controller: 'ModuliCtrl'
})
.otherwise({
redirectTo: '/',
controller: 'MainCtrl'
});
}]);
/* CONTROLLER MAIN FORM */
TestApp.controller('MainCtrl', function ($scope) {
console.log("APP STARTED");
});
why i have this error? this is my error: "Failed to instantiate module ngRoute"
Details:
"Uncaught Error: [$injector:modulerr] http://errors.angularjs/1.3.11/$injector/modulerr?p0=Rerp&p1=Error%3A%2…gleapis.%2Fajax%2Flibs%2Fangularjs%2F1.3.11%2Fangular.min.js%3A17%3A350)"...
and
"Failed to instantiate module TestApp due to: Error: [$injector:modulerr] http://errors.angularjs/1.3.11/$injector/modulerr?p0=...)"
and
"Failed to instantiate module ngRoute due to: Error: [$injector:nomod] http://errors.angularjs/1.3.11/$injector/nomod?p0=ngR..."
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="TestApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<!-- JQUERY -->
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/js/bootstrap.min.js"> </script>
</head>
<body ng-controller="MainCtrl">
<div class="main">
<div class="container" ng-view="">
</div>
</div> <!-- fine main -->
<!-- ANGULAR -->
<script src="//ajax.googleapis./ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script scr="//ajax.googleapis./ajax/libs/angularjs/1.3.11/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
APP.JS:
var TestApp = angular.module('TestApp', ['ngRoute']);
var configuration = {
appPartialPath: "/partial/",
appApiEntryPoint: "/api/"
};
TestApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/moduli', {
templateUrl: configuration.appPartialPath + 'moduli.html',
controller: 'ModuliCtrl'
})
.otherwise({
redirectTo: '/',
controller: 'MainCtrl'
});
}]);
/* CONTROLLER MAIN FORM */
TestApp.controller('MainCtrl', function ($scope) {
console.log("APP STARTED");
});
- Thank's in advanced! – Bonci Marco Commented Jan 31, 2015 at 14:11
- Is not duplicate! Because my Angularjs is 1.3.11! – Bonci Marco Commented Jan 31, 2015 at 14:41
- Don't worry about it... :-) – Bonci Marco Commented Feb 1, 2015 at 20:09
1 Answer
Reset to default 3I fixed your issue, if you still need it:
app.js:
var testApp = angular.module('testApp', ['ngRoute']);
var configuration = {
appPartialPath: "/partial/",
appApiEntryPoint: "/api/"
};
testApp.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
});
/* CONTROLLER MAIN FORM */
testApp.controller('MainCtrl', function ($scope) {
console.log("APP STARTED");
});
and index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<title>Test</title>
<!-- JQUERY -->
<script src="https://code.angularjs/1.3.11/angular.js"></script>
<script src="https://code.angularjs/1.3.11/angular-route.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body ng-app="testApp">
<div class="main">
<div ng-view="" class="container"></div>
</div>
<!-- fine main -->
<script src="app.js"></script>
</body>
</html>
The problem was, that you need to get both scripts in your head instead of your body so they are loaded before angular is executed. Additionally I fixed your $routeprovider, so you Mainctrl gets called correctly.
Here is a Plunkr I made to show the result.