在 AngularJS 中创建自定义对象

Question

我想在 AngularJS 中实现我自己的自定义 object/classes。但是，我一直坚持使用 factories/services 作为自定义对象的概念——我知道工厂和服务可以提供应用程序的业务逻辑，但我可以在一个应用程序中创建多个工厂和服务吗？如果是这样，术语 "singleton"”（我读过的许多文章都将服务描述为）究竟意味着什么？

因此，例如，这是否是有效的 and/or 在 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

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

https://jsfiddle.net/jtgd6tjn/

Angular

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>

Answer 2

Services/Factories 正如你提到的那样被用作 逻辑容器。它们可以被创建一次并注入多个控制器来执行业务逻辑。这有助于代码的可重用性和逻辑抽象。

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

而且，就您的示例而言，没有提到服务未用于创建您想要的对象。要在 Javascript 中创建新对象，您可以按照以下方法

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

var roy = new Student('Roy');

希望这能回答您的问题。您可以在 Blog

中阅读有关 service/factories 的更多信息

Answer 3

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

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

"This is what factories do, they create new Objects in ways you want them to."

使用 .factory，它 return 随心所欲。下面，工厂 return 是一个构造函数。 Angular 只是缓存您 return 的内容以供重用。

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() 通过调用 [=] 为我们提供 returned 值13=] 在函数上，这可能是限制性的，而 .factory() 是此编译过程之前的一步，因为我们可以选择要实现的模式和 return."

REF: https://toddmotto.com/factory-versus-service

在 AngularJS 中创建自定义对象

Creating Custom Objects in AngularJS

angularjs

angularjs-service

angularjs-factory