javascript - 如何正确使用 Angular 工厂？

Question

我已经阅读了大量有关 Angular 依赖注入(inject)和工厂与服务等的文章，就像这篇文章中的那样 - angular.service vs angular.factory

我正在努力将其付诸实践，想知道您是否可以就如何做到这一点向我提供建议。

我当前的代码如下所示

var app = angular.module("martysCoolApp", ['firebase', 'ngRoute'])

function mainController($scope, $firebase) {
   var db = new Firebase("https://**.firebaseio.com/");
   $scope.messages = $firebase(db);

   $scope.addItem = function(error) {
       if (error.keyCode != 13) return;

       $scope.messages.$add({ name: $scope.name, price: $scope.price });

       $scope.name = "";
       $scope.price = "";
   };
}

我决定使用 Angular 路线，并将这个基本功能分成两个不同的 Controller ，用于我的测试应用程序。 MainController 将只显示 firebase 数据库中的所有内容，并且 AdminController 将能够向其中添加消息

var app = angular.module("martysCoolApp", ['firebase', 'ngRoute'])

.factory('fireBaseConnectionService', $firebase)
 //code in here to connect to firebase and add messages

.controller('MainController', function(fireBaseConnectionService, $scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;

    //code here to retrieve everything from firebase db
})
.controller('AdminController', function(fireBaseConnectionService, $scope, $routeParams) {
    $scope.name = "AdminController";
    $scope.params = $routeParams;

    //code here to add a row to the db

})
.config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        redirectTo: '/menu'
    })
        .when('/menu', {
            path: '/menu',
            templateUrl: 'partials/menu.html',
            controller: 'MainController'
        })
        .when('/admin', {
            templateUrl: 'partials/admin.html',
            controller: 'AdminController'
        })
        .otherwise({
            redirectTo: '/'
        });

$locationProvider.html5Mode(false);

});

我的问题是我不想连接到每个 Controller 中的 firebase 数据库。我想要一个工厂来为我处理这个问题，并且可能有一些功能，我可以从我的 Controller 调用它来查看数据库中的所有内容并向数据库添加一些内容

Answer 1

工厂()

正如我们所见，factory() 方法是创建和配置服务的快速方法。 factory() 函数有两个参数:

• 名称(字符串)

此参数采用我们要注册的服务的名称。

• getFn(函数)

该函数在 Angular 创建服务时运行。

angular.module('myApp')
  .factory('myService', function() {
    return {
     'username': 'auser'
    }
  });

getFn 将在应用程序生命周期内调用一次，因为该服务是单例 目的。与其他 Angular 服务一样，当我们定义服务时，getFn 可以采用数组或 将采用其他可注入(inject)对象的函数。

getFn 函数可以返回从原始值到函数再到对象的任何内容(类似于 value() 函数)。

angular.module('myApp')
   .factory('githubService', [
    '$http', function($http) {
      return {
        getUserEvents: function(username) {
      // ...
     }
    }
}]);

service()

如果我们想使用构造函数注册一个服务实例，我们可以使用service()， 这使我们能够为我们的服务对象注册一个构造函数。 service() 方法有两个参数:

• 名称(字符串)

此参数采用我们要注册的服务实例的名称。

• 构造函数(函数)

这是我们将调用来实例化实例的构造函数。 service() 函数将在创建实例时使用 new 关键字实例化该实例 实例。

var Person = function($http) {
   this.getName = function() {
    return $http({
     method: 'GET',
     url: '/api/user'
    });
   };
};
angular.service('personService', Person);

提供商

这些工厂都是通过$provide服务创建的，该服务负责实例化 这些提供者在运行时。

angular.module('myApp')
    .factory('myService', function() {
      return {
       'username': 'auser'
    }
   })
// This is equivalent to the
// above use of factory
.provider('myService', {
    $get: function() {
    return {
      'username': 'auser'
    }
   }
});

当我们可以只使用 .factory() 时，为什么我们需要使用 .provider() 方法 方法？

答案在于我们是否需要能够从外部配置由 .provider() 方法使用 Angular .config() 函数。与其他服务方式不同 创建时，我们可以在 config() 方法中注入(inject)一个特殊的属性。

from ng-book