将模型移出服务

Question

我对angularjs有点陌生。 我有一个工作正常的服务。 但是我想将模型（患者模型）移出服务并将其放在一个单独的 javascript 文件中。不太确定如何做到这一点。我猜我需要某种类型的工厂或服务？

这是我的病人服务.js

(function () {
'use strict';
angular
    .module('beincharge.patient')
    .factory('patientDataService', patientDataService);
patientDataService.$inject = ['$http'];
function patientDataService($http) {
    var service = {
        getData: getData
    };
    return service;
    //////////
    function getData() {
        // I would like to move this model into a separate js file
       function patient(d) {
            this.Status = d.Status;
            this.ImageUrl = d.ImageUrl;
            this.PersonId = d.PersonId;
            this.LastName = d.LastName;
            this.MiddleName = d.MiddleName;
            this.FirstName = d.FirstName;
        }
        // end I would like to move this model into a separate js file

        var data = [
            {
                "Status": "Active",
                "ImageUrl": "http://lorempixel.com/100/100/people/9/",
                "PersonId": 1,
                "LastName": "Pratt",
                "MiddleName": "B",
                "FirstName": "Allie"
            },
            {
                "Status": 'Active',
                "ImageUrl": "http://lorempixel.com/100/100/people/3/",
                "PersonId": 1,
                "LastName": "Pratt",
                "MiddleName": "B",
                "FirstName": "Allie"
            }];
             return  getPatientList(data);
             function getPatientList(data) {
                 var a = [];
                 angular.forEach(data, function (d, i) {
                     a.push(new patient(d));
                 })
                 return a;
             }

    }
}

所以我想将模型移动到一个名为 patient.model 的文件中.js

  (function () {
    function patient(d) {
        this.Status = d.Status;
        this.ImageUrl = d.ImageUrl;
        this.PersonId = d.PersonId;
        this.LastName = d.LastName;
        this.MiddleName = d.MiddleName;
        this.FirstName = d.FirstNa
    }
    return patient;
}());

Answer 1

您必须创建一个工厂提供程序，并且应该如下所示：

angular
    .module('beincharge.patient')
    .factory('Patient', function() {
         return function(d){
             this.Status = d.Status;
             this.ImageUrl = d.ImageUrl;
             this.PersonId = d.PersonId;
             this.LastName = d.LastName;
             this.MiddleName = d.MiddleName;
             this.FirstName = d.FirstName
         }
     });

然后在服务中，您可以像这样使用：

angular
    .module('beincharge.patient')
    .factory('patientDataService', patientDataService);
patientDataService.$inject = ['$http', 'Patient'];
function patientDataService($http, Patient){
    console.log(new Patient({ Status: 'active' }));
}

您可以在下面看到完整的示例：

https://jsfiddle.net/9af3qys7/1/

Answer 2

如果你想要的只是一个可以实例化和重用的模型，那么在patientModel.js文件中创建一个像这样的简单JavaScript对象：

 function PatientModel() {
        this.Status = "";
        this.ImageUrl = "";
        this.PersonId = "";
        this.LastName = "";
        this.MiddleName = "";
        this.FirstName = "";
    }

确保在要使用它的控制器或服务之前加载此文件。

然后，您可以像这样实例化它：

var patient = new PatientModel();

当然，如果需要的话，你可以将构造函数更改为具有一些参数，以便您可以传递 d 参数中的任何内容。

只要您所需要的只是一些简单且可重用的模型，这将为您工作。优点是您也可以在测试中继续使用它们，而不是依赖硬编码的 json 对象。

Answer 3

您正在尝试以java风格编写javascript，我认为没有必要在此处创建患者模型，您情况下的响应/数据与患者对象完全相同。一个更简单的实现是

(function () {
'use strict';
angular
    .module('beincharge.patient')
    .factory('patientDataService', patientDataService);
patientDataService.$inject = ['$http'];
function patientDataService($http) {
    var service = {
        getData: getData
    };
    return service;
    this.getData = function () {
        var data = [
        {
            "Status": "Active",
            "ImageUrl": "http://lorempixel.com/100/100/people/9/",
            "PersonId": 1,
            "LastName": "Pratt",
            "MiddleName": "B",
            "FirstName": "Allie"
        },
        {
            "Status": 'Active',
            "ImageUrl": "http://lorempixel.com/100/100/people/3/",
            "PersonId": 1,
            "LastName": "Pratt",
            "MiddleName": "B",
            "FirstName": "Allie"
        }];
        return data;
    };
}

Answer 4

在这里你可以将app.service（..）移动到patient.model中.js

 var app = angular.module('beincharge_patient',[]);
 app.service('patientData',function(){
   var getP = function(d) {
      this.Status = d.Status;
      this.ImageUrl = d.ImageUrl;
      this.PersonId = d.PersonId;
      this.LastName = d.LastName;
      this.MiddleName = d.MiddleName;
      this.FirstName = d.FirstName;
    }
    var service = {
      getP: getP
    }
    return service; 
 });
app.factory('patientDataService',['$http','patientData',function($http,patientData){
  
    var getData = function() {
      var data = [{
          "Status": "Active",
          "ImageUrl": "http://lorempixel.com/100/100/people/9/",
          "PersonId": 1,
          "LastName": "Pratt",
          "MiddleName": "B",
          "FirstName": "Allie"
        },
        {
          "Status": 'Active',
          "ImageUrl": "http://lorempixel.com/100/100/people/3/",
          "PersonId": 1,
          "LastName": "Pratt",
          "MiddleName": "B",
          "FirstName": "Allie"
        }
      ];      
       var getPatientList = function(data) {
        var a = [];
        angular.forEach(data, function (d, i) {
            a.push(new patientData.getP(d));
        })
        return a;
      }
       return  getPatientList(data);
    }
    var service = {
      getData: getData
    };
    return service;
}]);
 app.controller('beincharge_patient_Controller',    ['$scope','patientDataService',function($scope,patientDataService){   
   $scope.temp=patientDataService.getData();
 }]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app="beincharge_patient" ng-controller="beincharge_patient_Controller">
  <br/>
  {{temp}}
</div>