Basic Ionic Routing issue

Question

I have a root state which is not abstract

$stateProvider
  .state('app', {
     url: "/app",
     templateUrl: "templates/menu.html",
     controller: 'AppCtrl'
   })
   .state('app.dashboard', {
     url: '/dashboard',
     views: {
       'landing': {
         templateUrl: 'templates/dashboard.html',
         controller: 'DashboardCtrl'
       }
     }
   });
$urlRouterProvider.otherwise('/app');

Now, my question:

• I go to url: '/app' . It works and the AppCtrl takes me to '/dashboard'
• I go to url: '/dashboard'. It works as well and the dashboard content is loaded.
• Now, I go to url : '/dashboar'. The url I now see in the address bar is '/app' but the dashboard template can be seen as well. Why is that ?? That shouldn't be the case, right ?

Answer 1

The state app.dashboard is a child of app so its url is /app/dashboard and not /dashboard .

Then when you go to /dashboar , this url is not specified, so because of $urlRouterProvider.otherwise('/app'); you are redirected to /app .

Because of the code that you are showing to us i think that you are using the side menu so its important that in /templates/menu.html in :

<ion-pane ion-side-menu-content drag-content="false"> <ion-nav-view name="menuContent" animation="slide-left-right"> </ion-nav-view> </ion-pane>

You are calling the view of app.dashboard "landing", so the name parameter of <ion-nav-view> should be "landing" too.

Then, if you have other states with the side menu, the view's name should be "landing" as well.

If you are not using side menu, please provide the menu.html content to us and the dashboard.html too.

Hope it helped you.