javascriptangularjsviewmodelangularjs-serviceangularjs-factory

Move model out of service


I am a bit new to angularjs. I have a service that works fine. however I would like to move the model (the patient model) out of the service and put it in a separtate javascript file. not quite sure how to do this. I'm guessing I need a factory or service of some type?

this is my 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;
             }



    }
}

so I would like to move the model into a file called 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;
}());

Solution

  • You have to create a factory provider and should be like this:

    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
             }
         });
    

    and then in the Service you can use like this:

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

    You can see the full example below:

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