ocket-san
ocket-san

Reputation: 884

using UI-Router based on application state/data

Is it possible to use Angulars ui-routing based on data conditions? For example, suppose I would need to implement some kind of subscription flow. Eventually, the user gets to see a page telling him that the subscription was either a success or not.

But during the flow, based on data, there are decisions that need to be taken. For example: if the user is already logged on, we need to to know what email address he will use for the subscription and the user gets a view asking him for an email. If not logged on, the user gets a login/registration screen.

It took some research to realize in angular that 'state' is actually a view, so googling state gives me the wrong results. I also encountered this here (which I feel like is a similar case). In a comment there is a link to here but I can't really figure out if that is really what I need.

So, simply put: Can I change the view of a page, using ui-router and based on a data condition, for example:

/* this could be set by an ng-init directive */
$scope.isLoggedOn = false;

 ... 

function showView() {
   if $scope.isLoggedOn --- > show the email view
   if not $scope.isLoggedOn --- > show the login/registration view
};

* EDIT * Following the answer of Ran Sasportas, i created a Plunker demo. Don't expect too much of it, its very basic, but at least it works. Here is the link I might add some more features later on, when I am testing nesting views and controllers.

Upvotes: 0

Views: 44

Answers (1)

Ran Sasportas
Ran Sasportas

Reputation: 2266

ui-router has a service called $state , which you inject to you're controller. That way you can control what views you want to use for example - $state.go('login') That will trigger the login state you have defined in you're config section . That's it. You can check out ui routers documentation - http://angular-ui.github.io/ui-router/site/#/api/ui.router

Good luck.

Upvotes: 1

Related Questions