각도 ui 라우터의 여러보기에서 중첩 된보기를 만드는 방법은 무엇입니까?

Question

내 앱은 매우 간단합니다. 헤더와 본문이 포함 된 홈 페이지가 있습니다. 본문 섹션에서 로그인 페이지를 표시하고 URL이 '암호/잊어 버림'으로 변경되면 암호 재설정 양식을 표시합니다. 내 템플릿 :

index.html을 :

<header ui-view="header"> 
</header> 
<div class="container-fluid"> 
    <div class="row"> 
     <div ui-view="main"> 
     </div> 
    </div> 
</div> 

home.html을 :

$locationProvider.html5Mode({enabled: true, requireBase: false}); 
$stateProvider.state('home', { 
    url: '/', 
    views: { 
     'header': { 
     templateUrl: '/header.html' 
     }, 
     'main': { 
      templateUrl: '/home.html' 
     } 
} 
}).state('home.forgetPassword', { 
    url: '/password/forget', 
    templateUrl: '/forgetPassword.html', 
}); 

이제 때

<div ui-view> 
    </div> 

및 UI 라우터 설정이 있습니다 나는 "/ 비밀 번호/잊어 버려"아무것도 happe 이동 n 및 index.html이 (가) 표시됩니다. 경로가 "/ password/forget"으로 변경되면 forgetPassword.html을 표시하려고합니다. UI 라우터의 문서에서이 코드를 다음

는

Answer 1

문제가 해결되었습니다. 부모 상태의 /에 대한 것이므로 하위 상태에서 반복합니다.

Answer 2

:

myApp.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('state1', { 
     url: "/state1", 
     templateUrl: "partials/state1.html" 
    }) 
    .state('state1.list', { 
     url: "/list", 
     templateUrl: "partials/state1.list.html", 
     controller: function($scope) { 
     $scope.items = ["A", "List", "Of", "Items"]; 
     } 
    }) 
    .state('state2', { 
     url: "/state2", 
     templateUrl: "partials/state2.html" 
    }) 
    .state('state2.list', { 
     url: "/list", 
     templateUrl: "partials/state2.list.html", 
     controller: function($scope) { 
     $scope.things = ["A", "Set", "Of", "Things"]; 
     } 
    }); 
}); 

내가 뭘 제안하는 것은 처음 '암호' 상태를 만드는 것입니다.

은 다음 해결책을 시도해보십시오

$stateProvider.state('home', { 
    url: '/', 
    views: { 
     'header': { 
     templateUrl: '/header.html' 
     }, 
     'main': { 
      templateUrl: '/home.html' 
     } 
} 
}).state('password', { 
    url: '/password', 
    templateUrl: '/password.html', 
}).state('password.forgetPassword', { 
    url: '/forget', 
    templateUrl: '/forgetPassword.html', 
}); 

지금은 파일 'password.html' 만들기, 나중에에이 '/ 암호'보기 위해 유용 할 수 있습니다.