Multi page – multiple HTML architecture

 
This approach is almost identical to second solution, with only one difference. Instead of using one large HTML file every page is now held in a single separate HTML file. This way you will have a better readability, but an application will not be as fast (like in the second solution).
 
Demo
 
I will not embed a working example because it is identical to previous one. Click on a top link if you want to see how it works.
 
HTML:
 
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="MainCtrl">
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </div>
</body>

</html>
 
<!-- home.html -->
<ion-view>
  <ion-header-bar class="bar-header">
      <h1 class="title">Main Page</h1>
  </ion-header-bar>    
  <ion-content has-header="true" padding="true">
    <a class="button icon-right ion-chevron-right" href="#/second">Go to the music page!</a>
  </ion-content>
</ion-view>
 
<!-- second.html -->
<ion-view>
  <ion-header-bar class="bar-header">
      <h1 class="title">Second Page</h1>
  </ion-header-bar>        
  <ion-content has-header="true" padding="true">
    <a class="button icon-left ion-home" href="#/">Go back!</a>
  </ion-content>
</ion-view>
 
JavaScript:
 
var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/second',
    templateUrl: 'second.html'
  });
  $urlRouterProvider.otherwise('/');  
});

app.controller('MainCtrl', function($scope) {

});
 

Working example

 
I still want to show you how a second example looks like wrapped inside a real Android application.
 
Open your minimized command prompt. You should be inside a www directory. Copy our HTML example into index.html (copy only BODY content and don’t forget ng-app=”myApp”) and our JavaScript example into js/app.js file (replace previous content). Now get back to the project root directory and execute these three lines.
 
ionic platform add android
ionic build android
ionic emulate android
 
Here is how our app should look like :
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.