반응형
AngularJs(1.X) 부분 템플릿 포함
메인 레이아웃 파일에 있습니다.
<body>
<header id="header" ng-controller="HeaderController"></header>
<div class="container" ng-view></div>
디렉토리 구조에는 header.html 부분 템플릿이 있습니다.
이 템플릿을 앱에 포함하려면 어떻게 해야 하나요?컨트롤러 가공 후 angular에 자동으로 템플릿이 포함되어 있는 줄 알았는데 동작하지 않습니다.
헤더 노드는 이 파일의 내용으로 대체해야 합니다.
외부 파일에서 템플릿/html fragment를 포함하는 방법 중 하나는ng-includedirective(doc).
<ng-include src="'/path/to/the/header.html'"></ng-include>
또는
<div ng-include src="'/path/to/the/header.html'"></div>
부터Angular 2,ngInclude가 삭제되어 커스텀 디렉티브가 우선됩니다.이게 내가 생각해낸 방법이야
마스터 페이지에 연결되는 앱의 기본 구성 요소를 정의합니다.
@View({ templateUrl: 'client/app/layout/main.html', directives: [ROUTER_DIRECTIVES, Navigation, Footer] }) @Component({selector: 'app'}) @RouteConfig( routerConfig ) class MainComponent { }
그리고 이게 메인 템플릿이고
<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->
<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->
<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
- 의 정의
base.html본문 태그와 앱 태그가 포함됩니다.
<body> <app>Loading ...</app> </body>
- 이제 마지막 단계는 다음 컴포넌트를 정의하는 것입니다.
Navigation그리고.FooterMain Component와 같이 부분 템플릿을 가리킵니다.
언급URL : https://stackoverflow.com/questions/22329769/angularjs-1-x-include-partial-template
반응형
'programing' 카테고리의 다른 글
| Angular.js는 이전 방식으로 제출합니다. (0) | 2023.03.09 |
|---|---|
| react Link 컴포넌트에서 onClick 이벤트를 사용하는 방법 (0) | 2023.03.09 |
| 게시 또는 업로드에 실패했습니다.오류 메시지: "응답이 유효한 JSON 응답이 아닙니다." (0) | 2023.03.09 |
| wp_postmeta 테이블이란 (0) | 2023.03.09 |
| javascript를 type="param"으로 큐잉합니다. (0) | 2023.03.09 |