Multiple Views with AngularJS and Ionic

Question

Multiple Views with AngularJS and Ionic

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I'm trying to add some states in my code to navigate between them, but I can not, the only ones that work are the views that come from the sidebar. Here is the 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 starts in the Main, and when clicking on the Sales or Operation buttons, I should be redirected to Sales, but it is not working. what did I do wrong? Thanks in advance. PS: Operation is not yet implemented.

angularjs html5 ionic

asked by anonymous 12.08.2015 / 20:10

2 answers

Collect email and send via post to php (Facebook canvas) AngularJS directive blocking ngModel

score 0 · Answer 1

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

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

As long as the view inside the templates folder named sales.html is created correctly, this should work.

score 0 · 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>