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).
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 :
Hi
I created the file ".npmrc" and enter the following line.
prefix = "E:\\Tools\\NodeJs"
Then all the node modules that I need are installed in this folder.
After that, I created a test project in temp folder.
By typing "ionic serve", the application starts on browser without any problem and it work. So far, so good.
However, if I try the next step, "ionic platform add android", I got the following error.
C:\Temp\myapp1>ionic platform add android
Adding in default Ionic hooks
Running command: "C:\Program Files\nodejs\node.exe" C:\Temp\myapp1\hooks\before_platform_add\init_directories.js C:\Temp\myapp1
Unable to fetch platform android: Error: Failed to parse json
Unexpected end of input
—-
I installed Android Sdk into folder "E:\Tools\Android"
In Environment Variables, I created %ANDROID_HOME% user variable which locates this folder.
And in "path" variable, I added the following entries:
%ANDROID_HOME%\tools;
%ANDROID_HOME%\platform-tools
Moreover:
E:\Tools\apache-ant-1.9.4\bin
%JAVA_HOME%\bin
C:\Program Files\nodejs
C:\Program Files\nodejs\node_modules\npm
C:\Program Files\nodejs\node_modules\npm\bin\
E:\Tools\NodeJs\node_modules\cordova\bin;E:\Tools\NodeJs\;
E:\Tools\NodeJs\node_modules\ionic\bin
What is the problem? What is missing?
Thanks for reply in advance.
this is an open bug https://issues.apache.org/jira/browse/CB-7526
reinstall cordova
sudo npm install -g cordova
Hi Dragan
Thanks for your reply. I tried to install cordova again. (multiple times)
However, I have still same problem.
Here is the complete commands and outputs. Should I uninstall or delete cordova before?
c:\Temp\myapp1>npm install -g cordova
npm WARN engine cordova-js@3.8.0: wanted: {"node":"~0.10.x"} (current: {"node":"0.12.1","npm":"2.5.1"})
npm WARN engine npm@1.3.4: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"0.12.1","npm":"2.5.1"})
npm WARN engine xmlbuilder@2.2.1: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"0.12.1","npm":"2.5.1"})
E:\Tools\NodeJs\cordova -> E:\Tools\NodeJs\node_modules\cordova\bin\cordova
cordova@4.3.0 E:\Tools\NodeJs\node_modules\cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.5)
└── cordova-lib@4.3.0 (valid-identifier@0.0.1, osenv@0.1.0, properties-parser@0.2.3, bplist-parser@0.0.6, mime@1.2.11, unorm@1.3.3, semver@2.0.11, dep
, init-package-json@1.3.0, plist@1.1.0, npm@1.3.4, cordova-js@3.8.0)
c:\Temp\myapp1>ionic platform add android
Adding in default Ionic hooks
Running command: "C:\Program Files\nodejs\node.exe" c:\Temp\myapp1\hooks\before_platform_add\init_directories.js c:\Temp\myapp1
Unable to fetch platform android: Error: Failed to parse json
Unexpected end of input
c:\Temp\myapp1>
Let's try something else. We first need to check if Android SDK is installed properly.
Execute these in command prompt:
<code>android</code>
and
<code>adb</code>
And tell me if you can see output.
I’m having the same issue as Tolga and I can’t find anything on this elsewhere. Android SDK is installed correctly and produces the correct outputs
Look at this StackOverflow response:
http://stackoverflow.com/questions/29213924/unable-to-fetch-platform-android-error-failed-to-parse-json
thankkkkk youuuuu sooooo dammmm much it help alot
hello. your tutorial is really helpful but how can I link third.html, fourth.html on home.html?
it is under multiple page mulit HTML architecture tutorial.
Thank you!