HTML

Question

我是AngularJS的新手，我花了好几个小时在线搜索，但我找不到答案（每个博客或网站似乎都说不同或过时）。

我知道服务/工厂可以保存对象及其各自的成员函数。我想创建一个这样的对象的实例，并在controller.js文件中使用它们的成员函数（该文件包含应用程序使用的控制器）。

但是，我根本无法理解如何设置服务或工厂以及如何注入它，以便控制器文件可以创建和使用服务中的对象实例。

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

非常感谢！

Answer 1

var myapp = angular.module('myApp',[]);

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

myapp.controller('MyController',['MyService',function(MyService) {


   MyService.doSomeThing();

}]);

Answer 2

经过几个小时的搜索，我偶然发现了如何以干净简单的方式向控制器注入服务的完美示例。有趣的是，这个例子实际上是在AngularJS官方文档的AngularJS部分的概述中找到的 - 谈论运气不好。

无论如何，这是：

HTML

<!--include the separate controller, service, & app js files here -->
<div ng-app="invoice2" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="invoice.cost" required >
    <select ng-model="invoice.inCurr">
      <option ng-repeat="c in invoice.currencies">{{c}}</option>
    </select>
  </div>
  <div>
    <b>Total:</b>
    <span ng-repeat="c in invoice.currencies">
      {{invoice.total(c) | currency:c}}
    </span>
    <button class="btn" ng-click="invoice.pay()">Pay</button>
  </div>

控制器

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

如何注入控制器使用的服务/工厂？

2 个答案:

HTML

控制器

服务