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-router可视化工具，在点击该路径时，它工作正常。我无法找到以这种方式使用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文件？
答案 0 :(得分：2)
我尝试复制它，但它所做的一切最终都显示了我的文件夹 浏览器中我的工作目录的结构。
这是因为您的问题中的第一个示例对生成的链接使用了hash-prefix，第二个示例使用html5Mode作为链接。
当您点击带有哈希前缀模式的链接时，例如。 #/home，该资源的请求由客户端由ui-router处理，不会发送到服务器。但是当你点击没有前缀的链接时，例如。 /home，请求转到服务器。您的服务器需要了解此类请求（请参阅下面的参考链接）。
默认模式生成#作为前缀。如果您不希望在生成的链接中使用哈希前缀#，则需要启用HTML5Mode，如下所示：
app.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
如果启用此模式，请不要忘记通过在HTML文件的head部分添加以下内容来通知Angular应用程序的根URL：
<base href="/">
参考：
关于ui-sref指令：
在HTML模板中使用ui-router进行路由/状态解析的首选方法是使用ui-sref，它是一个绑定链接的指令，即锚标记（标记）与状态。如果某个州有关联的URL，该指令将自动生成，为您更新href属性。
这样，您的HTML模板只需要引用一个州名称，就可以为您完成链接解析，这样就好像将来更改状态的基础链接一样，您的模板仍然有用。该指令使用$state.href()方法获取链接值。
您可以直接在锚标记中使用关联的链接，而无需使用此指令。但是，如果您在路由配置中更改网址，则始终需要修改链接。让ui-router模块帮助您管理它，而无需编写任何额外的代码行并简化状态管理。
该指令的用法是：
ui-sref='stateName' - 导航到州，没有参数。 'stateName'可以是任何有效的绝对或相对状态，遵循与$state.go() ui-sref='stateName({param: value, param: value})' - 使用参数导航到州。示例：如果您的html有以下链接：
<a ui-sref="home">Home</a>
如果您的路由配置具有名为home的有效状态，则生成的HTML（Html5Mode关闭结果前置为“＃”）将会跟随：
<a href="#/home" ui-sref="home">Home</a>
答案 1 :(得分：1)
使用时，您将编写此路由示例
<a href="/home">Home </a>
您必须在路由
中编写此代码 $locationProvider.html5Mode(true)