Difficulty navigating between views using Ionic Framework

Asked

Viewed 1,166 times

5

recently start in Ionic, and I believe that as a beginner doubt, I’m having some questions about opening pages, ie, browse between my views in case there are 3 would be them, the home, Pag1, pag2, only for the purpose of testing should appear a random message. If the routes are correct, would it be necessary to load some module? Cordially,

index.html

       <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">




    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

<!-- instruções rotas ng-->

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
   <script src="js/angular-ui-router.js"></script>
<script src="js/angular.js"></script>
    <script>
    var App = angular.module('starter', ['ui-route']);
        // For Component users, it should look like this:
        // var myApp = angular.module('myApp', [require('angular-ui-router')]);
    </script>
    <!-- ionic biblioteca js -->



    <script src="lib/ionic/js/ionic.bundle.js"></script>

<-- nossos arquivos js -->
    <script src="cordova.js""></script>
	 <script src="js/app.js"></script>
<script src="controladores/HomeCtrl.js"></script>
	<script src="controladores/Pag1Ctrl.js"></script>
	<script src="controladores/Pag2Ctrl.js"></script>

  <!-- rotas -->

  <script src="js/rotas.js"></script>


</head>
  <body ng-app="starter">
    <ion-nav-bar>
      <ion-nav-back-button>
                </ion-nav-back-button>
                    </ion-nav-bar>

                    <ion-nav-view></ion-nav-view> -->



<div>
<a ng-href="home">home </a>
<a ng-href="pag1">pagina1 </a>
<a ng-href="pag2">pagina2</a>


                  </body>
                  </html>

js routes.

 var App = angular.module('starter').config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');


  $stateProvider

    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl'
    })

    .state('pag1', {
      url: '/pag1',
      templateUrl: 'views/pag1.html',
      controller: 'Pag1Ctrl'
    })

    .state('pag2', {
      url: '/pag2',
      templateUrl: 'views/pag2.html',
      controller: 'Pag2Ctrl'
    })

  });

app js.

angular.module('starter', ['ui-route']);
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

home

angularjs ionic

  • Where are your controllers? You opened a <div> and didn’t close.

1 answer

2


If you’re using the ui-router, wherever you are, research $state and use the . go function()

Example:

angular.module('App', [ 'ionic',...])

.run(function($state) {

     if ( ... ) {
            $state.go('pag1');
     else {
            $state.go('pag2');
     }

});

Other Example:

angular.module('App')
    .controller('MeuController', function ($state) {
           $state.go('app.contato');
});

Browser other questions tagged angularjs ionic

You are not signed in. Login or sign up in order to post.