CODEWITHSUNDEEP
angularjsionic-framework
Sunny
Sunny

Reputation: 2144

Ionic: Understanding navigation and routing

I am learning navigation and routing in Ionic from http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/

& I would like to understand the mapping, I didn't get it clearly from docs.

below code is from my app.js

app.config(function($stateProvider, $urlRouterProvider) {
      console.log('In Config');
      $urlRouterProvider.otherwise('/')

       $stateProvider.state('home', {
           url: '/home',
           views: {
               home: {
                   templateUrl: 'home.html'
               }
           }
         })
       })

& below code is from Index.html

<ion-tabs class="tabs-positive">
    <ion-tab icon="ion-home" ui-sref="home">
      <ion-nav-view name="home"></ion-nav-view>
    </ion-tab>

What I understood is that ui-serif is mapped with states name. I am not getting how url,templateUrl & ion-nav view name are related to or mapped to each other because if I change any one of these my app doesn't work.

Upvotes: 0

Views: 1287

Answers (1)

aorfevre
aorfevre

Reputation: 5064

Let me change a bit your exemple so you can understand a bit more:

 $stateProvider.state('homeState', {
           url: '/homeUri',
           views: {
               homeName: {
                   templateUrl: 'home.html'
               }
           }
         })

Is referenced in your page like that :

  <ion-tab icon="ion-home">
      <ion-nav-view name="homeName"></ion-nav-view>
    </ion-tab>

Or your can access to it with a a href :

<a href="{{homeUri}}">

or usign ui-router routing 

<a ui-sref="homeState">

Upvotes: 3

Related Questions