i’m having difficulty with my code to set login credentials and to move on to next page and display next page.
HTML CODE
<form method="post" >
<div id="form-wrapper" ng-controller="LoginCtrl">
<label class="item item-input item-floating-label">
<h2 class="light">
Enter Username</h2> <input type="text" id="username" ng-model="username" placeholder="Username">
</label>
<label class="item item-input item-floating-label">
<h2 class="light">
Enter Password</h2> <input type="Password" id="password" ng-model="password" placeholder="*********">
</label>
<button class="button button-block button-positive" ng-click="login()">
login
</button>
</div>
</form>
JS CODE
STATES
angular.module(‘starter’, [‘ionic’])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘home’, {
url: ‘/home’,
templateUrl: ‘page2.html’,
controller: ‘HomeCtrl’
})
.state(‘login’, {
url: ‘/login’,
templateUrl: ‘lndex.html’,
controller: ‘LoginCtrl’
})
$urlRouterProvider.otherwise('/login');
});
HOME PAGE CONTROLLER
angular.module(‘starter’, [‘ionic’])
.controller(‘HomeCtrl’, function() {
this.photos = [
‘img/weq.gif’,
‘img/a.gif’,
‘img/b.gif’,
‘img/c.gif’,
‘img/d.gif’,
‘img/qw.gif’,
];
});
LOGIN PAGE CONTROLLER
angular.module(‘starter’, [‘ionic’])
.controller(‘LoginCtrl’, function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {
};
$scope.login = function() {
console.log("LOGIN user: " + $scope.data.username + " - PW: " + $scope.data.password);
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
console.log("Login Successful");
$state.go('home');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
}
});
Hi, @azhar11114
You have used ng-model="username"
and ng-mode="password"
in this code, but you have write a code in controller something like, ($scope.data.username, $scope.data.password)
and its not correct. Instead use below mentioned code.
LoginService.loginUser ($scope.username, $scope.password).success(function(data) {
....................................
})
Hope this will solve your issue.
Feel free to mark it as a solution and you can always like the answer by clicking heart icon.
i’m still having same error messages. this is my code after some changes.
Login Controller
angular.module(‘starter’, [‘ionic’])
.controller(‘LoginCtrl’, function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {
};
var login = function() {
console.log("LOGIN user: " + $scope.username + " - PW: " + $scope.password);
LoginService.loginUser($scope.username, $scope.password).success(function(data) {
console.log("Login Successful");
$state.go('home');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
}
});
and html code looks like this
<body ng-app="starter" >
<ion-content>
<div id="form-wrapper" ng-controller="LoginCtrl">
<form novalidate ng-submit="login()" >
<label class="item item-input item-floating-label">
<h2 class="light">
Enter Username</h2> <input type="text" id="username" ng-model="username" placeholder="Username">
</label>
<label class="item item-input item-floating-label">
<h2 class="light">
Enter Password</h2> <input type="Password" id="password" ng-model="password" placeholder="*********">
</label>
<button class="button button-block button-positive" type="submit">
login
</button>
</form>
</div>
</ion-content>
</body>
hey, @azhar11114
What actually your getting at your console.log and try to figure out by putting break point at this : `[quote=“azhar11114, post:1, topic:82024”]
LoginService.loginUser
[/quote]
`
i’m trying that if my username and password is there so it will give a succcess message and move toward next page.so when i’ll attach it with database in future i don;t have to rewrite the code for it i just simply take input and match it with database
dotman
March 8, 2017, 11:04pm
6
show what is inside your LoginService