AngularJS 中的服务不工作

Question

我正在研究尽可能简单的 AngularJS 基于应用程序的方法来理解它的流程。我试图将简单的字符串从服务传递到控制器，然后我想从那里在 index.html 中打印这个字符串。我的其余代码似乎可以正常工作，但无法提供服务，并且不确定我在这里缺少什么...

index.html

<!DOCTYPE html>
<html ng-app="angularFormsApp">
 <head>
 <title>Angular Form</title>
 <meta charset="utf-8" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <script src="Scripts/angular.min.js"></script>
  <script src="App/AngularFormsApp.js"></script>
  <script src="App/EmployeeForm/efService.js"></script>
  <script src="App/EmployeeForm/efController.js"></script>

<!--<script src="App/EmployeeForm/efDirective.js"></script>
-->
</head>
  <body>
     <h1>Test AngularJS App Approach</h1>

   <div ng-controller="efController">
       {{employee}}
   </div>

</body >
</html>

AngularFormsApp.JS（模块）

var angularFormsModule = angular.module('angularFormsApp', []);

efController.js（控制器）

angularFormsModule.controller('efController',
  function efController($scope, efService) {

    $scope.employee = efService.employee;
});

efService.js（服务）

angularFormsModule.factory('efService',
 function () {
    var employee = "Employee Detail Available";

    return employee;
});

Answer 1

当您调用 factory 时，您需要 return 一个包含 properties 和 methods 的对象，以便使用此工厂实例从外部访问。

angularFormsModule.factory('efService',
 return {
     employee : "Employee Detail Available"
});

Answer 2

您可能想要 return 对象而不是字符串。

angularFormsModule.factory('efService',
function efService() {
    var service = {
        employee: "Employee Detail Available"
    }
    return service;
});

Answer 3

你实际上是在你的控制器中调用一个本地服务变量，它没有被你的服务公开：

 $scope.employee = efService.employee;

你正在用你的工厂返回一个函数，所以你应该在你的控制器中使用它：

 $scope.employee = efService();

AngularJS 中的服务不工作

Service in AngularJS not working

javascript

angularjs

angularjs-service

index.html

AngularFormsApp.JS（模块）

efController.js（控制器）

efService.js（服务）