$ injector.instantiate在angularjs中VS $ injector.get VS $ injector.invoke

Question

之间有什么区别$injector.instantiate,$injector.get并且$injector.invoke在AngularJS？

Answer 1

鉴于以下服务:

app.service('myService', function ($q, $http) {
  return {
    q:    $q,
    http: $http
  };
});

$ injector.get(name,[caller]);

返回所请求服务的实例.

$injector.get('myService');
// { q: $q, http: $http }

$ injector.invoke(fn,[self],[locals]);

调用提供的方法并从$ injector传递给定的参数.

$injector.invoke(function (myService, $http) {
  console.log(myService); // { q: $q, http: $http };
  console.log(this);      // { v: 'im this!' };
  console.log($http);     // null
}, { v: 'im this!' }, { $http: null });

$ injector.instantiate(Type,[locals]);

创建给定Type的新实例.获取构造函数,然后使用构造函数注释中指定的参数调用新实例.

假设以下'class':

function Person (fName, lName, $http, $q) {
  return {
    first_name: fName,
    last_name:  lName,
    http: $http,
    q:    $q
  }
}

现在,如果我们想在控制器中创建一个新 Person,我们可以这样做:

app.controller('...', function ($injector) {
  var $http = $injector.get('$http');
  var $q    = $injector.get('$q');
  var p     = new Person('kasper', 'lewau', $http, $q);

  console.log(p); // { first_name: 'kasper', last_name: 'lewau', http: $http, q: $q };
});

Imagine Person有大约20个依赖项,我们用这个$injector.get方法获取它们中的每一个.

繁琐!并且 - 您需要保持参数和参数同步.呃.

相反,你可以这样做:

app.controller('...', function ($injector) {
  var p = $injector.instantiate(Person, {
    fName: 'kasper',
    lName: 'lewau'
  });
  console.log(p); // { first_name: 'kasper', last_name: 'lewau', http: $http, q: $q };
});

并且 - 如果我们想要,我们可以为调用提供本地.instantiate,以便覆盖$injector.get()实例化时内部通常会获得的内容.

var p = $injector.instantiate(Person, {
  fName: 'kasper',
  lName: 'lewau'
}, { $http: 'Nothing!', $q: 'Nothing!' });
console.log(p); // { first_name: 'kasper', last_name: 'lewau', http: 'Nothing!', q: 'Nothing!' };

我希望这能解释三者之间的区别.如果您需要有关其差异的更多信息,我会推荐这些文章:

• http://taoofcode.net/studying-the-angular-injector/
• http://taoofcode.net/studying-the-angular-injector-annotate/
• http://taoofcode.net/studying-the-angular-injector-invoke/
• http://taoofcode.net/studying-the-angular-injector-getservice/
• http://taoofcode.net/studying-the-angular-js-injector-instantiate/