CODEWITHSUNDEEP
angularjs
Mawg
Mawg

Reputation: 40145

(How) can a controller be active when its view is not visible?

If I understand correctly, a controller is generated when its view becomes active?

Meaning that if the view is not visible, the controller doesn't exist/isn't active?

Is there any way that I can make the controller active "in the background"?

I have an app which has two main tabs, one for vehicle tracking & the other for something else. Each of those tabs has several sub-tabs (suing UI-Router); in the case of the vehicle tracking, I have one tab for a google map & another to show a grid with street addresses.

Here's a pic of the desktop app which I am trying to re-implement in Angular:

enter image description here

Now, I am an Angular beginner, so maybe my design idea is flawed, but:

Both the map and the vehicle locations tab use the identical data pulled from a server, which is a list of GPS lat/long & timestamp.

It seemed to me that it would be wrong to have each of those tabs (controllers) fetching the same data, duplicating code.

So, I wanted to have a controller for the "Vehicle locations" tab, which would get the data and feed it to a service which the two map/Vehicle locations sub-tabs (controllers) could $watch.

Even if I were not looking at that "parent view" ("Vehicle locations", but at another ("Vehicle reports" or "Employee reports"), I would this data downloading & view updating to continue, so that when the user clicks the "Vehicle locations" tab, the information is already there & the user doesn't have to wait while the app goes to the server to fetch data & draw its view.

Question: can Angular work that way, or am I asking it to do something which is un-angular-ish? If so, what is the correct way to implement this? Should I duplicate the $http.get code and should I have the controllers fetching & updating their own data on $scope.$on('$viewContentLoaded'?

Upvotes: 1

Views: 254

Answers (2)

z.a.
z.a.

Reputation: 2777

There are some points you can consider for this app:

  1. You can create a factory for data you intend to share and reuse. So maybe create a http factory to get the data from the server and then inject it to whichever controllers you need to. Also you can resolve incoming data with "resolved" in angularjs (an option in routes) to make sure it's available before the page renders.
  2. If you are passing in data within controller to http.get then, inject the factory and use promises with the http method.

Upvotes: 1

link
link

Reputation: 1676

If you need a central point of access for data in your AngularJS app, the best way to achieve it is to encapsulate it in a provider (either a service or a factory). Fetch the data in your provider and implement getters, so that you can inject it in your controllers and ask for the data without duplicating code and requests.

yourApp.service('serviceName', [ '$http',
    function($http) {

        this.getData = function() {
            return $http.get(...);
        } 
    }
]);

yourApp.controller('controllerA', ['serviceName', 
    function(serviceName) {
        serviceName.getData().then(function(data){
            $scope.data = data;
        });
    }
]);

//the same for other controllers

Upvotes: 3

Related Questions