Open pages in content?

Asked

Viewed 2,233 times

1

I am using Angularjs and Ionic to create hybrid applications and I have a question. I created a project with Blank template, no index.html veio criado a tag ion-content that I believe eh where it renders the other pages. The problem is that I’m not getting these other pages to open in this content. In my case I want to open the pages main.html and login.html in the <ion-content name="mainContent">.

How to do this ?

I’m trying like this.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <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">
    -->

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

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

    <!-- controllers -->
    <script src="js/controllers/MainCtrl.js"></script>

    <!--directives-->



  </head>
  <body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">>

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Page</h1>
      </ion-header-bar>

      <ion-content class="padding" name="mainContent">         
      </ion-content>

    </ion-pane>
  </body>
</html>

app js.

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

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider){
  $stateProvider

  .state('main', {    
    url: "/main",
    replace:true,
    views:{
      'mainContent':{
        templateUrl: 'templates/main.html',
      }
    },    
    controller: 'MainCtrl',    
  })

  .state('login', {
    url: '/login',
    views: {
      'mainContent': {
        templateUrl: 'templates/login.html'
      }
    }
  });

  $urlRouterProvider.otherwise('/main');
});

main.html

<ion-content>
    <ion-pane>
        <div class="principal">
              <button class="button button-block button-positive" ng-click="loginFacebook();">
                  Login by Facebook
              </button>
               <button class="button button-block button-assertive" ng-click="goTo('templates/login.html');">
                  Login
              </button>
               <button class="button button-block button-assertive" ng-click="goTo('templates/login.html');">
                  Add Login
              </button>
              <a href="#/login">Go to login</a>
        </div>
    </ion-pane> 
</ion-content>

login.html

<ion-content>
  <ion-pane>
    <div class="list list-inset">
        <label class="item item-input">
            <input type="text" placeholder="Username" ng-model="data.username">
        </label>
        <label class="item item-input">
            <input type="password" placeholder="Password" ng-model="data.password">
        </label>
    </div>
    <button class="button button-block button-calm" ng-click="login()">Login</button>
  </ion-pane>
</ion-content>
ionic

  • Try to use the <ion-nav-view></ion-nav-view>

  • My answer answers your question?

1 answer

0


The Ionic uses the ui-router to navigate between States. States are usually composed of a view (html template) and a controller (js).

There are several ways to navigate between Tates, for example using ui-sref= instead of href=. Or programmatically (in controllers) injecting $state in the controller and calling $state.go('myState')

You can set the default state in setting time, thus:

angular.module('App', [ 'ionic' ])
        .config(function ($stateProvider) {

                          $urlRouterProvider.otherwise('/myState');
                          ...
})

That said, it’s not about loading html into <ion-content>, but to navigate between Tates, since Ionic and ui-router manipulate your HTML page automatically to effect navigation.

This is a SPA (Simple Page App) app where several HTML templates are loaded on the single page and are hidden or shown as you navigate between states.

Browser other questions tagged ionic

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