在 AngularJS 中创建自定义对象

Question

我想在 AngularJS 中实现我自己的自定义对象/类。但是，我被困在使用工厂/服务作为自定义对象的概念上——我知道工厂和服务是用来提供应用程序的业务逻辑的，但是我可以在一个应用程序中创建多个工厂和服务吗？如果是这样，“单例”一词（我读过的许多文章都将服务描述为）究竟意味着什么？

例如，这是否是在 AngularJS 中创建一个填充有学生对象的基本学校对象的有效和/或首选方法？

app.factory('schoolService',function(student){
    var school = {};
    school.students = [];
    school.addStudent = function(){
         var newStudent = new student();
         this.students.push(newStudent);
    }
    return school;
}
app.service('student',function(){
     //anyway to toss in a constructor here?
     this.name = 'name';
     this.getName = function(){
         return this.name;
     }
}
app.controller('schoolCtrl',function(schoolService){
     schoolService.addStudent(); //obviously normally wouldn't do this, but for demonstration purposes
     $scope.students = schoolService.students;
     //expect $scope.students to equal an array of length 1, with one student object
}

在此先感谢，对于所有嵌套问题，我们深表歉意！

Answer 1

事实上，当你在控制器中注入 service 时，服务对象已经被实例化了，因为 Angular 在内部已经在你的服务构造器上调用了 new。 （记住.service() 只是一个构造函数）

您可以使用.service 和.factory 有两个不同的原因。是的，它们都是单例，但.factory 可以产生多个实例。

“这就是工厂所做的，它们以您希望的方式创建新对象。”

使用.factory，它会返回任何你想要的东西。下面，工厂返回一个构造函数。 Angular 只是缓存你返回的内容以供重复使用。

function PersonService() {
  function Person() {
    this.foo = function () {

    };
  }
  Person.prototype.bar = function () {

  };
  return Person;
}
angular
  .module('app')
  .factory('PersonService', PersonService);

然后在某个控制器中：

function PersonController(PersonService) {
  // new instance!
  var newPerson = new PersonService();
  console.log(newPerson);
}

" [...] .service() 本质上是 .factory() 调用的“最终结果”。.service() 通过在函数上调用 new 为我们提供返回值，它可以是限制性的，而 .factory() 是在此编译过程之前的一步，因为我们可以选择要实现和返回的模式。”

参考号：https://toddmotto.com/factory-versus-service

Answer 2

您提到的

服务/工厂用作逻辑容器。它们可以创建一次并注入多个控制器以执行业务逻辑。这有助于代码的可重用性和逻辑抽象。

'Singleton' 是定义什么是服务的正确方法。它们在应用程序被引导时被初始化一次。一般来说，您可以将服务用作“getter 和 setter”。如果你熟悉编码，你一定知道它的含义。

而且，就您的示例而言，不，服务不会像您想要的那样用于创建对象。要在 Javascript 中创建新对象，您可以遵循以下方法

var Student = function(name){
   this.name = name;
};

var roy = new Student('Roy');

希望这能回答您的问题。 您可以在Blog 中阅读有关服务/工厂的更多信息

Answer 3

单身人士保持静止。控制器在调用时加载。您可以将学生存储在服务中，因为它会在您的应用程序的整个生命周期中持续存在，并且可以在控制器之间共享。

https://jsfiddle.net/jtgd6tjn/

角度

function AppCtrl($scope, SchoolService) {
  $scope.students = SchoolService.students;
  $scope.addStudent = function() {
    SchoolService.students.push($scope.newStudent);
    $scope.newStudent = {};
  }
}

function SchoolService() {
  var service = {
    students: []
  };
  return service;
}

HTML

<div ng-app="myApp" ng-controller="AppCtrl">
  <form ng-submit="addStudent()">
    <input type="text" ng-model="newStudent.first">
    <br>
    <input type="text" ng-model="newStudent.last">
    <br>
    <button type="submit">
      Add New Student
    </button>
  </form>
  <hr>
  <ul>
    <li ng-repeat="student in students"> {{ student.first}} {{ student.last }} </li>
  </ul>
</div>