Question

我想有两个主页（已登录，已注销），其中包含＆＃39; /＆＃39;等网址。

用ngRoute做它是否可行？我正在寻找解决方案，但到处都是使用ui-router。

现在我有点像：

$rootScope.$on('$routeChangeStart', function (event, next) {
  if ( next.$$route.orginalPath == '/' && loggedIn ) {
     next.$$route.templateUrl = "app/main/main-loggedIn.html"
  } else {
     next.$$route.templateUrl = "app/main/main-loggedOut.html"
  }
});

和

angular.module('name').config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'app/main/main-loggedOut.html',
        controller: 'MainCtrl'
      })
  });

但它不能很好地运作。它更改了templateURL，但它在变换之前获取数据并加载了始终登录的页面。

我还有解决办法将两个html放在一个文件中设置ng-if，但我更愿意避免它。

溶液

main.html中

<div ng-include="mainTemplate"></div>

main.js

angular.module('bookkeepingApp').config(function ($routeProvider) {
   $routeProvider.when('/', { controller: 'MainCtrl', templateUrl: "app/main/main.html" })
}).controller('MainCtrl', function ($scope, Auth) {
   $scope.$watch(function($scope) {
      return $scope.mainTemplate = Auth.isLoggedIn() ? 'app/main/main-loggedIn.html' : 'app/main/main-loggedOut.html';
   })
});

Answer 1

我不知道你是如何获得loggedIn值的，但templateUrl接受一个函数作为值，你只需根据信息返回正确的值用户。我想上面的代码可能有用。

angular.module('name').config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'MainCtrl',
      templateUrl: function() {
        return loggedIn ? "app/main/main-loggedIn.html" : "app/main/main-loggedOut.html"
      }
   })
 });

Answer 2

您可以在模板中放置一个模板，即您的路径“/”中有

<div ng-include="scopeVariable">

</div>

范围变量指向登录/登出页面，具体取决于您的需求。

如何设置加载模板url的条件

2 个答案: