Why specify the URL "abstract: true"?

Question

Today I am doing ui-router, trying to better understand forests in ionics, and one thing I noticed is that they give an abstract state to the "tabs" of the URL.

The only times I have ever used abstract states, I used an empty string as a URL, and I notice that if I ever accidentally tried to go to an abstract state (as opposed to a child state), I get Error:

Cannot go to abstract state '[insertAbstractStateHere]'

edit:

"In addition, when experimenting, when I try to assign a url to my abstract state (outside of Ionic) and still produce nested state representations, I get a large goose egg. Nothing appears at all."

the above quote is incorrect! I tried again in Plunker , and the nested states really appeared.

angular.module('routingExperiments', ['ui.router']) .config(function($urlRouterProvider, $stateProvider) { $stateProvider .state('abstractExperiment', { abstract: true, url: '', //<--- seems as if any string can go here. templateUrl: 'abstractExperiment.html' }) .state('abstractExperiment.test1', { url: '/test1', templateUrl: 'abstractTest1.html' }); }); 

Apparently, I really did it wrong. So my new question is:

Is there a reason why you can use a named state rather than an empty string when using abstract states, or is it just a style choice?

Answer 1

The reason you should use an abstract state is to keep your definition dry when you have part of your navigation text. For example, let's say you had a URL scheme, for example:

 /home/index /home/contact 

However, for some reason in your design, this url is invalid (i.e. there is no purpose for the page):

 /home 

Now you can simply create two states for this situation with full URLs, however then you will write /home/ twice, and the description is a bit confusing. A better idea is to create a parent abstract parent from which the other two states are child (for ui-router docs):

 $stateProvider .state('parent', { url: '/home', abstract: true, template: '<ui-view/>' }) .state('parent.index', { url: '/index', templateUrl: 'index.html' }) .state('parent.contact', { url: '/contact', templateUrl: 'contact.html' }) 

Just notice that inside the parent state we assign a template whose only child is ui-view . This ensures that the children will be processed (and that may be why yours are not displayed).

---

Sometimes you may notice the use of an abstract state with a blank url. It is best to use this setting when you need a parent resolve . For example, a subset of your states might require certain server data. So instead of putting the same permission function in each of your states, you can create an empty parent URL with the solution you want. It can also be useful if you want hierarchical controllers in which the parent did not use for presentation (you don’t know why you need it, but this is believable).

Answer 2

 .state('home', { url: '/home', abstract:true, controller: "HomeController", templateUrl:"path to your html" }) .state('home.list', { url:"", controller: "HomelistController", templateUrl:"path to your html" }) 

Answer 3

Use an abstract state, also let the ui router do the navigation when the controller / page reloads.