Как использовать службу $ q в угловых js для входа?

Question

Я новичок в угловых js. Я делаю ионное приложение, использующее угловые js и ионные рамки, Это мой файл service.js.

В этом я создал LoginService для входа в систему. но он не работает.

angular.module('starter.services', ['ngCookies']) 

.service('LoginService', function ($q, $http, $cookies, $rootScope) { 
    return { 
     loginUser: function (name, pw) { 
      var deferred = $q.defer(); 
      var promise = deferred.promise; 
      var user_data = $http.get("http://vanhalterenwatersport.nl/van/webservice/appc/login.php"); 
      user_data.then(function (result) { 
       var user = result.data; 
       log(user); 
       console.log($rootScope.session); 
      }) 
      function log(user) { 
       var i; 
       var isloggedin = false; 
       for (i = 0; i < user.length; i++) { 
        if (name == user[i].user_email && pw == user[i].password) { 
         isloggedin = true; 
         id = user[i].iduser; 
         $rootScope.session = id; 
         break; 
        } 
       } 
       if (isloggedin) { 
        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; 
     } 
    } 
}) 

Это файл мой controllers.js

angular.module('starter.controllers', ['ngRoute','ngCookies']) 

    .controller('AppCtrl', function($scope, $ionicModal, $timeout) { 

     // With the new view caching in Ionic, Controllers are only called 
     // when they are recreated or on app start, instead of every page change. 
     // To listen for when this page is active (for example, to refresh data), 
     // listen for the $ionicView.enter event: 
     //$scope.$on('$ionicView.enter', function(e) { 
     //}); 

    }) 

    .controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state, $cookies, $rootScope) { 
     $scope.data = {}; 

     $scope.create = function() { 
      $state.go('signup'); 
     } 

     $scope.forgot = function() { 
      $state.go('forgotpassword'); 
     } 

     $scope.login = function() { 
      console.log($scope.data.user_email); 
      LoginService.loginUser($scope.data.user_email, $scope.data.password).success(function (data) { 
       var wat = $rootScope.session; 
       console.log(wat); 
       $state.go('app.dashboard'); 
      }).error(function (data) { 
       var alertPopup = $ionicPopup.alert({ 
        title: 'Login failed!', 
        template: 'Please check your credentials!' 
       }); 
      }); 
     } 

    }) 

Это мой login.html

<ion-view view-title="Login" hide-nav-bar="true" name="login-view"> 

    <ion-content ng-controller="LoginCtrl"> 
    <div class="bar-header padding"> 
    <h1 class="title vanimage"><img src='img/logo.png'></h1> 
</div> 


     <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Username</span> 
      <input type="text" name="username" ng-model="data.user_email"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Password</span> 
      <input type="password" name="password" ng-model="data.password"> 
     </label> 
     <label class="item"> 
      <button class="button button-block button-positive" ng-click="login()">Log in</button> 
     </label> 
     </div> 



    <div class="padding"> 

    <button class="button button-block button-positive" ng-click="create()">Registeer hier</button> 

    <button class="button button-block button-positive" ng-click="forgot()">Password Vergeten?</button> 
    </div> 



    </ion-content> 
</ion-view> 

Answer 1

Вы должны поставить логику аутентификации в интерфейсе, более безопасным и эффективность.

Это код, который я использую для входа в службе приложения Ionic:

login: function(loginEmail, loginPassword) { 
    var deferred = $q.defer(); 
    $http({ 
     method: 'POST', 
     url: backend_url + '/auth', 
     // --- change content-type if needed (default = application/json) 
     // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
     data: { email: loginEmail, password: loginPassword } 
    }).then(function(result) { 
     if(typeof result.data.token !== 'undefined') deferred.resolve({ token: result.data.token }); 
     else deferred.reject({ error: 'invalid_response' }); 
    }, function(result) { 
     if(typeof result.data.error !== 'undefined') deferred.reject({ error: result.data.error, status: result.status }); 
     else deferred.reject({ error: 'invalid_login' }); 
    }); 
    return deferred.promise; 
}, 

Answer 2

$ HTTP всегда возвращает обещаешь, так что если вы хотите сделать это правильно в вашей службе, используя $ Q попробовать что-л так:

var fn = function (method, url) { 
    var deferred = $q.defer(); 
    $http(method, url) 
     .success(function (data) { 
      deferred.resolve(data); 
     } 
     .error(function (data, status) { 
       deferred.reject({ 
        data: data, 
        status: status 
       }); 
      }); 
      return deferred.promise; 
} 

И если вы хотите, чтобы вызвать эту функцию, вы должны сделать

fn(method, url) 
.then(
    function(result){ 
    ... do if ok (resolve) 
    }, 
    function(error) { 
    ... do if error (reject) 
    } 
) 

Answer 3

вы забыли вернуть deferred объект в службе .. Это, вероятно, приводит к следующей ошибке:

Cannot read property then of undefined

Я сделал простой пример, чтобы продемонстрировать $ Q услуги:

Controller - Войти функция

$scope.login = function login() { 

LoginService.loginuser($scope.data.user_email, $scope.data.password) 
    .then(function onLoginSuccess(response) { 
     // response should contain 'success' data 
     $state.go('app.dashboard'); 
    }, function onLoginFailed(error) { 
     var alertPopup = $ionicPopup.aler({ 
      title: 'Login failed!', 
      template: 'Please check your credentials!' 
     }); 
    }); 
} 

Сервис

var API = {}; 

function loginUser(email, password) { 

    var deferred = $q.defer(); 

    $http.get("http://vanhalterenwatersport.nl/van/webservice/appc/login.php") 
     .then(function onUserLoggedIn(response) { 
      deferred.resolve(response); 
     }, function onLoginFailed(error) { 
      deffered.reject(error); 
     }); 

     // Make sure to return your promise! 
     return deferred.promise; 
} 

API.loginUser = loginUser; 

Sidenote: Вы также используете GET в своей функции входа в систему. Для этого типа операций обычно вы должны указать объект данных для вашего back-end, который в свою очередь вернет вам результат.