Routing doesn't work for nested states

1

Hey,

I’m having some difficulties getting the routing to work in a new project.

The projects needs the following routing:

  • dash
  • dash/{{id}}/view1
  • dash/{{id}}/view2

The issue is that the URL changes correctly but the view remains the same, unchanged.
Will appreciate the help.
Here’s the code.

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 href="css/ionic.app.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="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="app">

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

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

  </body>
</html>

js/app.js

angular.module('app', ['ionic', 'app.controllers', 'app.services', 'ngCordova'])

.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 && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
   
  .state('dash, {
    url: '/dash',
    templateUrl: 'templates/dash.html',
    controller: 'DashCtrl'
  })

  .state('dash.info', {
    abstract: true,
    url: '/:dashId'
  })

  .state('dash.info.view1', {
    url: '/view1',
    templateUrl: 'templates/dash-view-1.html',
    controller: 'DashInfoCtrl'
  })

  .state('dash.info.view2', {
    url: '/view2',
    templateUrl: 'templates/dash-view-2.html',
    controller: 'DashInfoCtrl'
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/dash');
});

templates/dash.html

<ion-view view-title="Dashboard">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="dash in dashboards" type="item-text-wrap" href="#/dash/{{dash.id}}/view1">
                Go to dashboard
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

templates/view1.html

<ion-view view-title="Dashboard View1">
    <ion-content>
        Dashboard View 1
    </ion-content>
</ion-view>