<!doctype html>
<html lang=“en” ng-app=“mediaApp”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
<title>iTunes Media Explorer</title>
<link rel=“stylesheet” href=“lib/onsen/css/onsenui.css”>
<link rel=“stylesheet” href=“lib/onsen/css/topcoat-mobile-onsen-ios7.css”>
<link rel=“stylesheet” href=“styles/app.css”/>
<!-- cordova.js or phonegap.js depending on which CLI used - automatically added into project when
using the CLI to build and run the application -->
<script src=“cordova.js”></script>
<script src=“lib/onsen/js/angular/angular.js”></script>
<script src=“lib/angular-resource.js”></script>
<script src=“lib/onsen/js/onsenui.js”></script>
<script src=“js/app.js”></script>
<script src=“js/controllers.js”></script>
<script src=“js/services.js”></script>
<script src=“js/filters.js”></script>
<script src=“js/directives.js”></script>
</head>
<body>
<!-- The sliding menu will show full screen and cover the status bar in iOS7. If you don't want this and want
it to look more like iOS6 then be sure to add the StatusBarPlugin from the project readme and set the
preference in your config.xml for the status bar overlay to false. I left some code in below to help
handle this, you can look at the different options supported for the StatusBar plugin at
http://plugins.cordova.io/#/package/org.apache.cordova.statusbar.
You could also add these preferences to the config.xml for the iOS platform in place of the code below
(note, these prefs may not yet be supported by PG Build)
<preference name="StatusBarBackgroundColor" value="#C9C9C9" />
<preference name="StatusBarOverlaysWebView" value="false" />
-->
<script language="javascript">
document.addEventListener('deviceready', function () {
// Sample code for Status Bar handling depending on preferences
// StatusBar.overlaysWebView(false); defaults to true
// StatusBar.backgroundColorByHexString("#C9C9C9"); defaults to black
// StatusBar.styleDefault(); dark text on lighter bg
})
ons.bootstrap();
</script>
<ons-navigator title=“Navigator” var=“myNavigator”>
<ons-page>
<ons-toolbar>
<div class=“center”>Simple Navigation</div>
</ons-toolbar>
<div style=“text-align: center”>
<br>
<ons-button modifier=“light” onclick=“myNavigator.pushPage(‘page1.html’, { animation : ‘slide’ } )”>
Push Page
</ons-button>
</div>
</ons-page>
</ons-navigator>
<ons-template id=“page1.html”>
<ons-page>
<ons-toolbar>
<div class=“left”>
<ons-back-button>Back</ons-back-button>
</div>
<div class=“center”>Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
</body>
</html>
above is my code
and after clicking on pop page button i get myNavigator is not defined error