How to open template inside ion-content?

ionic-v1
1

I have a template that is my first page. I’m trying open this template inside of ion-content, how could I do this ?

trying this

index.html

<!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>
2

You need to put your ion-content between ion-view tags, like this:

<ion-view> 
   <ion-content>
    Your Content
   </ion-content>
</ion-view>
3

@YayO thanks for your attention. I tried follow your suggestion but still does not show template inside tag ion-content. Can you have any suggestion ?

trying this.

index.html

<!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",  
    views:{
        'mainContent':{
          templateUrl: 'templates/main.html'
        }
    },         
    controller: 'MainCtrl'   
  })
    
      .state('login', {
        url: '/login',
        views: {
            'mainContent':{
              templateUrl: 'templates/login.html'
            }
        }    
      });
    
      $urlRouterProvider.otherwise('/main');
    });

main.html

<ion-view>
  <ion-content>
   		<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-content>
</ion-view>
4

Ok, found the problem. In your app.js change

  .state('main', {    

url: "/main",  
views:{
    'mainContent':{
      templateUrl: 'templates/main.html'
    }
},         
controller: 'MainCtrl'

})

to

  .state('main', {    
url: "/main",  
controller: 'MainCtrl',
templateUrl: 'templates/main.html'

})

And in your index.html we will use ion-nav-view:

  <body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">
 <ion-nav-bar class="bar-stable">
       <ion-nav-title> <h1 class="title">Main</h1></ion-nav-title>
      </ion-nav-bar>
      
        <ion-nav-view>
        <ion-content class="padding" name="mainContent">          
        </ion-content>
    </ion-nav-view>
  </body>

The Ionic team made a very nice post about how routing works in Ionic/Angular , I suggest you take a look at that :relaxed:

1 Like
5

perfect, thanks a lot !

6

Thank you :slight_smile: