使用 angular ui-router 在索引中加载导航视图

Question

我试图保持我的 index.html 文件干净，并抽象出导航以及我在其中加载的部分内容。我想指定我的 nav.html 文件应该加载到每个页面并且有这样的东西：

index.html

...
<body ng-app="myApp">
  <div ui-view="views/nav.html"></div>
  <div ui-view=""></div>
</body>
...

app.js

...
  .config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'views/main.html',
        controller:'MainCtrl'
      })

      .state('about', {
        url: '/about',
        templateUrl: 'views/about.html',
        controller:'AboutCtrl'
      });
  });

这当然似乎不起作用，但我确信有办法做到这一点，但似乎找不到答案。谁能启发我？使用 Angular 1.3.0 和 ui-router 0.2.13 - angular 的新手，非常感谢任何帮助！

Answer 1

如果您只想在每个页面中包含导航栏，您应该使用此代码

<body ng-app="myApp">
  <div ng-include="'views/nav.html'"></div>
  <div ui-view=""></div>
</body>

Answer 2

经过更多研究，有一种方法可以在 ui-router 中执行此操作并将状态抽象出来。也许有人可以将其标记为重复，然后 link 回答这个问题：Angular ui router multiple named views for all states

使用 angular ui-router 在索引中加载导航视图

Load Nav view in index with angular ui-router

angularjs

angular-ui-router