AngularJS中的母版页概念？

Question

我想创建母版页,即主页面,它将在应用程序的所有视图中使用.

例如,左侧导航和顶级人员导航.每当应用程序中的URL更改时,此导航应显示在所有视图中.

根据ng-view,它只渲染给定的局部视图并替换先前的视图.在上面的图像中,我应该使用角度控制器显示我的左侧和顶部导航.

控制器代码

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

请让我知道,我怎样才能做到这一点

Answer 1

您可以按照以下步骤使用angular-route或Angular-ui-router,并设置主服务器:

• 步骤1.制作您index.html的母版页.
• 步骤2.添加<header>,<footer>,<aside>,<div>,等通过引用您的模板ng-include
  • 注意:您的左侧和顶部导航将成为其中的一部分
• 步骤3.将使用directive属性ng-view或视图呈现视图的内容ui-view
• 步骤4.使用您的模块app.config()配置子页面

资源:

• 使用Angular Route:https://docs.angularjs.org/tutorial/step_07
  • 全新应用的模板:https://github.com/angular/angular-seed
• 使用Angular UI路由器:Angular Tutorial 30分钟

Answer 2

ng视图应该能够做到这一点.保持顶部导航/左侧导航html完整,并使用ng视图显示各种显示区域.http://docs.angularjs.org/api/ng.directive:ngView

要从ng-view中的顶部导航使用控制器,您可以使用$ parent访问该范围:https://stackoverflow.com/a/14700326/390330

父范围的小提琴:http://jsfiddle.net/ezhrw/2/

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