Why is that the UI is not refreshed when data is updated in typescript and angularjs program

Issue

I learn typescript and angularjs for a few days,and now I have a question that confuses me for days, I want to make a gps tracking system, so I try to write a service like this:

1.

  module Services {
        export class MyService {
            getGpsPeople(): Array<AppCommon.GPSPerson> {
                var gpsPeople = new Array<AppCommon.GPSPerson>()
                for (var i = 0; i < 10; i++) {
                    var tempPerson = new AppCommon.GPSPerson({ name: "username" + i.toString() });
                    gpsPeople.push(tempPerson);
                }
                return gpsPeople;
            }
        } // MyService class
    }

2. A controller like this:

   module AppCommon { export class Controller { scope: ng.IScope;

        constructor($scope: ng.IScope) {
            this.scope = $scope;
   
        }
    }
   

   } module Controllers {

    export interface IMyScope extends ng.IScope {
   
        gpsPeople: Array<AppCommon.GPSPerson>;
    }
   
    export class MyController extends AppCommon.Controller {
        scope: IMyScope;
   
        static $inject = ['$scope','myService'];
        constructor($scope: IMyScope,service:Services.MyService) {
            super($scope);
   
            $scope.gpsPeople = service.getGpsPeople();
        }
    }
   

   }

3.The GPSPerson class like this:

 export class GPSPoint {
        latitude = 0;
        longtitude = 0;

        constructor(la: number, lg: number) {
            this.latitude = la;
            this.longtitude = lg;
        }
    }

    export interface IPerson {
        name: string;
    }

    export class GPSPerson  
    {
        name: string;
        lastLocation: GPSPoint;
        countFlag = 1;
        historyLocations: Array<GPSPoint>;
    
        timerToken: number;
        startTracking() {
            this.timerToken = setInterval(
                () => {
                    var newGpsPoint = null;
                    var offside = Math.random();

                    if (this.countFlag % 2 == 0) {
                        newGpsPoint = new GPSPoint(this.lastLocation.latitude - offside, this.lastLocation.longtitude - offside);
                    }
                    else {
                        newGpsPoint = new GPSPoint(this.lastLocation.latitude + offside, this.lastLocation.longtitude + offside);
                    }

                    this.lastLocation = newGpsPoint;
                    this.historyLocations.push(newGpsPoint);
                    console.log(this.countFlag.toString() + "+++++++++++++++++++" + this.lastLocation.latitude.toString() + "----" + this.lastLocation.longtitude.toString());
                    this.countFlag++;
                }
                , 10000);
        }

        stopTracking() {
            clearTimeout(this.timerToken);
        }

        constructor(data: IPerson) {
            this.name = data.name;
            this.lastLocation = new GPSPoint(123.2, 118.49);
            this.historyLocations = new Array<GPSPoint>();
        }
    }

The problem is:

1.Should I make the GPSPerson class a Controller?

2.The setinterval works but the UI dose not change(when I hit button ,it changes,the button do nothing )?

I'm a beginner of ts and angular,and have no experience with js, I do not know if I have explained it clearly, hope someone can help me, thanks!

Solution

setInterval works but the ui dose not change

This is because the angular $digest loop does not run on completion of setInterval. You should use $interval service https://docs.angularjs.org/api/ng/service/$interval as that tells Angular to do its dirty checking again.

You just need to provide MyService access to $interval though. Inject it using $inject (see https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1).

1.should i make the GPSPerson class a Controller?

No. Its an array of JavaScript objects inside the controller and that is fine.

Answered By - basarat