CODEWITHSUNDEEP
angularjsionic-framework
Manish Kumar
Manish Kumar

Reputation: 10492

angularjs page navigation not working properly

angular.module('mobApp', ['ionic', 'mobApp.controllers','ngCordova', 'mobApp.services', 'mobApp.directive', 'yaru22.angular-timeago', 'monospaced.elastic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && 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('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
  .state('app.search', {
    url: '/search',
    views: {
      'menuContent': {
        templateUrl: 'templates/search.html'
      }
    }
  })
  .state('app.page1', {
      url: '/page1',
      templateUrl: 'templates/page1.html',
      controller: 'PageCtrl'
  })
  .state('app.page2', {
      url: '/page2',
      templateUrl: 'templates/page2.html',
      controller: 'PageCtrl'
  })
  .state('app.page3', {
      url: '/page3',
      templateUrl: 'templates/page3.html',
      controller: 'PageCtrl'
  })    
  $urlRouterProvider.otherwise('/app/search');

index.html

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>

inside search.html i have <a href="#/app.page1">page1</a> when i click this link its not working properly. its showing back my expected page navigation is

search.html - > page1.html - > page2.html -> page3.html

Upvotes: 1

Views: 352

Answers (1)

Andreas J&#228;gle
Andreas J&#228;gle

Reputation: 12240

I assume you are using the angular ui-router. Please be aware of the difference between urls and states. If you want to navigate to the state named app.page1 you have two options.

  1. <a href="#/app/page1">...</a> as you defined the urls for the (nested) state.
  2. <a ui-sref="app.page1">...</a> using the directive provided by the ui-router to navigate using state names (the first argument in the .state() call).

The second way is preferred as it allows you to change the states' urls without modifying all the links you already set up. Also letting the library build the final urls makes it easier to switch from the anchor links (#/...) to the html5 mode with one simple flag.

Depending on the devices you are targeting, you may want to insert an empty href (href="") for the browsers to render the link correctly.

For more details, please check out the docs at https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Upvotes: 1

Related Questions