用<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