AngularJS 的路由问题

Question

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

这是路由部分相关的代码：

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'
    });
}]);

这是我放置链接的 HTML div:

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

这是我的完整代码Plunker

Answer 1

Since you are using 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>

工作 Plunker：https://plnkr.co/edit/GAob2u4MdnzXXltTZMg2?p=preview

AngularJS 的路由问题

Routing problems with AngularJS

javascript

angularjs

routing

angularjs-1.6