각도 Js의 서식이있는 레이아웃

Question

저는 Js 앵글의 초보자이며 도움이 필요합니다/포인터. 응용 프로그램 (SPA)을 만들고 싶습니다. 응용 프로그램의 모든 페이지에는 머리글 막대가 있으며 머리글 막대에는 사용자가 데이터를 추가하고 검색 할 수있는 양식 (검색 막대)이 있습니다. 그러나 나는 접근 할 수 없다.

이 헤더가 내 앱의 모든 페이지에 나타나고 어떤 페이지에서나 검색 할 수 있어야합니다. 어떻게 접근해야합니까? 코드 반복없이 어떻게 할 수 있습니까? 나는 지시어를 만들고 모든 페이지에서 호출하고 싶지 않다는 것을 의미합니다. 적절한 방법이 있는지 알고 싶습니다.

응용 프로그램은 모든 페이지에 질문 입력 필드가있는 Quora와 비슷해야합니다.

각도로 순진하기 때문에 downvote하지 말고 좋은 도움이 필요합니다.

미리 감사드립니다.

Answer 1

ui-router을 검색하고 기본적으로 머리말과 꼬리말을 포함하는 주 상태와 주 상태의 하위 상태를 가지고 있습니다.

<header></header> 

<ui-view></ui-view> 

<footer></footer> 

헤더는 탐색 양식을 포함 할 수 있으며 모든 하위 상태는 ui-router을 체크 아웃 적이 <ui-view>

Answer 2

전원에로드됩니다

마크 업이 같은 것?

템플릿에 ui-view이라는 이름을 가진 여러 개의 레이아웃/루트 상태를 정의 할 수 있습니다. 레이아웃/루트 상태는 지속되는 요소 (예 : 검색 입력 필드)를 하나의보기로로드하고 하위 상태는 고유 한 페이지 내용을 다른보기로로드 할 수 있습니다.

ex. layout.html

<div class="layout"> 
    <div class="search" ui-view="search"></div> 
    <div class="content" ui-view="content"></div> 
</div> 

ex. (모듈의 config() 기능에서) 상태를 구성하는 구성으로

$stateProvider.state('root', { 
    url: '', 
    views: { 
    'main': { 
     templateUrl: 'layout.html' 
    }, 
    'search@root': { 
     template: '<input type="text" ng-model="search.input" />', 
     controller: ['$scope', function($scope){ 
      $scope.search = { 
       input: '' 
      }; 
     }] 
    } 
    } 
}); 

$stateProvider.state('root.page1', { 
    views: { 
    'content@root': { 
     template: '<p>This is the first page.</p>', 
    } 
    } 
}) 
.state('root.page2', { 
    views: { 
    'content@root': { 
     template: '<p>This is the second page.</p>' 
    } 
    } 
}); 

, 당신은 당신의 주요 index.html을에 가지고해야합니다 : 이 <div ui-view="main"></div>

Plunker Demo

Answer 3

내가 볼

간단한 방법이다 creator는 header.htm이고 ng-include를 사용하여 header.htm을 구현하면 모든 페이지에 헤더가 포함됩니다.