javascript 无法实例化模块 ngRoute
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28252541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to instantiate module ngRoute
提问by Bonci Marco
why i have this error? this is my error: "Failed to instantiate module ngRoute"
为什么我有这个错误？这是我的错误：“无法实例化模块 ngRoute”
Details:
细节：
"Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=Rerp&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.11%2Fangular.min.js%3A17%3A350)"...
“未捕获的错误：[$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=Rerp&p1=Error%3A%2…gleapis.com%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.org/1.3.11/$injector/modulerr?p0=...)"
“由于以下原因无法实例化模块 TestApp：错误：[$injector:modulerr] http: //errors.angularjs.org/1.3.11/$injector/modulerr?p0=...)”
and
和
"Failed to instantiate module ngRoute due to: Error: [$injector:nomod] http://errors.angularjs.org/1.3.11/$injector/nomod?p0=ngR..."
“由于以下原因无法实例化模块 ngRoute：错误：[$injector:nomod] http://errors.angularjs.org/1.3.11/$injector/nomod?p0=ngR...”
HTML:
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.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/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.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script scr="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
APP.JS:
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");
});?
采纳答案by Bricktop
I fixed your issue, if you still need it:
我解决了你的问题，如果你仍然需要它：
app.js:
应用程序.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:
和 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.org/1.3.11/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/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.
问题是，您需要在头脑中而不是身体中获取两个脚本，以便在执行 angular 之前加载它们。此外，我修复了您的 $routeprovider，因此您可以正确调用 Mainctrl。
