如何将 ng-view 与 AngularJS 中的完整页面结合起来？

Question

我正在开发一个应该是单页应用程序的应用程序。我使用的工具是 AngularJS、NodeJS、ExpressJS 和 Jade 模板。

到目前为止，我一直在使用带有 ng-view 指令的页面，我可以更改其内容以显示我想要的页面，同时保留侧边菜单。

现在我需要创建一个 login/create 帐户页面（我暂时称之为 'intro'），这个应该使用所有屏幕 space，同时删除菜单。

我怎样才能做到这一点？我的路由文件如下所示：

var akaAcademicManagerApp = angular.module('akaAcademicManagerApp', ['ngRoute', 'akaAcademicControllers']);

akaAcademicManagerApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/dashboard', {
        templateUrl: 'partials/dashboard',
        controller: 'DashboardController'
      }).
      when('/profile', {
        templateUrl: 'partials/profile',
        controller: 'ProfileController'
      }).
      when('/intro', {
        templateUrl: 'partials/introPage',
        controller: 'IntroController'
      }).
      otherwise({
        redirectTo: '/dashboard'
      });
  }]);

angular.module('akaAcademicControllers', []);

Answer 1

我认为这可以帮助你（然而，我不认为这是最佳解决方案，但它有效）

在你的 index.html 中，在你的正文标签后放上：

<div ng-include="accessToApplication()"></div>

现在在您的控制器中：

$scope.loggedIn = false;// true when the user is logged in

$scope.accessToApplication = function () {
            if (!$scope.loggedIn) {
                return "partials/introPage.html";
            }
            else {
                return "path to the page containing the ng-view";
                }
};

我建议你看一下 ui-路由器和多个命名视图 (https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views)

如何将 ng-view 与 AngularJS 中的完整页面结合起来？

How to combine ng-view with complete pages in AngularJS?

node.js

express

angularjs

single-page-application

pug