我已经在主页中定义了我的控制器，但我仍然会收到这个错误。[$controller:ctrlreg]http://errors.angularjs.org/1.6.10/$controller/ctrlreg？p0=NavCtrl
app.module.js
var app = angular.module("myApp", ["ngRoute"]);
routeConfig.js
angular.module("myApp", ["ngRoute"]).config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'Home.html',
controller: 'HomeController'
})
.when('/blog', {
templateUrl: 'Blog.html',
controller: 'BlogController'
})
.otherwise({
redirectTo: '/home',
controller: 'HomeController',
});
});
TestScript.js
angular.module("myApp", ["ngRoute"]).controller('NavCtrl',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
$scope.loadHome = function () {
$location.url('/home');
};
$scope.loadBlog = function () {
$location.url('/blog');
};
}]);
angular.module("myApp", ["ngRoute"]).controller('HomeController', function ($scope, $compile) {
console.log('inside home controller');
});
angular.module("myApp", ["ngRoute"]).controller('BlogController', function ($scope, $compile) {
console.log('inside blog controller');
});
主页.html
<div>
Home Navigation panel.
</div>
Blog.html
<div>
Blog Navigation panel.
</div>
主页.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="Views/Config/app.module.js"></script>
<script src="Views/Directives/Ecommerce/controller.js"></script>
<script src="Views/Directives/Ecommerce/directive.js"></script>-->
<script src="TestScript.js"></script>
<link rel="stylesheet" href="Content/EcommerceStyleSheet.css" type="text/css" />
</head>
<body ng-controller="NavCtrl">
<!--<my-Directive></my-Directive>-->
<a href="#" ng-click="loadHome()">Home</a><br />
<a href="#" ng-click="loadBlog()">Blog</a>
<br />
<div ng-view></div>
</body>
</html>
如果我遗漏了什么，或者我需要注入一些东西来使路由工作，请提出建议
正如@Lex所说，请从TestScript.js中的所有控制器中删除['ngRoute']，并在MainPage.html中包含/取消注释app.module.js和routeConfig.js脚本
这样，如果把所有的东西放在一起，你就可以取得这样的成就；
var app = angular.module("myApp", ["ngRoute"]); // from app.module
angular.module("myApp", ["ngRoute"]).config(function ($routeProvider) { // from routeConfig
$routeProvider
.when('/home', {
templateUrl: 'Home.html',
controller: 'HomeController'
})
.when('/blog', {
templateUrl: 'Blog.html',
controller: 'BlogController'
})
.otherwise({
redirectTo: '/home',
controller: 'HomeController',
});
});
angular.module("myApp").controller('NavCtrl',
['$scope', '$location', function ($scope, $location) { // from TestScript
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
$scope.loadHome = function () {
$location.url('/home');
};
$scope.loadBlog = function () {
$location.url('/blog');
};
}]);
angular.module("myApp").controller('HomeController', function ($scope, $compile) {
console.log('inside home controller');
});
angular.module("myApp").controller('BlogController', function ($scope, $compile) {
console.log('inside blog controller');
});