1

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

我被这个问题困扰了好几天，找不到解释。

4

1 回答 1

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 链接

于 2014-09-09T04:14:40.740 回答