UI Router URL & Otherwise (basic question)

tutorials
1

this page explain the NavView and UI Rounter - http://ionicframework.com/docs/api/directive/ionNavView/

The code for the demo is in http://codepen.io/ionic/pen/odqCz?editors=101
On the JS line 62 there is …

   $urlRouterProvider.otherwise("/tab/home");

Whereas the URLs above doesnot have /tab/home, there is url: “/tab” (line 7) and /home (line 12).

 $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })

I am looking for explanation how separate /tab & /home mappings points to /tab/home. this may be a very basic question and i may be missing something which is usual :smile: . but i have gone through the docs on the ionic documentations as well as angular js docs. any help is greatly appreciated … thanks!

2

Hy @skdev,

Rougly explained it’s inheritance. Did you see that you type tabs.home and before just tabs? Every state that starts with tabs. will inherit from state tabs.

Here is a good article: http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/

And here also very good: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

I guess this will answere most of your questions.
But feel free to ask at any time!

Hope i helps!

3

thanks for your time and effort to try to explain this. it took me a while going thru this and making sure i have put enough effort myself; therefore the delay from my side.

going thru the link you have given (fliglio) i find there is a parent field that explains what you have explained above.

12         var details = {
13             name: 'settings.details',
14             parent: settings,

this parent field doesnot exist in the example i have quoted in my query above, so i havent quite understood yet.

frankly, the other link you gave (github) was a bit over the head, however i will try to look at it once i have understood the basics.

4

@skdev
this example you quoted is how you define things with Angular JS it self…

$stateProvider.state is a function from UI-Router

this is from where UI-Router is build… but not how you use it…

on the case of the first question, state function concatenate the first item (tabs in tabs.home) to the parent and do lot’s of other stuff for you…

understanding a framework isn’t this simple, you should worrie more about build the app in top of it, then start profiling, and if and only if there’s something slow in there try to fix, there is a few developers working on it… so maybe even before you finish the rest of your app they would already have fixed some random problem that is slowing your app down.

that said, contributing for Open Source is great so if you can you should, but take a few time for understanding the framework and a little more to feel confortable enough to make it better.

the answer for your first question is here:


in Abstract States.
it don’t give you a deep understanding of how it works, it simples say that it work this way,
since there isn’t a example workflow that can explain it work thought graph, i guess you need dive in the code for understand your question