服務和工廠之間的區別

1）服務

服務是 constructor 函式，在執行時使用 new 呼叫一次，就像我們使用普通 javascript 所做的那樣，只是 AngularJs 在幕後呼叫 new。

在服務的情況下，有一個拇指規則需要記住

1. 服務是使用 new 呼叫的建構函式

讓我們看一個簡單的例子，我們將註冊一個使用 $http 服務獲取學生詳細資訊的服務，並在控制器中使用它

function StudentDetailsService($http) {
  this.getStudentDetails = function getStudentDetails() {
    return $http.get('/details');
  };
}

angular.module('myapp').service('StudentDetailsService', StudentDetailsService);

我們只是將此服務注入控制器

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

什麼時候用？

在任何想要使用建構函式的地方使用 .service()。它通常用於建立公共 API，就像 getStudentDetails() 一樣。但是如果你不想使用建構函式並希望使用簡單的 API 模式，那麼 .service() 就沒有太大的靈活性了。

2）工廠

雖然我們可以使用 .factory() 來實現所有的東西，但是使用 .services()，它並不能使 .factory() 與“.service()”相同。它比 .service() 更強大，更靈活

.factory() 是一種用於返回值的設計模式。

在工廠的情況下，要記住兩個拇指規則

1. 工廠返回值
2. 工廠（可以）建立物件（任何物件）

讓我們看看使用 .factory() 可以做些什麼的一些例子

返回物件文字

讓我們看一個示例，其中工廠使用基本的 Revealing 模組模式返回物件

function StudentDetailsService($http) {
  function getStudentDetails() {
    return $http.get('/details');
  }
  return {
    getStudentDetails: getStudentDetails
  };
}

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

在控制器內使用

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

返回閉包

什麼是關閉？

閉包是指在本地使用的變數的函式，但是在封閉範圍內定義。

以下是一個閉包的例子

function closureFunction(name) {
  function innerClosureFunction(age) { // innerClosureFunction() is the inner function, a closure
    // Here you can manipulate 'age' AND 'name' variables both
  };
};

在 精彩 的部分是，它可以訪問 name 這是在父範圍。

讓我們在 .factory() 中使用上面的閉包示例

function StudentDetailsService($http) {
  function closureFunction(name) {
  function innerClosureFunction(age) {
    // Here you can manipulate 'age' AND 'name' variables
    };
  };
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

在控制器內使用

function StudentController(StudentDetailsService) {
  var myClosure = StudentDetailsService('Student Name'); // This now HAS the innerClosureFunction()
  var callMyClosure = myClosure(24); // This calls the innerClosureFunction()
};

angular.module('app').controller('StudentController', StudentController);

建立建構函式/例項

如上所示，.service() 建立了一個呼叫 new 的建構函式。.factory() 也可以建立一個呼叫 new 的建構函式

讓我們看一個如何實現這一目標的例子

function StudentDetailsService($http) {
  function Student() {
    this.age = function () {
        return 'This is my age';
    };
  }
  Student.prototype.address = function () {
        return 'This is my address';
  };
  return Student;
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

在控制器內使用

function StudentController(StudentDetailsService) {
  var newStudent = new StudentDetailsService();
  
  //Now the instance has been created. Its properties can be accessed.

 newStudent.age();
 newStudent.address();
  
};

angular.module('app').controller('StudentController', StudentController);