Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons is not defined in my browser console ....

  • <!doctype html>
    <html lang=“en” ng-app=“mediaApp”>
    <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>


    <!-- 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
        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-navigator title=“Navigator” var=“myNavigator”>
    <div class=“center”>Simple Navigation</div>
    <div style=“text-align: center”>
    <ons-button modifier=“light” onclick=“myNavigator.pushPage(‘page1.html’, { animation : ‘slide’ } )”>
    Push Page

    <ons-template id=“page1.html”>
    <div class=“left”>
    <div class=“center”>Page 2</div>

    <div style="text-align: center">
      <br />
      <ons-button modifier="light" onclick="myNavigator.popPage()">
        Pop Page



    above is my code
    and after clicking on pop page button i get myNavigator is not defined error