Multiple Views with Angularjs and Ionic

Question

I’m trying to add some States in my code to navigate between them, but I can’t, the only ones that work are the views that come from the sidebar. Follows code:

app js.:

    .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.principal', {
      url: '/principal',
      views: {
        'menuContent': {
          templateUrl: 'templates/principal.html',
        }
      }
    })

  .state('app.principal.vendas', {
      url: '/vendas',
      views: {
        'menuContent': {
          templateUrl: 'templates/vendas.html',
        }
      }
    });

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

Main.html:

<ion-view view-title="Principal">
  <ion-content>
    <h3 style="font-family: Helvetica">Bem vindo ao E-Management Mobile.</h3>

      <img src="./img/logo_grupoviceri.png" class="item-image" style="width:100%">

    <div class="row">
    <button class="button button-block button-viceri-C">
      Vendas
      <i class="ion-ios-pie-outline" style="font-size: 170%"></i>
        <a href="#/app/vendas"></a>
    </button>
  </div>

  <div class="row">
    <button class="button button-block button-viceri-C">
      Operação 
      <i class="ion-gear-b" style="font-size: 170%"></i>
    </button>
  </div>

      <div ui-view></div>

  </ion-content>
</ion-view>

Sales.html:

<ion-nav-view view-title="Vendas">
    <div ui-view></div>
    <ion-pane>
        <!--HEADER DO APP-->
      <ion-header-bar class="bar bar-header bar-assertive">
          <button class="button button-icon icon ion-arrow-left-c"></button>
        <h1 class="title center">Vendas</h1>
      </ion-header-bar>

        <!--CONTEUDO CENTRAL DO APP-->
      <ion-content>
          <div class="row">
            <div class="button-bar">
                <a class="button button-viceri-C">Listas</a>
            </div>
          </div>
      </ion-content>
    </ion-pane>
</ion-nav-view>

That is, my app is started in Main, and when clicking on the buttons Sales or Operation, I should be redirected to Sales, however, it is not working. What did I do wrong? Thank you in advance. PS:Operation not yet implemented.

Answer 1

Next if your views corresponding to States are not inside the #/app/... folder or should be shown outside the side menu you should create a new state that does not inherit from app.somethings because if it inherits it should be in the same folder as the other templates. EX:

.state('vendas', {
    url: '/vendas',
    abstract: false,
    templateUrl: 'templates/vendas.html',
    controller: 'VendasCtrl'
  })

as long as the view is correctly created inside the templates folder with the name sales.html this should work.

Answer 2

Simple.

You navigate between States with ui-sref='myState'

Try:

<button class="button button-block button-viceri-C">
  Vendas
  <i class="ion-ios-pie-outline" style="font-size: 170%"></i>
    <a ui-sref="vendas"></a>
</button>