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