Monaca Onsen UI Discord Chat Github Repo

How to change page? Login form

  • I have a login form and need to show another page when the button is pressed.

    I tried “$ scope.ons.screen.presentPage (‘page2.html’);” but it does not work. This shows me an error “TypeError: Can not read property ‘presentPage’ of undefined”

    My version of onsen-ui is v1.3.14 (2015-11-24) and AngularJS is v1.4.9

    This is my code:


    <!DOCTYPE html>
    <html lang="en" ng-app="app">
      <meta charset="utf-8"/>
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="mobile-web-app-capable" content="yes" />
      <!-- CSS -->
      <link rel="stylesheet" type="text/css" href="css/index.css">
      <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
      <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
      <!-- JS -->
      <script src="lib/angular/angular.js"></script>
      <script src="lib/onsen/js/onsenui.js"></script>
      <!--<script src="js/jquery-1.12.0.min.js"></script>-->
      <script src="scripts/index.js"></script>
      <div ng-controller="LoginController">
        <input type="text" placeholder="ID" ng-model="id">
        <input type="password"  placeholder="Password" ng-model="password">
        <ons-button modifier="large" class="login-button" ng-click="login(id, password)">Log In</ons-button>


    angular.module('app', ['onsen']);
    app.controller('LoginController', function($scope){
        $scope.login = function(id, password){
            //alert("hello"); // This works
            $scope.ons.screen.presentPage('page2.html'); //Error here

    I tried to do this ( but not working.

    angular.module('app', ['onsen']);
    app.controller('LoginController', function($rootScope){
        $rootScope.login = function(id, password){

    Any solution?


  • Onsen UI

    Hi! I’m actually quite confused. There is no such a thing as $scope.ons.screen.presentPage so I don’t know what you are trying to do. Perhaps it’s something that was deprecated. I recommend you to check a bit more updated guides:

    I guess what you want to use is ons-navigator: