Retrieve information from the API prior to rendering the controller components

Question

Retrieve information from the API prior to rendering the controller components

Hello there! I am looking to retrieve data from a factory before any of my controllers are loaded. After some research, I discovered that it can be achieved using the resolve function in AngularJS:

angular.module('agent', ['ngRoute','ui.bootstrap','general_module', 'order_module','customer_module']).config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/customer', {
    templateUrl: 'customer_module/partials/customer.php',
    resolve:{
      'MyServiceData':function(loginvalidation){
        // MyServiceData will also be injectable in your controller, if you don't want this you could create a new promise with the $q service
       var a=loginvalidation.check_usertype();
      }}
    }
    );
  $routeProvider.otherwise({redirectTo: '/customer'});
}]);

However, the issue is that I would need to repeat this for every single route. Is there a more efficient way in AngularJS to write the code once and load the service before any controller is initialized (without duplicating the code)?

Thank you!

javascript angularjs angularjs-directive angularjs-service angularjs-routing

Answer 1

Answer №1

In my approach, the controller function is structured in a way where there is no code at the root level, only function declarations. Take a look:

angular.module('app').controller('TestCtrl',function($scope){

    //no code here at root level, except for some init call
    init();

    function init(){
        //some init code
        service.getSomeData().then(function(data){
            //Trigger controller action here
            $scope.dataLoaded = true;
            doSomethingWithData(data);
        });
    }

    function addSomeWatch(){
        //implement watch logic here
    }

    function foo(bar){
        //execute some crazy functionality
    }
});

This setup relies on the assumption that all service calls return promises, which should be standard practice anyway.

angular.module('app').factory('TestService', function(){

    return {
        getSomeData : function(){
            var d = $q.deferred();
            $http.get('someurl')
                .then(function(resp){
                    d.resolve(resp);
                });
            return d.promise;
        }
    }

});

Answer 2

In my approach, the controller function is structured in a way where there is no code at the root level, only function declarations. Take a look:

angular.module('app').controller('TestCtrl',function($scope){

    //no code here at root level, except for some init call
    init();

    function init(){
        //some init code
        service.getSomeData().then(function(data){
            //Trigger controller action here
            $scope.dataLoaded = true;
            doSomethingWithData(data);
        });
    }

    function addSomeWatch(){
        //implement watch logic here
    }

    function foo(bar){
        //execute some crazy functionality
    }
});

This setup relies on the assumption that all service calls return promises, which should be standard practice anyway.

angular.module('app').factory('TestService', function(){

    return {
        getSomeData : function(){
            var d = $q.deferred();
            $http.get('someurl')
                .then(function(resp){
                    d.resolve(resp);
                });
            return d.promise;
        }
    }

});

Retrieve information from the API prior to rendering the controller components

Answer №1

Similar questions

Ways to create a looping mechanism with specified number restrictions and limitations

Using Javascript, the sum of inputs is calculated based on the keyup event

What is the best way to create a "check all" feature in React using child components?

What is the reason for calling Proxy on nested elements?

Traverse through the JSON data until a certain condition is satisfied, then proceed to tally the number

Transform a PDF document into a Google Doc utilizing the capabilities of the Google Drive API version 3

Using Angular 2 to trigger an event when a native DOM element is loaded

Issue with breakpoints functionality in MUI v5 and React project

What are the steps to turn off response data compression in an Express server?

Exploring TypeScript integration with Google Adsense featuring a personalized user interface

Vuelidate allows for validation to occur upon clicking a button, rather than waiting for the field

Ways to discreetly conceal forward and backward buttons in the v-pagination component of Vuetify

What is the correct way to reuse sub-dependencies using NPM?

the intricacies of resizing a dijit dialog

What is the best way to transfer the http server variable between different layers in node.js without requiring it in a separate file?

stop an html page from opening a new window

Retrieve the value of an unmatched ng-pattern field

Unable to iterate through nested arrays in Contentful mapping

How many intricate objects are instantiated in memory when running the code snippet provided above?

"Exploring the versatility of NextJS with dynamic route parameters