UI Routing


#1

Hello,

I have a question for you guys.
I want to build a application but i have some problems with the ui routing:

So i want to make a application with a sidemenu. In the sidemenu i want 4 links that will go to 4 other views. when you press, you will go to that view (this is working fine).

But in that view i want to link to other views ,views that are NOT in the sidebar is this possible in ionic ?

confusing ? look at the picture’s! I try to make it clear










#2

Yes you can certainly link to other pages without having them appear in the sidemenu. On your view that you want to link to other views, you can do one of the following:

  1. <a ui-sref="new_state">New Page</a>

  2. <a ng-click="navigateTo()">New Page</a>

    function navigateTo(){
      $state.go('new_state');
    }

#3

Thanks but sometimes it works , other times it don’t

routing

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

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.begin', {
      url: '/begin',
      views: {
        'menuContent': {
          templateUrl: 'templates/begin.html',
          controller: 'beginCtrl'
        }
      }
    })

  .state('app.producttoevoegen', {
    url: '/producttoevoegen',
    views: {
      'menuContent': {
        templateUrl: 'templates/producttoevoegen.html',
        controller: 'ProductToevoegenCtrl'
      }
    }
  })

  .state('app.lijst', {
      url: '/lijst',
      views: {
        'menuContent': {
          templateUrl: 'templates/lijst.html',
          controller: 'LijstCtrl'
        }
      }
    })

  .state('app.aankoopverkoop', {
    url: '/aankoopverkoop',
    views: {
      'menuContent': {
        templateUrl: 'templates/aankoopverkoop.html',
        controller: 'AankoopverkoopCtrl'
      }
    }
  })

  .state('inkoop', {
    url: '/inkoop',
    templateUrl: 'templates/inkoop.html',
    controller: 'InkoopCtrl'
  })

  .state('verbruik', {
    url: '/verbruik',
    templateUrl: 'templates/verbruik.html',
    controller: 'VerbruikCtrl'
  })

  .state('producttoevoegen', {
    url: '/producttoevoegenH',
    templateUrl: 'templates/producttoevoegen.html',
    controller: 'ProductToevoegenCtrl'
  })


  $urlRouterProvider.otherwise('/app/begin');
});

html

<button ng-click="go('/inkoop')">Inkoop</button>
<button ng-click="go('/verbruik')">Verbruik</button>
<button ng-click="go('/producttoevoegenH')" id="button" class="button menubox menuboxL ion-ios-plus-empty"><br><span>Nieuw Product toevoegen</span></button>

function

  $scope.go = function ( path ) {
    $location.path( path );
  };

I get this error everytime

Error: [$compile:ctreq] Controller ‘ionNavBar’, required by directive ‘ionNavButtons’, can’t be found!


#4

Your error is unrelated to the UI router. If you are using ionNavBar, make sure that it has a parent called ionNavBar.

Since you are using ui-router, you really shouldn’t be using $location in your controller. I suggest one of the two ways:

1. <button ui-sref="inkoop">Inkoop</button>
2. <button href="#/inkoop">Inkoop</button>

The first method navigates using the name of the state for navigation and the second method uses the url part of the state.


#5

Thank you so much !!! it works finally.
It is now so logical !
Thanks for the fast and good response.