I am trying to make a http call in mobile app using ionic framework.
Below is my UI:
<ion-view title="Register">
<ion-content overflow-scroll="true" padding="true" scroll="false" class="has-header has-footer" ng-controller="registerCtrl">
<form class="list" name="regform" novalidate>
<ion-list>
<label class="item item-input" name="Number">
<span class="input-label">Number</span>
<input type="tel" name="num" placeholder="" ng-model="user.ph_no" ng-minlength="10" ng-maxlength="10" required>
</label>
<label class="item item-input" name="Email">
<span class="input-label">Email</span>
<input type="email" name="email" placeholder="" ng-model="user.email" ng-minlength="6" required>
</label>
<label class="item item-input" name="Password">
<span class="input-label">Password</span>
<input type="password" name="password" placeholder="" ng-model="user.password" ng-minlength="6" required>
</label>
</ion-list>
<div class="padding">
<p ng-show="regform.num.$error.required">* Phone Number is required</p>
<p ng-show="regform.num.$error.minlength">* Phone Number should be 10 digits</p>
<p ng-show="regform.num.$error.maxlength">* Phone Number should be 10 digits</p>
<p ng-show="regform.email.$error.required">* Email is required</p>
<p ng-show="regform.email.$error.minlength">* Email must be longer than 5 letters</p>
<p ng-show="regform.password.$error.required">* Password is required</p>
<p ng-show="regform.password.$error.minlength">* Password must be longer than 6 characters</p>
</div>
<ion-checkbox name="checkbox" ng-model="checked">I Agree with T&C</ion-checkbox>
<a ng-click="proceed()" class="button button-block button-positive" ng-disabled="!checked || regform.$invalid">Proceed</a>
</form>
</ion-content>
</ion-view>
I registered a HttpService service in app.js file.
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.service('HttpService', function($http) {
return {
getPost: function() {
// $http returns a promise, which has a then function, which also returns a promise.
return $http.get('http://jsonplaceholder.typicode.com/posts/1')
.then(function (response) {
// In the response, resp.data contains the result. Check the console to see all of the data returned.
console.log('Get Post', response);
return response.data;
});
}
};
});
In controller i.e. controllers.js, I am using in ng-click event:
angular.module('app.controllers', ['ionic'])
.controller('registerCtrl', function($scope,backcallFactory, HttpService, $ionicLoading) {
backcallFactory.backcallfun();
$scope.user = {};
$scope.proceed = function() {
$ionicLoading.show({
template: 'Loading...'
});
HttpService.getPost()
.then(function(response) {
$scope.user.ph_no = response;
$ionicLoading.hide();
});
};
})
.factory('backcallFactory', ['$state','$ionicPlatform','$ionicHistory','$timeout',function($state,$ionicPlatform,$ionicHistory,$timeout){
var obj={}
obj.backcallfun=function(){
var backbutton=0;
$ionicPlatform.registerBackButtonAction(function () {
if ($state.current.name == "register") {
/*var action= confirm("Do you want to Exit?");
if(action){
navigator.app.exitApp();
}//no else here just if*/
if(backbutton==0){
backbutton++;
window.plugins.toast.showShortCenter('Press again to exit');
$timeout(function(){backbutton=0;},5000);
}else{
navigator.app.exitApp();
}
}
else{
$ionicHistory.goBack();
/*$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('app.home');*/
//go to home page
}
}, 100);//registerBackButton
}//backcallfun
return obj;
}])
The problem is, when i click the proceed button it is stucked at ionic Loading screen.
I am literally using tutorial http://appcamp.io/courses/networking/fetching-data-api but with in button click event.
Can someone tell what I am missing.
