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

あなたがやろうとしていることをデモするプランカーを作成しました。プランカーを簡単に作成できるように、エクストラ (ngAnimate、ngCookie など) を取り出しました。

ng-appマークアップに存在する宣言が1 つだけであることを確認してください。(これは通常 に入れられ<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プロパティは、その特定の状態に移動するために使用されるものです。(そこにテンプレートの URL を置かないでください)

あなたが持っていた他のすべては大丈夫に見えました。私のプランカーを確認してください。うまくいけばうまくいきます。幸運を。

編集固定プランカーリンク

于 2014-09-09T04:14:40.740 に答える