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

Arrange JSON information in an HTML table with distinct header rows for every data category

What is the reason for sending a single file to the server?

Removing an article from a Vue.js localStorage array using its index position

Should WordPress files be kept separate (php, css, and js) or combined into a single file?

A directive containing a template

What is the most efficient way to update a large batch of documents in MongoDB?

What is the best way to efficiently load all of my web applications within the web application that I am currently developing?

Having issues with React-router v4's this.props.history.push() not functioning as expected

Iterating through a JSON object and an array

Dealing with errors and fetching them within a react application using the useState hook

encountering an issue with the react hook useHistory leading to an error

Despite being logged, the current value of firebase.auth().currentUser in Firebase is null

Establish a connection to AWS by utilizing MQTT.js

An issue occurred during the hydration process, causing the entire root to switch to client rendering since the error occurred outside of a Suspense boundary

Use JavaScript to swap out images

The top offset of the select2 search dropdown is not aligning correctly

Effortlessly retrieving the id attribute from an HTML tag using jQuery

Is there a way for me to calculate the square of a number generated by a function?

I need to obtain the URL pathname on a server component in Next.js version 13 - how is this achieved

Tips for creating a responsive Youtube embedded video