UI-Router 및 generator-angular를 사용하여 SPA 용 섹션을 사용하는 다중보기

UI 라우터의 다중보기 기능을 사용하여 SPA를 만들려고하지만 내 섹션이 페이지에 표시되지 않는 이유를 파악할 수 없습니다.UI-Router 및 generator-angular를 사용하여 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>

나는 일 동안이 문제에 붙어 봤는데 설명을 찾을 수 없습니다.

출처

2014-09-09 shklsw

나는 당신이하려고하는 것을 시연하는 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"; 
    });

, generator-angles은 다를 수 있지만 ui-router을 종속성으로 참조 할 때 ui.router으로 참조해야합니다.

마지막으로, 나는 당신이 당신의 state 및 url이 전환 있다고 생각 :

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

url 속성이 특정 상태로 이동하는 데 사용되는 것입니다. (거기에 템플릿 URL을 넣지 마십시오)

다른 모든 것들이 좋아 보였습니다. 제 Plunker을 검토 하시고 문제가 해결 되었으면합니다. 행운을 빕니다.

편집 감사에게, Plunker 링크를 당신이 각-fullstack에 발전기를 전환 여전히 문제가 무엇 이해할 수없는, 운없이 말했다 정확히 무슨 짓을 많이

출처

2014-09-09 04:14:40 TrazeK

TrazeK를 수정했습니다. 오류 : [$ injector : 모듈러] 상태 '주'가 이미 정의되었습니다 ... – shklsw

여기에 내가 현재 갖고있는 [PLunker] (http : // plnkr.co/edit/OsRs2PxgoUPxUR246nwQ?p=preview/ "Plunker") – shklsw

Plunker에서 'ng-app = "myApp"를' 및 ' 당신은 오직 하나만 필요로하고 나는 태그 안에있는 것을 개인적으로 사용할 것입니다. (에있는 것을 제거하십시오). 또한 각보기에 대한 컨트롤러가 정의되어 있는지 확인하십시오. – TrazeK

UI-Router 및 generator-angular를 사용하여 SPA 용 섹션을 사용하는 다중보기

답변

관련 문제