ionic login button not working in android - button

Question

Button is working when run on browser using ionic serve and ionic serve --lab command. I am able to login in web browser and redirected to dashboard.
When I generate .apk file and run on android device....login button is not working.
Not redirected to dashboard by click on login button with username and password.
I have tried this reference: Ionic android button not working
but still not get success...please give me any solution .
Login Template
<li class="item-content">
<div class="item-inner">
<div class="item-input">
<label class="item item-input">
<input class="style login3" type="email" name="email" placeholder="E-mail" ng-model="user.email">
</label>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-input">
<label class="item item-input">
<input class="style login3" type="password" name="password" placeholder="Password" ng-model="user.pwdForLogin">
</label>
</div>
</div>
</li>
</div>
<button ng-click="signIn(user)" >
Sign In
</button>
App.js
// State to represent Login View
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl',
resolve: {
// controller will not be loaded until $waitForAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth",
function (Auth) {
// $waitForAuth returns a promise so the resolve waits for it to complete
return Auth.$waitForAuth();
}]
}
})
Please help me....

Answer 1

Here I will show you a working example and you can use it for your code.
MY Custom CSS
.bgLogin{
width: 100%;
background-image: url("http://static.vecteezy.com/system/resources/previews/000/084/251/original/christmas-bokeh-vector-background.jpg");
background-size: 100% 100% !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.login-content
{
margin-top:8%;
padding:0px 10px 0px 10px;
}
.login-content .login-form
{
margin-top:40%;
}
View/HTML
<ion-view class="bgLogin" name="login-view">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content class="login-content">
<div class="login-form">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block login-button" ng-click="login()">Login</button>
</ion-content>
</ion-view>
App.js
Assuming your adding references to controller and service
var appStarter = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']);
define state
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
controller for login
appControllers.controller('LoginCtrl', function($scope, $rootScope, LoginService, $ionicPopup, $state, $ionicHistory) {
$scope.data = {};
$scope.login = function() {
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
$rootScope.userName = $scope.data.username.toUpperCase();
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('app.welcome');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!',
buttons: [
{
text: 'Ok',
type: 'orange-btn'
}
]
});
});
}
});
Service for login
.service('LoginService', function($q) {
return {
loginUser: function(name, pw) {
var deferred = $q.defer();
var promise = deferred.promise;
if (name.toLowerCase() == 'ens' && pw == 'ens' || name.toLowerCase() == 'adam' && pw == 'adam'|| name.toLowerCase() == 'illum' && pw == 'illum'|| name.toLowerCase() == 'test' && pw == 'test') {
deferred.resolve('Welcome ' + name + '!');
} else {
deferred.reject('Wrong credentials.');
}
promise.success = function(fn) {
promise.then(fn);
return promise;
}
promise.error = function(fn) {
promise.then(null, fn);
return promise;
}
return promise;
}
}
});