使用 UI-Router 和 generator-angular 的 SPA 部分使用多个视图答案

【问题标题】：Multiple views using sections for SPA using UI-Router and generator-angular使用 UI-Router 和 generator-angular 的 SPA 部分使用多个视图
【发布时间】：2014-09-11 10:44:34
【问题描述】：

我正在尝试使用 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>

我在这个问题上纠结了好几天，找不到解释。

【问题讨论】：

标签： angularjs yeoman angular-ui-router multiple-views

【解决方案1】：

我创建了一个Plunker 来演示您正在尝试做的事情。我取出了额外的东西（ngAnimate、ngCookie 等）以便于制作 Plunker。

确保您的标记中只存在一个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";
  });

另外，generator-angular 可能会有所不同，但是当引用 ui-router 作为依赖项时，我相信您需要将其称为 ui.router。

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

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

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

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

编辑修复 Plunker 链接

【讨论】：

TrazeK，非常感谢，我完全按照你说的做了，没有任何运气，将生成器切换到 angular-fullstack，但仍然无法理解问题所在。在我的网络检查器中，我得到：错误：[$injector:modulerr] 无法实例化模块 myApp 由于：状态“主”已定义...
这是我目前在PLunker上拥有的内容
我注意到在你的 Plunker 中，ng-app="myApp" 在 <html ng-app="myApp"> 和 <body ng-app="myApp" id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 中都有。您只需要一个，我会亲自在标记中使用它。（删除中的那个）。另外，请记住确保为每个视图定义了控制器。
您的 plunker 还引用了 URL 属性中的 main.html。您应该将其更改为将用于导航到该状态的任何 URL。（例如“/”）
不，尝试了一切都没有运气，我的部分没有显示，尝试了很多关于 ui-router 的论坛和解决方案，但找不到好的答案。我真的不知道我还应该尝试什么，没有任何显示。