Multiple - Master Detail Страницы

Question

Я новичок в угловом (с фона метеора), и я борюсь с тем, как я буду реализовывать 2 страницы стиля детали мастера в Angular ui router.

То, что я пытаюсь достичь следующим образом:

Перед тем, как человек вошел в них увидит: Master Страница A Содержит:

• заголовок
• Content - которая изменяет
• Footer A

Когда человек войдет в систему, они увидели бы: Master Page B Содержит:

• Заголовок B
• Content - который изменяет по маршруту
• Footer B

Content - изменения Footer B

Во-первых: (Я не уверен, правильно ли указано ниже). До сих пор я нашел следующий код в Интернете, однако кажется, что мне нужно будет повторить заголовок a nd footer на каждом маршруте (который, как представляется, повторно загружает их каждый раз при навигации по различным страницам контента).

.state('home', { 
      abstract: true, 
      url: '/home', 
      views: { 
       'main': { 
        templateUrl: 'app/template/home.html' 
       } 
      } 
     }) 
     .state('home.landing', { 
      url: '/landing', 
      views: { 
       'header@home': { 
        templateUrl: "app/template/header.html" 
       }, 
       'test@home': { 
        templateUrl: "app/template/test.html" 
       }, 
       'footer@home': { 
        templateUrl: "app/template/footer.html" 
       } 
      } 
     }) 
     .state('home.other', { 
      url: '/other', 
      views: { 
       'header@home': { 
        templateUrl: "app/template/header.html" 
       }, 
       'test@home': { 
        templateUrl: "app/template/test2.html" 
       }, 
       'footer@home': { 
        templateUrl: "app/template/footer.html" 
       } 
      } 
     }) 

Благодаря

Answer 1

Один из способов иметь верхние и нижние колонтитулы остаются постоянными по детям родного государства было бы определить те в самом родном штате, как это.

.state('home', { 
      abstract: true, 
      url: '/home', 
      views: { 
       'main': { 
        templateUrl: 'app/template/home.html' 
       }, 
       'header@home': { 
        templateUrl: "app/template/header.html" 
       }, 
       'footer@home': { 
        templateUrl: "app/template/footer.html" 
       } 
      } 
     }) 
     .state('home.landing', { 
      url: '/landing', 
      views: { 
       'test': { 
        templateUrl: "app/template/test.html" 
       } 
      } 
     }) 
     .state('home.other', { 
      url: '/other', 
      views: { 
       'test': { 
        templateUrl: "app/template/test2.html" 
       } 
      } 
     }) 

Таким образом, в абстрактном исходном состоянии home.html заполнит основной ui-view в вашем корневом шаблоне. Затем верхний и нижний колонтитулы заполнят ui-views внутри home.html.

Для детей указано, что вы можете оставить представление как test @ home, но поскольку это прямой ребенок дома, вы можете сократить его, чтобы просто проверить.