Difficulty navigating between views using Ionic Framework

Question

Difficulty navigating between views using Ionic Framework

Navigation

#1 by (1 votes)

5

Recently Ionic started, and I believe that as a beginner's doubt, I'm having doubts about opening pages, that is, navigating between my views in case they are 3 would be them, home, pag1, pag2, just for the purposes of test a random message should appear. If the routes are correct, would it be necessary to load a module? Sincerely,

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>

rotas.js

 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

asked by anonymous 26.03.2016 / 04:51

1 answer

Windows Universal Apps C ++ vs C # loop in correlation matrix in R

score 1 · Answer 1

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

Example:

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

.run(function($state) {

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

});

Another example:

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