Angularjs - one route two possible views

Question

I want to be able to use one single route for two different views.

For example right now, I have two routes.

One is /home which is the main page when someone can register/login

And the other one /feed, this is when the user is logged in.

What I want to do is having a single route like twitter for example :

twitter.com/

first they ask you to login

twitter.com/

Than we can see our feed wall. And it's still the same "/". Hope I'm clear :)

This is my code so far:

$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'
            })

Asaf David · Accepted Answer · 2014-10-20 21:26:37Z

As far as I remember ui-router doesn't support such feature so you have to do it yourself.

What you can do is to define only a single state as you did in 'index' and instead of performing the $auth logic in the controller do it in a the "resolve" section.

then you can use "ng-if" and "ng-include" to define which .html file and controller you'd like to load, something like this:

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>

Collectives™ on Stack Overflow

Angularjs - one route two possible views

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related