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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

Источник:

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

Ответ 2

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

Чтобы использовать контроллер из верхней навигации внутри ng-view, вы можете использовать $parent для доступа к этой области: fooobar.com/questions/32776/...

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

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

Ответ 3

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

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

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

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

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

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

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

Я очень новичок в Angular, откройте предложения.

Ответ 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>

Если вам нужна полная демо-версия и код, см. эта ссылка

Отредактировано: 3 ноября 2016:

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

Вам не нужно играть show/hide, ng-if, но просто правильно определите маршрутизацию с помощью мастер-страниц и дочерних страниц

Лучше увидеть детали

Ответ 5

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

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

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. header.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>