AngularJS的路由问题

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

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

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

来源

2017-08-21 Moksud Ahmed

[URL哈希爆炸的可能的复制（＃！/）前缀代替简单哈希（＃/）在Angular 1.6]（https://stackoverflow.com/questions/41226122/url-hash-bang-prefix-instead-of-simple-hash-in-angular-1-6） – Mistalis

您正在使用错误的控制器名称，而且@Mistalis告诉您必须在您的href中包含#!。如果你想删除！只需在配置中使用$locationProvider.hashPrefix('');即可。然后你可以使用您的href没有!

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

来源

2017-08-21 08:57:24 Vivz

我'对于AngularJS来说是新的，你有什么好的教程/例子可以让我更好地学习它？此外，如您所见，如果我在目录页面进行了一些更改，然后单击进入其他页面，返回后，所有更改都将被删除，还有什么方法可以保存更改？谢谢。 –

你可以在这里找到一些教程https://stackoverflow.com/tags/angularjs/info。更好的是去https://docs.angularjs.org/guide/concepts并学习。如果您需要数据保留，则应使用localstorage。 – Vivz

如果它帮助你@MoksudAhmed，你能标记答案被接受吗？ – Vivz

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。

来源

2017-08-21 08:52:27 Mistalis

AngularJS的路由问题

回答

相关问题