CODEWITHSUNDEEP
angularjsangular-ui-routerionic-framework
Nathan
Nathan

Reputation: 1371

Why does Ionic require a "/tab/" prefix in URLs?

I want to make a simple Ionic app that has a navigation bar at the bottom. After a lot of researching, I got it to work. However, I do not understand two things:

#1. In my routes.js file, what is the tab state doing there, and why do I need to prefix my home state?

// Why do I need the tabs. part in my state?
$stateProvider.state('tabs.home', {
    url: '/home',
    views: {
        "home-tab": {
            templateUrl: 'templates/home/index.html'
        }
    }
})
// Why do I even need this state?
.state('tabs', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
})

#2. Whenever I create an anchor link or an ion-tab link, I always have to prefix the hash with /tab/. Why?

<!-- Why do I need the /tab/ part in the href? -->
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

I'll admit it: I haven't really studied up on ionic nor $stateProvider. If anybody can put a link to a tutorial for ionic or $stateProvider, I'll really appreciate it.

Upvotes: 0

Views: 790

Answers (1)

Juan Marcos Armella
Juan Marcos Armella

Reputation: 737

You need an abstract state because you are handling nested views. (You have a navigation bar and the view home).

You use /tab/home because you are going to the state tabs.home. If you have another state with tab and list you will acces it with /tab/list. You are rendering two templates, the tab and the index.

Read this:

http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/

Example with more views:

$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'
        }
      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "templates/facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "templates/nav-stack.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "templates/contact.html"
        }
      }
    });

And the link to one:

  <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

http://codepen.io/ionic/pen/odqCz

Upvotes: 2

Related Questions