AngularJS的路由问题

Question

我不明白为什么我的路由不起作用，"否则"情况有效，但是当我单击其中一个菜单时，路由不会自动加载相对页面。 任何人都可以帮助我了解我的代码有什么问题吗？

这是相对于路由部分的代码：

var myColors = angular.module('myFirstModule', ['ngRoute']);
myColors.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html'
})
.when('/directory', {
templateUrl: 'directory.html',
controller: 'myFirstModule'
}).otherwise({
redirectTo: '/directory'
});
}]);

这是我放置链接的 HTMLdiv：

<ul>
<li><a href="#/home">Home </a></li>
<li><a href="#/directory">Directory</a></li>
</ul>    

这是我的完整代码的Plunker

Answer 1

由于您使用的是 AngularJS 1.6，因此您需要添加一个!是您的 href 路由。
例如：href="#/home"变得href="#!/home"。

<ul>
<li><a href="#!/home">Home</a></li>
<li><a href="#!/directory">Directory</a></li>
</ul>    

如果要删除此前缀，请参阅此答案。

Answer 2

您使用了错误的控制器名称，并且正如@Mistalis被告知的那样，您必须在href中包含#!。如果要删除 ！只需在配置中使用$locationProvider.hashPrefix('');即可。然后，您可以在没有!的情况下使用您的 href

.JS

var myColors = angular.module('myFirstModule', ['ngRoute']);
myColors.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html'
})
.when('/directory', {
templateUrl: 'directory.html',
controller: 'myFirstController' //use your controller name here
}).otherwise({
redirectTo: '/directory'
});
}]);

.HTML

<ul>
<li><a href="#!/home">Home </a></li>
<li><a href="#!/directory">Directory</a></li>
</ul> 

工作普伦克：https://plnkr.co/edit/GAob2u4MdnzXXltTZMg2?p=preview