对服务vs工厂感到困惑

据我了解,当在工厂内部时,我返回一个被注入控制器的对象。 当我使用this服务处理对象时,不会返回任何东西。

我假设一个服务总是单身,并且一个新的工厂对象被注入到每个控制器中。 然而,事实证明,工厂对象也是单身人士?

示例代码来演示:

var factories = angular.module('app.factories', []);
var app = angular.module('app',  ['ngResource', 'app.factories']);

factories.factory('User', function () {
  return {
    first: 'John',
    last: 'Doe'
  };
});

app.controller('ACtrl', function($scope, User) {
  $scope.user = User;
});

app.controller('BCtrl', function($scope, User) {
  $scope.user = User;
});

当在ACtrl改变user.first时,事实证明user.first中的BCtrl也被改变了,例如User是一个singleton?

我的假设是,一个新实例是在一个工厂的控制器中注入的?


所有角度服务都是单身人士

文档(请参阅服务为单例):https://docs.angularjs.org/guide/services

最后,认识到所有的Angular服务都是应用程序单例很重要。 这意味着每个喷油器只有一个给定服务的实例。

基本上服务和工厂的区别如下:

app.service('myService', function() {

  // service is just a constructor function
  // that will be called with 'new'

  this.sayHello = function(name) {
     return "Hi " + name + "!";
  };
});

app.factory('myFactory', function() {

  // factory returns an object
  // you can run some code before

  return {
    sayHello : function(name) {
      return "Hi " + name + "!";
    }
  }
});

查看关于$ provide的演示文稿:http://slides.wesalvaro.com/20121113/#/

这些幻灯片用于其中一个AngularJs聚会:http://blog.angularjs.org/2012/11/more-angularjs-meetup-videos.html


对于我来说,当我意识到它们都以相同的方式工作时,启示就出现了:通过运行一次 ,存储它们获得的值,然后在通过依赖注入引用时缓存相同的存储值

假设我们有:

app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);

三者的区别在于:

  • a的存储值来自运行fn ,换句话说: fn()
  • b的存储值来自new fn ,换句话说: new fn()
  • c的存储值来自首先通过new fn获取实例,然后运行实例的$get方法
  • 这意味着,在角度内有一个类似缓存对象的内容,每次注入的值只会在第一次注入时指定一次,其中:

    cache.a = fn()
    cache.b = new fn()
    cache.c = (new fn()).$get()
    

    这就是我们在服务中使用this原因,并定义了一个this.$get in提供程序。

    希望这可以帮助。


    现场示例

    “你好世界”的例子

    factory / service / provider

    var myApp = angular.module('myApp', []);
    
    //service style, probably the simplest one
    myApp.service('helloWorldFromService', function() {
        this.sayHello = function() {
            return "Hello, World!"
        };
    });
    
    //factory style, more involved but more sophisticated
    myApp.factory('helloWorldFromFactory', function() {
        return {
            sayHello: function() {
                return "Hello, World!"
            }
        };
    });
    
    //provider style, full blown, configurable version     
    myApp.provider('helloWorld', function() {
        // In the provider function, you cannot inject any
        // service or factory. This can only be done at the
        // "$get" method.
    
        this.name = 'Default';
    
        this.$get = function() {
            var name = this.name;
            return {
                sayHello: function() {
                    return "Hello, " + name + "!"
                }
            }
        };
    
        this.setName = function(name) {
            this.name = name;
        };
    });
    
    //hey, we can configure a provider!            
    myApp.config(function(helloWorldProvider){
        helloWorldProvider.setName('World');
    });
    
    
    function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    
        $scope.hellos = [
            helloWorld.sayHello(),
            helloWorldFromFactory.sayHello(),
            helloWorldFromService.sayHello()];
    }​
    
    链接地址: http://www.djcxy.com/p/2183.html

    上一篇: Confused about Service vs Factory

    下一篇: 'this' vs $scope in AngularJS controllers