각도 UI 라우터 - 동적 콘텐츠가있는 고정 메뉴

Question

일부 입력 및 버튼이 포함 된 고정 톱 메뉴가있는 페이지를 만들어야합니다.

어떤 데이터가 입력되고 어떤 버튼을 눌렀는 지에 따라 데이터가있는지도가 메뉴 아래에 표시됩니다.

메뉴는 항상 표시되며지도 만 업데이트됩니다.

ROUTE 나는 단지 "를 선택하세요 무엇인가"가 아니라 메뉴를 볼 수있는 순간을 위해

$stateProvider 
.state('login', { 
    url : '/login', 
    templateUrl : 'app/login/login.html', 
    controller : 'LoginController' 
}) 
.state('home', { 
    url : '/home', 
    templateUrl : 'app/home/home.html' 
}) 
.state('menu', { 
    url : '', 
    templateUrl : 'app/menu/menu.html', 
    parent : 'home' 
}); 

home.html을

<div ui-view="menu"></div> 

<h1 class="ui huge header"> 
    Please select something 
</h1> 

.

그런 다음 어떻게 "필요한 것을 선택하십시오"를 필요한 맵으로 바꿀 수 있습니까? 기본보기를 사용할 수 있습니까? 집에 착륙 할 때 나는

여기에 편집 내가 index.html을

답변 후 가지고

ROUTE

$stateProvider 
.state('login', { 
    url : '/login', 
    views : { 
     'login' : { 
      templateUrl : 'app/login/login.html', 
      controller : 'LoginController' 
     } 
    } 
}) 
.state('home', { 
    url : '/home', 
    views : { 
     'menu' : { 
      templateUrl : 'app/menu/menu.html' 
     }, 
     'content' : { 
      templateUrl : 'app/home/home.html', 
     } 
    } 
}) 
.state('home.other', { 
    url : '/other', 
    views : { 
     'content@' : { 
      templateUrl : 'app/home/home.html' 
     } 
    } 
}); 

것입니다 메시지가 아닌지도를 볼 수

<div ui-view="login"></div> <div ui-view="menu"></div> <div ui-view="content"></div> 

잘 작동하지만 최선의 방법은 무엇입니까? 다른 컨텐트가 너무 많아서 모든 국가의 메뉴 뷰를 복제해야합니까?

레이아웃이 다른 페이지 (메뉴 및 콘텐츠 제외)가있는 경우 index.html에 새 <div ui-view="list"></div>을 추가해야합니까?

에 한번 더 나은 UI 라우터에서 기존 솔루션을 이해하는 Nested views이 문서를 읽을 수있는 질문 업데이트에 따라

Answer 1

편집을 할. 여기

는 경로의 중복을 피하기 위해 무엇을 할 수 있는지 예입니다

$stateProvider 
.state('login', { 
    url: '/login', 
    views: { 
     'login': { 
      templateUrl: 'app/login/login.html', 
      controller: 'LoginController' 
     } 
    } 
}) 
.state('menu', { 
    url: '/menu', 
    templateUrl: 'app/menu/menu.html' 
}) 
.state('menu.content', { 
    views: { 
     'default': { 
      url: '/default', 
      template: '<h1>Please select something</h1>' 
     }, 
     'content1': { 
      url: '/content1', 
      templateUrl: 'app/content1/content1.html' 
     }, 
     'content2': { 
      url: '/content2', 
      templateUrl: 'app/content2/content2.html' 
     } 
    } 
}); 

읽고 내부와 왜 어떤 URL에서 이해하는 것이 매우 명확 볼 수 있듯이. 당신은 menu/content1이라는 URL을 가지고있을 것입니다. 귀하의 메뉴 아래에있는 것은 바로 지금 보이는 content1입니다.

Answer 2

다른 상태로 메뉴를 정의 할 필요없이 다른보기로 홈 상태에 추가하기 만하면됩니다.

<div ui-view="menu"></div> 
<div ui-view="home"></div> 

그리고 당신은보기를 (같은 메뉴를 유지)를 업데이트 할 때마다, 이런 것을보기의 상태를 만듭니다 :이이

.state('home', { 

    url: '/home', 
    views:{ 

     'menu': { 
      templateUrl: 'app/menu/menu.html' 
     }, 

     'home': { 
      templateUrl: 'app/home/home.html' 
     } 

    } 
}) 

그리고 변경하려면 HTML처럼

.state('home.newState', { 

    url: '/newState', 
    views:{ 
     'home@':{ 
      templateUrl: 'app/home/newState.html' 
     } 
    } 

}) 

이렇게하면 home.html 템플릿 대신 newState.html 템플릿을 추가하여 뷰를 업데이트하여 메뉴를 동일하게 유지합니다.