停止使用模型

Question

我对 angularjs 有点陌生。我有一项工作正常的服务。但是我想将模型（患者模型）移出服务并将其放入单独的 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

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

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

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

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

var patient = new PatientModel();

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

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

Answer 2

您正在尝试以 java 风格编写 java 脚本，我认为这里不需要创建患者模型，您的 response/data 完全相同作为患者对象。一个更简单的实现是

(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 3

在这里您可以将 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>

Answer 4

你必须创建一个工厂供应商，应该是这样的：

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/

停止使用模型

Move model out of service

javascript

angularjs

viewmodel

angularjs-service

angularjs-factory