Question

我正在尝试使用UI-Router的多个视图功能创建SPA，但无法弄清楚为什么我的部分不会显示在页面中。

这是我的应用设置：

    angular
    .module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ui-router'
    'ngSanitize',
    'ngTouch'
    ])
    .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/main');
    $stateProvider
    .state('/', {
    url: 'main',

    views: {
        'v1': {
            templateUrl: 'views/v1.html',
            controller: 'V1Ctrl'
        },

        'v2': {
            templateUrl: 'views/v2.html',
            controller: 'V2Ctrl'
        },
        'v3': {
            templateUrl: 'views/v3.html',
            controller: 'V3Ctrl'
        },
        'v4': {
            templateUrl: 'views/V4.html',
            controller: 'V4Ctrl'
        },
        'v5': {
            templateUrl: 'views/v5.html',
            controller: 'V5Ctrl'
        },
        'V6': {
            templateUrl: 'views/V6.html',
            controller: 'V6Ctrl'
        }
      }
     });
     $locationProvider.html5Mode(true);
     });

在我的main.html上：

     <section ui-view="v1" id="v1"></section>
     <section ui-view="v2" id="v2 ></section>
     <section ui-view="v3" id="v3" ></section>
     <section ui-view="v4" id="v4" ></section>
     <section ui-view="v5" id="v5" ></section>
     <section id="v6" ui-view="v6" ></section>

我已经坚持这个问题好几天了，找不到解释。

Answer 1

我已经创建了一个Plunker演示您要做的事情。为了便于制作Plunker，我拿出了额外的东西（ngAnimate，ngCookie等）。

确保标记中只存在一个ng-app声明。（这通常放在<html>中，但也可以放在<body>中

我不确定你是否在另一个文件中有这个，但是控制器需要实际定义：

  angular
  .module('myApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    /*********************** 
      Note the use of "template:" is just ease of creating the Plunker. You can use 
      "templateUrl:" and enter the path of your template file, and it will 
       work
    **********************/

    $stateProvider
      .state('main', {
        url: '/',
        views: {
          'v1': {
            template: 'V1',
            controller: 'V1Ctrl'
          },
          'v2': {
            template: 'V2',
            controller: 'V2Ctrl'
          },
          'v3': {
            template: 'V3',
            controller: 'V3Ctrl'
          },
          'v4': {
            template: 'V4',
            controller: 'V4Ctrl'
          },
          'v5': {
            template: 'V5',
            controller: 'V5Ctrl'
          },
          'v6': {
            template: 'V6',
            controller: 'V6Ctrl'
          }
        }
      });
    $urlRouterProvider.otherwise("/");

     $locationProvider.html5Mode(true);
  })
  .controller("V1Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V2Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V3Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V4Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V5Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V6Ctrl", function($scope) {
    $scope.foo = "bar";
  });

此外，生成器角度可能不同，但在将 ui-router 作为依赖项引用时，我认为您需要将其称为ui.router。

最后，我认为您的state和url已切换：

.state('main', {
        url: '/',

url属性将用于导航到该特定状态。（不要在那里放置模板网址）

你看到的其他一切都很好。请查看我的Plunker，希望您能解决问题。祝好运。

编辑修复了Plunker链接

使用UI-Router和generator-angular使用SPA的多个视图

1 个答案: