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的路由問題

回答

相關問題