如何将一个服务/工厂注入到控制器中使用?

17 浏览
0 Comments

如何将一个服务/工厂注入到控制器中使用?

我刚接触AngularJS，并花了几个小时在网上搜索，但始终找不到答案（每个博客或网站似乎都说了不同的或者已经过时的东西）。

我知道服务/工厂可以保存对象及其成员函数。

我想在controller.js文件中创建该对象的一个实例，并使用它的成员函数（该文件包含应用程序使用的控制器）。

然而，我无法理解如何设置一个服务或工厂，以及如何注入它，以便从服务中创建该对象的一个实例并由控制器文件使用。

有没有人了解任何简单的例子来说明这一点？

非常感谢！

0

2 答案

0 Comments

问题的出现原因是，当myApp、service和controller位于不同的文件中时，需要找到一种方法将service注入到controller中。

解决方法是，在service文件的顶部使用myapp=angular.module('myApp')来获取之前定义的myapp。然后，在页面中包含这两个.js文件即可。

以下是解决方法的代码示例：

文件1.js：

var myapp = angular.module('myApp',[]);
myapp.service('MyService',['$http', function($http) {
   return {
       doSomeThing: function() {
           // do something here with $http or whatever
       },
       doSomeThingElse: function() {
       }
   }
}]);

文件2.js：

myapp.controller('MyController',['MyService',function(MyService) {
   MyService.doSomeThing();
}]);

在页面中引入这两个文件：

这样，MyService就会被成功注入到MyController中。

0
0 Comments

在搜索了几个小时后，我偶然发现了一个完美的示例，演示了如何以一种简洁而简单的方式向控制器注入一个服务。有趣的是，这个示例实际上是在AngularJS官方文档的AngularJS概述部分中找到的 - 真是倒霉。

不管怎样，下面是示例代码：

HTML:




Invoice:
  

    Quantity: 
  

  

    Costs: 
    
  

  

    Total:
    
      {{invoice.total(c) | currency:c}}

控制器:

angular.module('invoice2', ['finance2'])
.controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = currencyConverter.currencies;
this.total = function total(outCurr) {
  return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
};
this.pay = function pay() {
  window.alert("Thanks!");
};
}]);

服务:

angular.module('finance2', [])
.factory('currencyConverter', function() {
var currencies = ['USD', 'EUR', 'CNY'];
var usdToForeignRates = {
  USD: 1,
  EUR: 0.74,
  CNY: 6.09
};
var convert = function (amount, inCurr, outCurr) {
  return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
};
return {
  currencies: currencies,
  convert: convert
};
});

希望这个简单的示例可以帮助那些也发现学习AngularJS很困难的人！

示例来源于：https://docs.angularjs.org/guide/concepts

0