Search code examples
angularjsionic-frameworkangular-ui-routerionic-view

Unable to get routing work in Ionic app

I am unable to get routing to work for the Ionic app. When I click on a link ('Scientific Facts') in home.html, it doesn't navigate to facts.html I've gone through all the relevant documentation and other similar answers on stack overflow but none of them helped.

Below are my files index.html, app.js, states.js files. Could someone please suggest where I could be going wrong ?

index.html

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

    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/ionicons.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/states.js"></script>


    <script src="js/services.js"></script>
  </head>
  <body ng-app="curie">

    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>


    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
          </p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/facts.html" type="text/ng-template">
      <ion-view view-title="Facts">
        <ion-content class="padding">
          <p>Banging your head against a wall uses 150 calories an hour.</p>
          </p>
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>

states.js 

angular.module('curie')
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  .state('tab.home', {
    url: '/home',
    views: {
      'home': {
        templateUrl: 'templates/home.html',
        controller: 'HomeTabCtrl'
      }
    }
  })
  .state('tab.facts', {
    url: '/facts',
    views: {
      'facts': {
        templateUrl: 'templates/facts.html'
      }
    }
  })
  $urlRouterProvider.otherwise('/tab/home');


})

.controller('HomeTabCtrl', function($scope, $location) {
  console.log('HomeTabCtrl');
     $scope.goToUrl = function(path) {
        $location.path('#/tab/overviewPhoto');
    };
});

app.js

angular.module('curie', [
  'ionic', 
  'ngCordova', 
  'ui.router',
  ])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
Solution

  • From further research, I've come to know that, the view name the page is being navigated to, shall be same as the view name from which it was navigated from.

    Below is incorrectly defined view name.

      .state('tab.facts', {
    url: '/facts',
    views: {
      'facts': {
        templateUrl: 'templates/facts.html'
      }
    }
  })

    Below is correctly defined view name i.e same as the view name it is being navigated from.

      .state('tab.facts', {
    url: '/facts',
    views: {
      'home': {
        templateUrl: 'templates/facts.html'
      }
    }
  })