Question

我不明白为什么我的路由不起作用，＆＃34;否则＆＃34;案例工作正常，但当我点击其中一个菜单时，路由不会自动加载相关页面。任何人都可以帮我理解我的代码有什么问题吗？

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

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>

如果您要删除此前缀，请参阅this answer。

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>

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

AngularJS的路由问题

2 个答案: