angular.js - How to set up routing that combines ionic's side menu and tabs?

Question

I use ionic's default tab template, and then I need to add the side menu function, but I don't know how to set it up when setting up the routing. Should I write this below the tab?

  .state('tab.login',{
    url:'/login',
    views:{
      'tab-login':{
        templateUrl:'templates/login.html',
        controller:'LoginCtrl'
      }
    }
  })

But every time this will jump to the home page, and only the title is displayed, the content area number line is covered by the home page, so I created a new template, menu.html, and I defined the route like this

  .state('menu',{
    url:'/menu',
    abstract:true,
    templateUrl: 'templates/menu.html'
  })
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })
  .state('menu.login',{
    url:'/login',
    views:{
      'menu-login':{
        templateUrl:'templates/login.html',
        controller:'LoginCtrl'
      }
    }
  })

But there is no switching animation effect. What is the reason?

Answer 1

It should be enough to add a nested sub-route.

  .state('tab.dash', {
    url: '/dash',
    abstract:true,//设为抽象
    views: {
      'tab-dash': {
        templateUrl: 'templates/menu.html',
        controller: 'MenuCtrl'
      }
    }
  })
  .state('tab.dash.firstPage', {
    url: '/firstPage',
    views: {
      'side-menu': {
        templateUrl: 'templates/firstPage.html',
        controller: 'MyCtrl'
      }
    }
  })
$urlRouterProvider.otherwise('/tab/dash/firstPage');//跳转到首页

The content in menu.html is the menu.html template in the original side menu project, and then just change the view name menuContent to side-menu.