title: Ionic Template Routing in Angular
body: <p>i am trying to create an app with this way, i have ONE BLANK IONIC Template, and 2 sidebar based ionic templates. </p>
  
  <p>In BLANK TEMPLATE i am using 2 icons. Which i click on 1st icon, it redirects the URL but not the page. And same with the second icon. Here i how my code looks like. </p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
  
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="starter"&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Another page i have is app.js. This is where all the routing comes:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('starter', ['ionic', 'starter.controllers'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
  
      }
      if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }
    });
  })
  
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
      .state('appa', {
      url: '/appa',
      abstract: true,
      templateUrl: 'homeoptions.html'
  
    })
  
  
      .state('appa.home', {
      url: '/home',
      views: {
        'menuContent': {
          templateUrl: 'homeoptions.html'
        }
      }
    })
  
    .state('appa.fitness', {
      url: '/fitness',
      views: {
        'menuContent': {
          templateUrl: 'fitness-templates/fitness.html'
        }
      }
    })
  
    .state('appa.cafe', {
        url: '/cafe',
        views: {
          'menuContent': {
            templateUrl: 'cafe-templates/health.html',
            controller: 'TestCtrol'
          }
        }
      })
  
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/appa/home');
  });
  </code></pre>
  
  <p>I have my folder structure like this:</p>
  
  <p><a href="https://i.stack.imgur.com/3lIPn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lIPn.png" alt="enter image description here"></a></p>
  
  <p>Why my page is not navigating ? I am just using the same procedure as its saying by the guide and from the examples. </p>
  
  <p>Any idea will be helpful. Let us know your views. </p>
  
  <p>Thank you! (In advance)</p>