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＆amp; ui-router 0.2.13 - 对棱角分明的新人，非常感谢任何帮助！

Answer 1

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

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

Answer 2

经过一番研究，有一种方法可以在ui-router中完成这个并将状态抽象出来。也许有人可以将此标记为重复并链接到此问题：Angular ui router multiple named views for all states

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

2 个答案: