CODEWITHSUNDEEP
androidangularjsionic-framework
Muhammad Umar
Muhammad Umar

Reputation: 237

ionic app showing white screen on android mobile

I made login and registration page on ionic framework. It working perfectly on browser but when i build android app by command ionic build android and install it on my mobile it showing white page but in my laptop browser it working perfectly my html code is 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script> 
    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>

<body>

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
        <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

<script id="auth.html" type="text/ng-template">
    <ion-view view-title="Xenforo Login" class="sigin-background">  

    <ion-content class="padding">

    <h2 style="text-align: center;">Login</h2><br/>

    <form name="authorizationForm" novalidate="" ng-submit="signIn(authorizationForm)"> 

    <div class="list">

    <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid, 'no-errors' : authorizationForm.username.$valid}">
    <span class="input-label">Username</span>
    <input type="text" name="username" ng-model="authorization.username" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container" ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error">
    <div ng-messages-include="error-list.html"></div>
    </div>

    <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted, 'no-errors' : authorizationForm.password.$valid  && authorizationForm.$submitted}">
    <span class="input-label">Password</span>
    <input type="password" name="password" ng-model="authorization.password" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>          

    </div>     

    <button class="button button-full button-positive" type="submit">
    Sign In
    </button>
    <a class="button button-full button-positive" href="#/register">Sign Up</a>
    </form>   

    </ion-content>

    </ion-view>
</script>  

   <script id="register.html" type="text/ng-template">
    <ion-view view-title="Xenforo Registration" class="sigin-background">  

    <ion-content class="padding">

    <h2 style="text-align: center;">Registration</h2><br/>

    <form name="registrationForm" novalidate="" ng-submit="signUp(registrationForm)"> 

    <div class="list">

    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.username.$invalid, 'no-errors' : registrationForm.username.$valid}">
    <span class="input-label">Username</span>
    <input type="text" name="username" ng-model="authorization.username" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container" ng-show="registrationForm.username.$error && registrationForm.$submitted" ng-messages="registrationForm.username.$error">
    <div ng-messages-include="error-list.html"></div>
    </div>

    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.email.$invalid && registrationForm.$submitted, 'no-errors' : registrationForm.email.$valid  && registrationForm.$submitted}">
    <span class="input-label">Email</span>
    <input type="password" name="email" ng-model="authorization.email" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="registrationForm.email.$error && registrationForm.$submitted" ng-messages="registrationForm.email.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>
    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.password.$invalid && registrationForm.$submitted, 'no-errors' : registrationForm.password.$valid  && registrationForm.$submitted}">
    <span class="input-label">Password</span>
    <input type="password" name="password" ng-model="authorization.password" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="registrationForm.password.$error && registrationForm.$submitted" ng-messages="registrationForm.password.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>          


    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.repeatepassword.$invalid && registrationForm.$submitted, 'no-errors' : registrationForm.repeatepassword.$valid  && registrationForm.$submitted}">
    <span class="input-label">Repeat Password</span>
    <input type="password" name="repeatepassword" ng-model="authorization.repeatepassword" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="registrationForm.repeatepassword.$error && registrationForm.$submitted" ng-messages="registrationForm.repeatepassword.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>


    </div>     

    <button class="button button-full button-positive" type="submit">
    Sign Up
    </button>

    </form>   

    </ion-content>

    </ion-view>
</script> 


<script id="home.html" type="text/ng-template">
    <ion-view view-title="Second page">
    <ion-content class="padding">
    <h1>Wellcome</h1>
    </ion-content>
    </ion-view>
</script>   

<script id="error-list.html" type="text/ng-template">  
    <div class="error" ng-message="required">
    <i class="ion-information-circled"></i> 
    This field is required!
    </div>
    <div class="error" ng-message="minlength">
    <i class="ion-information-circled"></i> 
    Minimum length of this field is 5 characters!
    </div>
    <div class="error" ng-message="maxlength">
    <i class="ion-information-circled"></i> 
    Maximum length of this field is 20 characters!
    </div>
</script>

My angular code is below

var nameApp = angular.module('starter', ['ionic', 'ngMessages']);

nameApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('auth', {
      url: '/auth',
      templateUrl: 'auth.html',
      controller: 'AuthCtrl'
    })
    .state('register', {
      url: '/register',
      templateUrl: 'register.html',
      controller: 'RegisterCtrl'
    })
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    });

  $urlRouterProvider.otherwise("/auth");

});


nameApp.controller('AuthCtrl', function($scope, $state) {

  $scope.authorization = {
    username: '',
    password : ''   
  };  

  $scope.signIn = function(form) {
    if(form.$valid) {
      $state.go('home');
    }
  };  

});



nameApp.controller('RegisterCtrl', function($scope, $state) {

  $scope.authorization = {
    username: '',
    password : '',   
    repeatepassword : ''   
  };  

  $scope.signUp = function(form) {
    if(form.$valid) {
      $state.go('auth');
    }
  };  

});


nameApp.controller('HomeCtrl', function($scope) {

});

i don't know where i am wrong please help me

Upvotes: 0

Views: 1466

Answers (4)

Ronald Ara&#250;jo
Ronald Ara&#250;jo

Reputation: 1479

In line 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>

include http: or https:.

Upvotes: 0

nabin
nabin

Reputation: 687

If it is running properly in browser and not in device, your can use google chrome browser and enter the url chrome://inspect to check the console and find out the error occuring in device. There may be some plugin issues. This can be done only in android mobile running android OS ver . kitkat or higher

Upvotes: 1

Swapnil Patwa
Swapnil Patwa

Reputation: 4089

You can inspect you app using Chrome Remote Debugging on Android. You are already using CLI 1.7.14 then you don't need to make any configuration to inspect app on WebView . Follow link will help you to setup your android device to inspect ionic app on chrome devtool- https://developer.chrome.com/devtools/docs/remote-debugging This helped me a lot to debug my app on real environment.

Upvotes: 0

LJ.Wizard
LJ.Wizard

Reputation: 605

I can't see where you are declaring that your app is an Angular app. Try adding this attribute to your body tag:

<body ng-app="starter">

Upvotes: 0

Related Questions