Configuring Tabs URLs


#1

Please help me to understand how can i configure my app Urls. I am trying to do a simple app with a tab in the home page with three options and by default it load the second tab. I want to use a url for each tab option. I’ve tried and seen some tutorials but when i am trying it doesn’t work. Please look a sample in code pen and help me to understand.

I want to use a template for home and it contains the tab, each tab option have their own template.

Link to codepen

here is the code also:

INDEX.HTML

    <html ng-app="myApp">
    
     <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
    
    <body>
    
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
      </ion-nav-bar>
    
      <ion-nav-view></ion-nav-view>
    
    
      <script id="templates/home.html" type="text/ng-template">
         <ion-tabs class="tabs-top tabs-background-positive tabs-color-light">
    
          <ion-tab title="CATEGORIAS" shref="home.one">
            <ion-nav-view name="home-one"></ion-nav-view>
          </ion-tab>
    
          <ion-tab title="HOY" ng-controller="PostsCtrl" shref="home.two">
            <ion-nav-view name="home-two"></ion-nav-view>
          </ion-tab>
    
          <ion-tab title="FAVORITOS" shref="home.three">
            <ion-nav-content name="home-three"></ion-nav-content>
          </ion-tab>
    
        </ion-tabs>
      </script>
    
      <script id="templates/one.html" type="text/ng-template">
        <ion-view view-title="One TAB">
            <ion-content>
              <h2>PRINCIPAL</h2>
            </ion-content>
        </ion-view>
      </script>
    
      <script id="templates/two.html" type="text/ng-template">
        <ion-view view-title="Two TAB">
            <ion-content>
              <h2>CATEGORIAS</h2>
            </ion-content>
        </ion-view>
      </script>
    
      <script id="templates/three.html" type="text/ng-template">
        <ion-view view-title="Three TAB">
            <ion-content>
              <h2>FAVORITOS</h2>
            </ion-content>
        </ion-view>
      </script>
    
      
    
    </body>
    
    </html>

APP.JS

 app = angular.module('myApp', ['ionic']);
    
    app.config(function($stateProvider, $urlRouterProvider) {
          
          $stateProvider
          .state('home', {
            url: '/',
            abstract: true,
            templateUrl: "templates/home.html",
          })
          .state('home.one', {
            url: '/one',
            views: {
              'home-one': {
                    templateUrl: "templates/one.html",
              }
    	  	  }
          })
    	  .state('home.two', {
            url: '/two',
            views: {
              'home-two': {
                    templateUrl: "templates/two.html",
              }
    	  	  }
          })
    	  .state('home.three', {
            url: '/three',
            views: {
              'home-three': {
                    templateUrl: "templates/three.html",
              }
    	  	  }
          })
    	  
    	  $urlRouterProvider.otherwise('/home/two')
    });

(Sorry if my english isn’t too good)