반응형
AngularJ는 부분 템플릿 포함
내 기본 레이아웃 파일에 있습니다.
<body>
<header id="header" ng-controller="HeaderController"></header>
<div class="container" ng-view></div>
내 디렉토리 구조에 header.html 부분 템플릿이 있습니다.
이 템플릿을 내 앱에 포함하는 방법은 무엇입니까? angular는 컨트롤러를 처리 한 후 자동으로 템플릿을 포함한다고 생각했는데 작동하지 않습니다.
헤더 노드는이 파일의 내용으로 대체되어야합니다.
외부 파일의 템플릿 / html 조각을 포함하는 한 가지 방법은 ng-include지시문 ( 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.htmlbody 태그와 앱 태그를 포함 할을 정의합니다 .
<body> <app>Loading ...</app> </body>
- 이제 마지막 단계의 구성 요소를 정의하고
Navigation하고FooterMainComponent, 같이 당신의 부분 템플릿에있는 점
참조 URL : https://stackoverflow.com/questions/22329769/angularjs-include-partial-template
반응형
'IT이야기' 카테고리의 다른 글
| ember.js + 핸들 바 : 렌더 vs 아울렛 vs 부분 vs 뷰 vs 컨트롤 (0) | 2021.04.12 |
|---|---|
| rmarkdown : pandoc : pdflatex를 찾을 수 없습니다. (0) | 2021.04.11 |
| 경고 받기 : " 'newdata'에는 1 개의 행이 있지만 발견 된 변수에는 32 개의 행이 있습니다." (0) | 2021.04.11 |
| 범주 형 데이터 인코딩을위한 Python "TypeError : unhashable type : 'slice'" (0) | 2021.04.11 |
| 열린 파일 개체의 크기 (0) | 2021.04.11 |