Question

我对angularjs有点新鲜。我有一个很好的服务。但是我想将模型（患者模型）移出服务并将其放入separtate javascript文件中。不太清楚如何做到这一点。我猜我需要某种类型的工厂或服务吗？

这是我的patient.service.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>

移动模型停止服务

4 个答案: