如何正确设置工厂

Question

我正在尝试将我的 Firebase 身份验证逻辑从控制器移至工厂，但运行遇到基本设置问题。我正在使用 Angularfire 在我的应用程序中完成身份验证，并遵循了文档 here.

在我的控制器中一切正常，但我不确定如何在工厂中正确设置代码。我当前的代码如下：

angular
  .module('app')
  .factory('authService', authService);

authService.$inject = ['$firebaseAuth'];

var ref = new Firebase('https://[MY-FIREBASE].firebaseio.com');
var auth = $firebaseAuth(ref);

return {
    createUser(email,password): auth.$createUser({
        email: email,
        password: password
    }).then(function(userData) {
        $location.path('/people');
    }).catch(function(error) {
        alert(error);
    }),

    connectFacebook: auth.$authWithOAuthPopup("facebook").then(function(authData) {
        $location.path('/places');
    }).catch(function(error) {
        alert("Authentication failed:", error);
    }),

    removeUser: auth.$removeUser({
        email: vm.email,
        password: vm.password
    }).then(function() {
        alert('User removed');
    }).catch(function(error) {
        alert(error);
    })
}

我的目标是将这个工厂注入我的登录控制器并连接调用适当函数的点击事件，例如 authService.createUser($scope.email,$scope.password);.

Answer 1

这更像是一个使用服务而不是工厂的用例。

使用函数语法设置 factory/service 比使用此对象样式要容易得多。

angular.module('app', [])

.service('AuthService', function($firebaseAuth) {
  var ref = new Firebase('https://[MY-FIREBASE].firebaseio.com');
  var auth = $firebaseAuth(ref);

  this.createUser = function(email, password) {
    // ...
  };

  this.connectFacebook = function() {
    // ...
  };

  this.removeUser = function(email, password) {
    // ...
  };
})

服务公开附加到 this 的任何内容，我们可以将其注入并在应用程序的其他地方使用它。

.controller('AuthController', function($scope, AuthService) {
  $scope.email = '';
  $scope.password = '';

  $scope.register = function() {
    AuthService.createUser($scope.email, $scope.password); 
  };
})

Answer 2

这是我的工厂的样子：

angular.module('myApp').factory('RegistrationFactory', ['$http', function($http) {

    var urlBase = '/api/';
    var dataFactory = {};

    dataFactory.IsRegistered = function () {
        return $http.get(urlBase);
    };

    dataFactory.RegisterUser = function (username, password, deviceId) {
        var RegistrationObj = { registration: { DeviceReference: deviceId, Username: username, Password: password, VehicleReg: "" } };
        return $http.post(urlBase + 'RegisterDevice', RegistrationObj);
    };  
    return dataFactory;
}]);

然后我可以像这样在我的控制器中使用它：

angular.module('myApp').controller('RegisterCtrl', function ($scope, RegistrationFactory) {
    RegistrationFactory.RegisterUser(username, password, $cordovaDevice.getUUID())
});

Answer 3

您需要包含一些功能才能使一切正常...

(function() {
    "use strict";
    angular
      .module('app', []) // dont forget the '[]' here
      .factory('authService', authService);

    authService.$inject = ['$firebaseAuth'];

    function authService($firebaseAuth) {
      var ref = new Firebase('https://[MY-FIREBASE].firebaseio.com');
      var auth = $firebaseAuth(ref);

        return {
            createUser: function(email,password) {
              auth.$createUser({
                  email: email,
                  password: password
              }).then(function(userData) {
                  $location.path('/people');
              }).catch(function(error) {
                  alert(error);
              })
            },

            connectFacebook: auth.$authWithOAuthPopup("facebook").then(function(authData) {
                $location.path('/places');
            }).catch(function(error) {
                alert("Authentication failed:", error);
            }),

            removeUser: auth.$removeUser({
                email: vm.email,
                password: vm.password
            }).then(function() {
                alert('User removed');
            }).catch(function(error) {
                alert(error);
            })
        }
    }
}());

然后我们将其全部包装在一个 IIFE 中，并从 window 中删除任何全局变量。

如何正确设置工厂

How to properly setup factory

javascript

angularjs

firebase

factory

angularfire