Angularjs - 一条路线两种可能的视图答案

【问题标题】：Angularjs - one route two possible viewsAngularjs - 一条路线两种可能的视图
【发布时间】：2014-12-15 23:32:22
【问题描述】：

我希望能够将一条路线用于两种不同的视图。

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

一个是/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'
            })

【问题讨论】：

标签： angularjs controller routes views

【解决方案1】：

据我所知ui-router不支持这样的功能，所以你必须自己做。

您可以做的是只定义一个状态，就像您在“索引”中所做的那样，而不是在控制器中执行 $auth 逻辑，而是在“解析”部分中执行它。

然后您可以使用“ng-if”和“ng-include”来定义您要加载的 .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>

【讨论】：