Концепция главной страницы в AngularJS?

Question

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

Например, Левая навигационная система и верхняя панель навигации для мужчин. Эта навигация должна отображаться во всех представлениях при каждом изменении URL-адреса в приложении.

В соответствии с нг-зрения, это только оказывает дается частичный вид и заменить предыдущий вид. На изображении выше вся моя левая и верхняя навигация должна отображаться с помощью углового контроллера.

Код контроллера

angular.module('modelDemo').controller("authCtrl", ['$scope', function($scope) { 
     $scope.list; 
}]); 

Пожалуйста, дайте мне знать, как я могу добиться этого

Answer 1

вид нг должен быть в состоянии сделать это просто отлично. Держите свою навигационную навигацию/левую навигацию html неповрежденной и используйте просмотр ng для различных областей отображения. http://docs.angularjs.org/api/ng.directive:ngView

Чтобы использовать контроллер от верхней панели навигации внутри нг-зрения вы можете использовать $ родитель, чтобы получить доступ к этой области действий: https://stackoverflow.com/a/14700326/390330

Скрипка для родительской области: http://jsfiddle.net/ezhrw/2/

<button ng:click="$parent.letter = greek">Assignment expression {{ greek }}</button> 

Answer 2

Вы можете использовать угловым или угловым ui-маршрутизатором и настройкой вашего мастера, выполните следующие шаги:

• Шаг 1. Сделайте свой index.html ваша главная страница.
• Шаг 2. Добавьте <header>, <footer>, <aside>, <div> и т.д. ссылки на шаблоны с помощью ng-include
  • ПРИМЕЧАНИЕ: слева и сверху навигации будет частью этого
• Шаг 3. Содержимое представления будет отображаться с использованием атрибута директивы ng-view или ui-view
• Шаг 4. Используйте свой модуль app.config() для настройки детских страниц

Источник:

• используя угловую Маршрут: https://docs.angularjs.org/tutorial/step_07
  • шаблон для совершенно нового приложения: https://github.com/angular/angular-seed
• используя угловую маршрутизатор UI: Angular Tutorial 30 mins

Answer 3

Я пытался создать ту же концепцию, но мне нужен способ определения заполнителей. Я начал экспериментировать в Plnkr.co и до сих пор, я прибегал к использованию LayoutManager, который управляет собой из настроек в объекте routeProvider.

Вот пример: http://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/

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

Позвольте мне объяснить LayoutManager.

Я хотел иметь заполнители, которые можно было бы переопределить. В этом примере у меня есть панель инструментов, содержащая заголовок и предоставляющая пространство справа от заголовка для дополнительных элементов панели инструментов. Это дает возможность взглянуть на возможность дополнительной функциональности.

Все это управляется LayoutManager. LayoutManager - это служба, которая считывает свойства макета, заданные в $ routeProvider. Я хотел реализовать это, чтобы поддерживать чистоту и самодостаточность в каждом маршруте. LayoutManager вводится в директиву панели инструментов. Директива панели инструментов управляет его свойствами области макета LayoutManager.

В свою очередь, LayoutManager имеет зависимость от routeProvider, а также событие rootScope $ routeChange.

Я очень новичок в Угловом, открыт для предложений.

Answer 4

Я не мог видеть какие-либо проблемы, если вы используете загрузчик, то использование может легко разделить экран, как вы хотите

<div class="row"> 
    <div class="col-lg-3"> 
     Left panel 
    </div> 
    <div class="col-lg-9" style="border:1px solid #999; overflow-y:auto"> 
     <div> Top Banner </div> 

     <!-- Main view to render all the page --> 
     <div ui-view> </div> 

    </div> 
</div> 

Если вы хотите полную демо и код на потом увидеть this link

Edited : 3 Nov. 2016:

Если вы используете ui-router, тогда мы можем использовать абстрактное состояние пользователя для создания разных мастер-страниц.

Вам не нужно показать/скрыть, нг-ли, а просто определить маршрутизацию правильно с вами мастер-страницы и дочерние страницы

Better to see the detail

Answer 5

Я знаю, что это старый нить, но мысль следует отметить, что с угловым 1,5+ мы были введены в компоненты. Вместо того, чтобы иметь дело с маршрутами с именованными представлениями и всякой ерундой или с помощью ngInclude, вы должны использовать компонент компонента заголовка и нижнего колонтитула. Просто добавьте их в свой index.html (или что-то, что вы называете своим шаблоном html) и вуаля.

Например (это используется Угловая Материал и отсутствует модуль макета, но, надеюсь, вы получите точку)

1. Добавлена ​​index.html

<layout-header></layout-header> 

2. header.component.js (вам не нужно все это, но я думаю, что это полезно)

(function() { 
'use strict'; 
angular 
    .module('layout') 
    .component('layoutHeader', { 
     templateUrl: 'layout/header.html', 
     bindings: {}, 
     controller: Controller 
    }); 

Controller.$inject = []; 
function Controller() { 
    var ctrl = this; 

    initialize(); 

    //////////////////// 

    function initialize(){ 

    } 

} 
}()); 

3. заголовок.html

<md-toolbar> 
<div class="md-toolbar-tools"> 
    <h2> 
     <span>Really Awesome Title!!!!</span> 
    </h2> 
    <span flex></span> 

    <md-button class="md-icon-button" aria-label="More"> 
     <md-icon class="material-icons">more_vert</md-icon> 
    </md-button> 
</div> 
</md-toolbar>