2017-09-28 2 views
0

각기 다른 상태의 & 컨트롤러가있는 html이 여러 개 있는데 상태에 따라로드됩니다. ng-include 태그가있는 모든 HTML에 포함 된 머리글과 바닥 글이 있습니다. 이것 이외의 더 좋은 방법으로 머리말 &을 상수로 만들고 ng-include를 사용하는 모든 페이지에 페이지를 포함하는 대신 페이지를로드하십시오. 당신이 사용할 수있는머리글과 바닥 글 사이에 HTML을로드하는 방법

+0

무엇을 원하십니까? 한 번로드 한 후에는 모든 페이지의 동일한 파일에서 가져온 파일을 사용자의 컴퓨터에 저장해야하므로 걱정할 필요가 없습니다. –

+0

예, 정확하지만 목적은 불필요하게 모든 페이지를로드하는 이유입니다. 당신이 각도를 사용한다면 왜 HTML을로드하는 것보다 –

+0

라우팅을 사용하는 이유는 무엇입니까? – mast3rd3mon

답변

0

예를 들어 NG-포함

에 Index.html에서
<div ng-include="'header.php'" class="navbar-fixed-top"></div> 
<div ui-view></div> 
<div ng-include="'footer.php'" class="navbar-fixed-top"></div> 
0

<!DOCTYPE html> 
<head> 
    //css files 
</head> 
<body ng-app="" ng-controller=""> 
    <ui-view></ui-view> 
//script files 
</body> 
</html> 

이제 UR 네비게이션 바에을 분리해서 하시다면의 .js, .CSS 파일을 배치하고 body 태그에 추가 별도의 nav.html 및 footer.html를 바닥 글과 하나 개의 js 파일을 유지하고 탐색 navigat입니다

angular.module('app') 
     .component('app', { 
      template: 
      '<navigation></navigation>'+ 
       '<ui-view></ui-view>' + 
      '<footer></footer>' 
     }); 

를 추가 이온 구성 요소 이름

angular 
     .module('app') 
     .component('navigation', { 
      templateUrl: 'app/common/nav/nav.html', 
      controller: NavController 
     }); 

마찬가지로 바닥 글은 모든 페이지 만 UI 뷰에 대한 일반적인 것 u는이 메뉴 바 및 바닥 글함으로써 모든 컨트롤러

angular 
     .module('app') 
     .component('home', { 
      templateUrl: 'app/components/home/home.html', 
      controller: homeController 
     }); 

위해 할 수있는 같은 방법으로 name.In 바닥 글의 구성 요소입니다 변경.

관련 문제