AngularUI 路由器 - 无法通过 URL 访问状态答案

【问题标题】：AngularUI Router - Unable to access States via URLAngularUI 路由器 - 无法通过 URL 访问状态
【发布时间】：2016-04-07 23:31:45
【问题描述】：

所以 AngularUI 路由器有问题。我遇到的问题是它无法通过输入 URL 或在非家庭状态时刷新来访问任何状态。返回的错误是 Cannot GET /state-name 但是 ui-sref="state-name" 工作得很好。

不使用 Node 服务器或 Express 路由，只使用 Angular 并使用 Gulp-Connect 运行 Web 服务器。

技术：

AngularJS 1.5.3
Angular UI 0.2.18
Gulp 3.9.1

Routes.js

angular.module('myApp').config(function(
  $httpProvider,
  $stateProvider,
  $locationProvider,
  $urlRouterProvider
){
  $locationProvider.html5Mode({enabled: true, requireBase: false});

  $stateProvider
    .state('home',{
      url:'/',
      templateUrl: 'path/to/home.tmpl.html'
  })
  .state('state-name',{
    url:'/state-name',
    templateUrl: 'path/to/state-name.tmpl.html'
  });
  $urlRouterProvider.otherwise('/');
});

我是否缺少一些允许刷新状态或通过 URL 导航的东西？

【问题讨论】：

州名是您所在州的名称，这与您的代码中url 选项指定的 URL 不同。你给ui-sref一个州名，它会生成一个指向相应URL的链接
为草率的代码道歉。所以我更新了代码以使其正确。现在的问题是我可以通过 ui-sref 访问链接，但仍然无法通过 url 访问。

标签： javascript angularjs angular-ui-router

【解决方案1】：

您应该有一个名为state-name 的状态才能访问它。从您的州提供者那里，我看不到任何名称为 state-name 的州。目前您的可用状态为home 和route_1。

要访问“状态名称”，您需要添加以下状态： .state('state-name',{ url:'/state-name', templateUrl: 'path/to/state-name.tmpl.html' })

【讨论】：

为草率的代码道歉。所以我更新了代码以使其正确。现在的问题是我可以通过 ui-sref 访问链接，但仍然无法通过 url 访问。

【解决方案2】：

要使用状态名称直接访问 URL，您需要使用 bang 表示法。例如：

For home: http://localhost/#!home
For state-name: http://localhost/#!state-name

当然，用你的主机 + 上下文 + 任何你需要的东西替换 http://localhost。

【讨论】：