Question

大家好我使用angularjs完整堆栈（yoeman + express + mongodb）应用程序进行开发，即时开发应用程序提供的样本脚手架。项目结构是

app
 -scripts
 -styles
 -views
   -- admin
   --partials
   --404.html
   --index.html
lib

现在我的问题是partials文件夹包含navbar.html和foter.html，它包含在index.html页面中

<div ng-include="'partials/navbar'"></div>
<div style="height:48px;" id="spacer"></div>
<!-- Add your site or application content here -->
<div ng-view=""></div>
<div ng-include="'partials/footer'"></div>

部分中的所有html页面都有导航栏和页脚，但我希望管理员文件夹页面不包含任何这些导航栏和页脚。检查完所有的app.js和route.js后，我无法找到要完成的设置，以便所有的admin文件夹页面都不应该有index.html页面结构。

Answer 1

您可以使用第三方路由器，例如angular-ui-router，它具有多个视图和嵌套状态，以显示不同的视图或根本不显示它们。

请参阅：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Answer 2

我建议您使用angular-ui-router，但如果您坚持使用ngRoute，那么您可以执行以下操作：

<!doctype html>
<html>

<head>
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>

  <script>
    var app = angular.module('myApp', ['ngRoute']);

    app.config(function ($routeProvider) {
      $routeProvider.when('/', {
        templateUrl: 'landing.html'
      }).when('/admin', {
        templateUrl: 'admin.html',
        data: {
          headerFooterVisible: false
        }
      });
    });

    function MainCtrl($scope) {
      $scope.$on('$routeChangeSuccess', function (e, current, prev) {
        $scope.headerFooterVisible = !current.data || current.data.headerFooterVisible;
      });
    }
  </script>
</head>

<body ng-app="myApp" ng-controller="MainCtrl">
  <div ng-show="headerFooterVisible" ng-include="'header.html'"></div>
  <div ng-view></div>
  <div ng-show="headerFooterVisible" ng-include="'footer.html'"></div>
</body>

</html>

这种方式允许您在路由器配置中指定哪些路由应隐藏页眉和页脚。只需将headerFooterVisible: false添加到路由配置的data部分，即可获得不希望页眉和页脚可见的路由。

Angularjs完整堆栈应用程序

2 个答案: