Question

我希望能够为两个不同的视图使用一条路线。

例如，我现在有两条路线。

一个是/ home，当有人可以注册/登录时，它是主页面

另一个/ feed，这是用户登录时。

我想要做的就是像twitter这样的单一路线：

twitter.com /

首先他们要求您登录

twitter.com/

我们可以看到我们的饲料墙。它仍然是相同的“/”。希望我很清楚：）

到目前为止，这是我的代码：

$stateProvider
            .state('index', {
                url: '/',
                controller: function($state, $auth) {
                    $auth.validateUser()
                        .then(function(resp) {
                            $state.go('feed');
                        })
                        .catch(function(resp) {
                            $state.go('home');
                        });
                }
            })

            .state('home', {
                url: '/home',
                templateUrl: 'home.html'
            })

            .state('feed', {
                url: '/feed',
                templateUrl: 'feed.html'
            })

Answer 1

据我所知，ui-router不支持此类功能，因此您必须自己动手。

您可以做的只是定义一个单独的状态，就像您在＆＃39; index＆＃39;中所做的那样。而不是在控制器中执行$ auth逻辑，而不是在＆＃34;解决＆＃34;部分。

然后你可以使用＆＃34; ng-if＆＃34;和＆＃34; ng-include＆＃34;定义您要加载的.html文件和控制器，如下所示：

app.js

$stateProvider
        .state('index', {
            url: '/',
            resolve: {
                isAuthenticated: function() {
                   return $auth.validateUser().then(function(res) {
                        return true;
                   }, function(error) {
                        return false;
                   });
                }
            },
            controller: function($scope, isAuthenticated) {
               $scope.isAuthenticated = isAuthenticated;
            },
            templateUrl: 'index.html'
        })

的index.html

<div ng-if="isAuthenticated">
  <div ng-include="'feed.html'"></div>
</div>

<div ng-if="!isAuthenticated">
  <div ng-include="'login.html'"></div>
</div>

Angularjs - 一条路线两个可能的视图

1 个答案: