How to update existing JS Object using forms - Angular JS

Question

I am converting my existing project to angularJs and there is a JS Object I that I keep update on form submit.

autoquoteDTO.js:

$.getAutoQuoteObject = function() {
  var autoQuoteObject = new autoQuote();
  autoQuoteObject.DriverVehicleInfo = new DriverVehicleInfo();
  autoQuoteObject.DriverVehicleInfo.Vehicles = [];
  autoQuoteObject.DriverVehicleInfo.Drivers = [];
  autoQuoteObject.ApplicationInfo = new ApplicationInfo();
  autoQuoteObject.ApplicationInfo.Discount = new Discount();
  autoQuoteObject.ApplicationInfo.GeneralPartyInfo = new GeneralPartyInfo();
  autoQuoteObject.ApplicationInfo.GeneralPartyInfo.ContactInfo = new Contact();
  autoQuoteObject.ApplicationInfo.MostRecentInsurance = new MostRecentInsurance();
  autoQuoteObject.RequestedCoverage = new RequestedCoverage();
  autoQuoteObject.RequestedCoverage.PolicyCoverage = new PolicyCoverage();
  autoQuoteObject.RequestedCoverage.PolicyCoverage.Coverages = [];
  autoQuoteObject.RequestedCoverage.VehicleCoverage = [];
  autoQuoteObject.SessionInfo = new SessionInfo();
  return autoQuoteObject;
}

function autoQuote() {
  this.DriverVehicleInfo = null;
  this.ApplicationInfo = null;
  this.RequestedCoverage = null;
  this.SessionInfo = null;
}
var DriverVehicleInfo = function() {
  this.Drivers = [];
  this.Vehicles = [];
  this.DriverVehicleUsages = [];
};
var Driver = function() {
  this.ID = null, this.PersonInfo = null, this.DriverRelationshipToApplicant = null, this.DriverRelationshipToApplicantCd = null, this.DriverLicense = null, this.DriverDetails = [], this.Incident = null, this.IsValid = false
};
var PersonInfo = function() {
  this.FirstName = null, this.Initial = null, this.LastName = null, this.Suffix = null, this.SSN = null, this.GenderCd = null, this.BirthDate = null, this.MaritalStatusCd = null, this.OccupationClassCd = null, this.YearsOccupation = null, this.HighestEducation = null, this.AgeInYears = 0, this.SpouseLicenseStatus = null
};
var DriverLicense = function() {
  this.AgeLicense = null, this.USLicenseStatus = null, this.DriverLicenseNumber = null, this.StateProvCd = null
};
var DriverDetail = function() {
  this.DriverDetailCd = null, this.DriverDetailValue = null, this.DriverDetailDate = null
};
var Incident = function() {
  this.ClaimAccidentsCount = null, this.ViolationsCount = null, this.HasLicenseBeenRevoked = null, this.LicenseSuspensionRevokedDate = null, this.HasRequiredCourtOrderedFinancial = null, this.ClaimAccidents = [], this.Violations = [], this.DUIs = []
};
var DUI = function() {
  this.DateOfDUI = null, this.OtherValues = []
};
var ClaimAccident = function() {
  this.Id = null, this.ClaimAccidentCd = null, this.displayText = null, this.ClaimAccidentDate = null, this.DateDisplayText = null, this.Comprehensive = null, this.Collision = null, this.RentalReimbursement = null, this.MedicalPayment = null, this.PayToOtherParty = null, this.IsInjury = null, this.IsPropertyDamage = null
};
var Violation = function() {
  this.Id = null, this.ViolationCd = null, this.ViolationDate = null, this.displayText = null
};
var Vehicle = function() {
  this.ID = null, this.VehicleHaveVin = false, this.VehicleIdentificationNumber = null, this.VehicleYear = null, this.VehicleMake = null, this.VehicleModel = null, this.VehicleSubModel = null, this.AntiLockBrakeCd = null, this.AntiTheftDeviceCd = null, this.VehicleUseCd = null, this.NumDaysDrivenPerWeek = null, this.DistanceOneWay = null, this.EstimatedAnnualDistance = null, this.OwnershipCd = null, this.RegistrationStateProvCd = null, this.VehIdentificationNumber = null, this.IsCustomizedOrAltered = null, this.OriginalVehicleCost = null, this.IsValid = false, this.VehicleType = null, this.VehicleVinStub = null, this.ShowVehicleAntiLockBrakeInfo = false, this.VehicleCost = null, this.ShowVehicleCost = false, this.DaytimeLights = null
};
var DriverVehicleUsage = function() {
  this.DriverIDRef = null, this.VehicleIDRef = null, this.Usage = null
};
var ApplicationInfo = function() {
  this.GeneralPartyInfo = null, this.Discount = null, this.MostRecentInsurance = null, this.ConsumerContactAuth = null, this.ConsumerInfoAuthorization = null, this.ConsumerContactMobileAuth = null
};
var GeneralPartyInfo = function() {
  this.MainApplicantDriverIDRef = null, this.Address = null, this.PreviousAddress = null, this.ContactInfo = null, this.ResidenceInfo = null, this.ListedVehiclesRegisteredTo = null, this.CreditScore = 0
};
var AddressInfo = function() {
  this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null
};
var PreviousAddress = function() {
  this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null
};
var Contact = function() {
  this.Phones = [], this.Emails = []
};
var Email = function() {
  this.EmailTypeCd = null, this.EmailAddress = null
};
var Phone = function() {
  this.PhoneTypeCd = null, this.PhoneNumber = null
};
var Residence = function() {
  this.LengthAtCurrentAddressCd = null, this.ResidenceTypeCd = null, this.NumberDriversInHouseHold = null, this.VehiclesRegistedToInsured = null, this.DriverResidentsFromFL = null, this.CityLimits = null
};
var Discount = function() {
  this.ResidentialInsurancePolicy = null, this.OwnBoat = null, this.OwnMotorCycle = null, this.IsAAAMember = null
};
var MostRecentInsurance = function() {
  this.HasAutoInsurance = null, this.InsuranceCompanyName = null, this.CurrentInsurancePaying = null, this.LengthWithCurrentInsuranceCd = null, this.BodilyInjuryLiabilityLimit = null, this.LengthContinuouslyInsuredCd = null, this.ExpirationDate = null, this.InsuranceCanceledForNonPay = null, this.ClaimDeniedDueToFraud = null
};
var RequestedCoverage = function() {
  this.EffectiveDate = null, this.StateCd = null, this.PolicyCoverage = null, this.VehiclesCoverage = []
};
var PolicyCoverage = function() {
  this.Coverages = []
};
var Coverage = function() {
  this.CoverageCd = null, this.CoverageValue = null
};
var VehicleCoverage = function() {
  this.IsValid = false, this.VehicleIDRef = null, this.Coverages = []
};
var SessionInfo = function() {
  this.SessionId = '', this.SecurityToken = '', this.Zip = '', this.StateCode = '', this.PageName = '', this.PageTheme = '', this.CarrierId = -1, this.ReturnedCarrierTypes = null, this.CoveragePackage = '', this.UseExistingSession = false, this.QuoteStatus = '', this.SID = -1, this.SRC = null, this.SRC_QCP = null, this.Referral = null, this.ClientIP = null, this.BrowserType = null, this.CLK = 0, this.QTR = '', this.CCID = '', this.AFF = '', this.PreviousSessionId = '', this.IgnoreErrors = false, this.RetrieveSource = '', this.PreviousPageName = ''
}

prapareJson.js:

var prepareAutoQuoteDTO = {
    postAutoQuoteObj: $.getAutoQuoteObject(),  
    initializeDriverObj: function()
    {
        var driverLocObj           = new Driver();
        driverLocObj.PersonInfo    = new PersonInfo();
        driverLocObj.DriverLicense = new DriverLicense();
        driverLocObj.Incident      = new Incident();
        return driverLocObj;
    },

    initializeAppInfo: function()
    {
        var appInfoLocObj           = new ApplicationInfo();
        appInfoLocObj.Discount      = new Discount();
        return appInfoLocObj;

    },
    /*
    * Initialize Vehicle object for autoQuoteDTO.js
    */
    initializeVehicleObj: function()
    {
        var vehicleLocObj = new Vehicle();
        return vehicleLocObj;
    },

    rc1Step1DTO: function()
    {
       /*
        * store session info
        */
        var emailId = $('#save_quote_email').val();
        if (typeof emailId  !== "undefined" && emailId && emailId != '' && emailId != 'Email Address')
        {
            var email           = new Email();
            email.EmailTypeCd   = 'PRIMARY';
            email.EmailAddress  = emailId;
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
        }
};

update json on user event code:

prepareAutoQuoteDTO.rc1Step1DTO();

The new Angular JS code that should update the JS Object:

 (function(){
    "use strict";
    angular
    .model("autoQuote")
    .controller("prepareDTO","prepareDTO")
    .controller("postDTO","postDTO");
        /*
         * Call actions on page load
         */
    var init = function () {
                 prepareDTO();    
        }
        init();

        /*
         * prepare DTO with form elements.
         */
        function prepareDTO()
    {
         var vm = this;
         vm.postAutoQuoteObj = [];   
    }

        /*
         * post DTO on form submit and page onload.
         */
        function postDTO()
        {

        }     

 });

The form logic should be contained in the prepareDTO funtion.

The expected behavior is if step1 form is submitted, then rc1Step1DTO should be called and JS data should be saved.

Looking for suggestions to achieve this and best practices.

Plunker of my complete code is http://plnkr.co/edit/VJKrDRMJY3Q73bsCgVwX?p=preview.

I can remove/edit this file and everything in Angular JS but lie stuck how to do that in AngularJS.

Answer 1

You can move all your code into a factory, and then inject it into a controller. All your other dependencies (like Driver) must be included before this executes or could be even declared in prepareDtoFactory function.

angular
.model("autoQuote")
.controller(dtoController)
.factory(prepareDtoFactory);

function dtoController(prepareDtoFactory){
     prepareDtoFactory.rc1Step1DTO(); //call function from your service, and do something with it
}

dtoController.$inject = ['prepareDtoFactory'];

function prepareDtoFactory(){

    var prepareAutoQuoteDTO = {
        postAutoQuoteObj         : $.getAutoQuoteObject(),  
        initializeDriverObj: function(){
            var driverLocObj           = new Driver();
            driverLocObj.PersonInfo    = new PersonInfo();
            driverLocObj.DriverLicense = new DriverLicense();
            driverLocObj.Incident      = new Incident();
            return driverLocObj;
       },
       initializeAppInfo: function(){
           var appInfoLocObj           = new ApplicationInfo();
           appInfoLocObj.Discount      = new Discount();
           return appInfoLocObj;
       },
       /*
       * Initialize Vehicle object for autoQuoteDTO.js
       */
       initializeVehicleObj: function(){
           var vehicleLocObj = new Vehicle();
           return vehicleLocObj;
       },
       /*
       * store session info
       */
       rc1Step1DTO: function(){

            var emailId = $('#save_quote_email').val();
            if (typeof emailId  !== "undefined" && emailId && emailId != '' && emailId != 'Email Address'){
                var email           = new Email();
                email.EmailTypeCd   = 'PRIMARY';
                email.EmailAddress  = emailId;
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo =     this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
            }
        }
    };
    return prepareAutoQuoteDTO;
}

Answer 2

following the AJS guide:

HTML

<div ng-controller="prepareDTO as pdt">
  <form novalidate class="simple-form">
    E-mail: <input type="email" ng-model="pdt.user.email" /><br />
    <input type="button" ng-click="pdt.reset()" value="Reset" />
    <input type="submit" ng-click="pdt.update(user)" value="Save" />
  </form>
  <pre>user = {{user | json}}</pre>

</div>

app.js

function prepareDTO()
    {
         var vm = this;

         vm.user = {
           email: ''
         };

         vm.update = function(user){
           prepareAutoQuoteDTO.rc1Step1DTO(user.email);

         }
    }

please note that prepareAutoQuoteDTO.rc1Step1DTO in order to avoid errors should be modified as:

rc1Step1DTO: function(email)
    {
       /*
        * store session info
        */
        var emailId = email;
        if (typeof emailId  !== "undefined" && emailId && emailId != '' && emailId != 'Email Address')
        {
            var email           = new Email();
            email.EmailTypeCd   = 'PRIMARY';
            email.EmailAddress  = emailId;
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
       }
}