用<a href="/#/xyz> instead of <a ui-sref="primary"> using ui-router

Question

I'm using AngularJs V1.6. Ui- Router V 1.0.3

I've been trying to learn how to work with ui-router for the past few eeks and I came upon this code today which has me totally confused :-

Html side -

<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right"> 
    <li><a href="/#/login">Login</a></li> 
    <li><a href="/#/signup">Sign up</a></li> 
</ul> 

JS -

$stateProvider 
    .state('home', { 
    url: '/', 
    controller: 'HomeCtrl', 
    templateUrl: 'partials/home.html' 
    }) 
    .state('login', { 
    url: '/login', 
    templateUrl: 'partials/login.html', 
    controller: 'LoginCtrl', 
    resolve: { 
     skipIfLoggedIn: skipIfLoggedIn 
    } 
    }) 

This is code from Satellizer更改狀態。

我試圖複製，但它所作的只是結束了我展示我的工作目錄的文件夾結構在瀏覽器中。 不過，我使用的UI路由器可視化，並在單擊該路由，它的工作正常。我找不到任何這樣使用ui-router的示例，上面的代碼片段究竟是如何工作的？

我也看了here擊鍵

<a ui-sref="party">Go To Party</a> 

會把它變成

<a href="/party" ui-sref="party">Go To Party</a> 

在我們的瀏覽器。然而，在我發佈的例子中，href沒有ui-sref。再一次，究竟究竟發生了什麼或究竟發生了什麼？它只是在工作，因爲它檢索一個單獨的HTML文件？

Answer 1

WHE n使用你寫這個路由樣品

<a href="/home">Home </a> 

您必須編寫代碼的路由

$locationProvider.html5Mode(true) 

This link can help you

Answer 2

我試着複製它，但它所做的最終都是在瀏覽器中顯示我的工作目錄結構文件夾 。

發生這種情況是因爲您的問題中的第一個示例對生成的鏈接使用了哈希前綴，第二個示例對鏈接使用了html5Mode。

當您單擊用哈希前綴模式如一個鏈接。 #/home，該資源的請求由UI路由器在客戶機側處理，並且不被髮送到服務器。但是當你點擊一個沒有前綴的鏈接例如。 /home，請求發送到服務器。你的服務器需要了解這種類型的請求（查看下面引用的鏈接）。

默認模式作爲前綴生成#。如果你不希望有哈希前綴#在生成的鏈接，那麼你需要啓用HTML5Mode這樣的：

app.config(["$locationProvider", function($locationProvider) { 
    $locationProvider.html5Mode(true); 
}]); 

如果啓用該模式，則不要忘記告知角約根URL您應用程序通過添加以下到您的HTML文件頭部分：

<base href="/">

參考：

• Read more about how to configure your server to work with html5Mode here.

關於ui-sref指令：

的首選使用UI路由器在HTML模板是使用ui-sref這是結合一個鏈接，即錨標記（標記）的指示路線/狀態決議案的方式一個狀態。如果一個州有一個關聯的URL，該指令將自動生成，爲您更新href屬性。

這樣你的HTML模板只需指一個國家的名稱和鏈接解析爲你會做這是好的，如果將來你改變底層鏈路狀態，你的模板仍然可以工作。該指令使用$state.href()方法獲取鏈接值。

您可以直接使用錨標記中的關聯鏈接而不使用此僞指令。但是這樣做，如果在路由配置中更改url，您將始終需要修改鏈接。讓ui-router模塊可以幫助您管理這些，而無需編寫任何額外的代碼行並簡化狀態管理。

這個指令的用法是：

• ui-sref='stateName' - 導航到狀態，沒有PARAMS。 'stateName'可以是任何有效的絕對或相對狀態，遵循與$state.go()
• ui-sref='stateName({param: value, param: value})'相同的語法規則 - 使用參數導航到狀態。

例如：如果你的HTML有以下鏈接：

<a ui-sref="home">Home</a> 

生成的HTML（在預謀「＃」 Html5Mode關結果）將是繼提供路線的配置已命名爲home有效狀態：

<a href="#/home" ui-sref="home">Home</a> 

參考： - UI Router ui-sref directive