Angular UI Route/State 设计和实现无法正常工作答案

【问题标题】：Angular UI Route/State design and implementation not working correctlyAngular UI Route/State 设计和实现无法正常工作
【发布时间】：2016-04-14 11:31:49
【问题描述】：

我在一个页面上有 3 个 UI 视图，代码如下：

<div id="wrapper">

  <div ui-view="nav"></div>

  <div id="page-wrapper" class="gray-bg">
  	<div ui-view="topbar"></div>
    <div class="wrapper wrapper-content animated fadeInRight">
		<div ui-view></div>
    </div>
   	<div ui-view="footer"></div>
</div>

为部分应用配置的状态/路由如下所示：

angular.module('core').config(['$stateProvider',
  function ($stateProvider) {
    $stateProvider
      .state('core', {
        abstract: true,
        url: '/core',
        views: {
          'nav@': {templateUrl:'modules/core/client/views/partials/nav.view.html'},
          'topbar@': {templateUrl:'modules/core/client/views/partials/topbar.view.html'},
          'footer@': {templateUrl:'modules/core/client/views/partials/footer.view.html'}
        },
        data: {
          roles: ['super', 'admin', 'narc']
        }
      })
      .state('core.settings', {
        url: '/settings',
        views: {
          '': {templateUrl:'modules/narc/client/views/content/canvas.list.view.html'}
        },
        data: {
          roles: ['super', 'admin', 'narc']
        }
      });
  }
]);

我面临两个问题。

当导航中的链接设置为 ui-sref="core.settings" 并且点击链接，我在资源加载中看到 canvas.list.view.html，但它不会将其加载到主要的“未命名”视图中，我也用命名的 ui-view 尝试了这个，结果相同。
当点击相同的链接时，它会将 window.location 更改为配置中说明的 URL，但是如果我刷新页面，它会 404s 因为它引用的是状态而不是实际位置... 如果我手动输入 #!在 URL 前面，它会拉出一个空白页面（已加载导航、顶部栏和页脚，但未加载未命名视图。

感谢您的帮助！！

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

我想出了上面的＃2，通过改变

$locationProvider.html5Mode(true).hashPrefix('!')

到

$locationProvider.html5Mode(false).hashPrefix('!');

它允许实际复制/粘贴/共享网址，只要身份验证到位，它仍然可以工作......

我也发现#1，抽象的“父”状态需要一个模板：

template: '<ui-view/>'

这让一切顺利。是的！

【讨论】：