Injecting a single dependency for all routes using $routeProvider

Question

Injecting a single dependency for all routes using $routeProvider

Here is the code snippet:

$routeProvider .when("/page1", { controller: "MyController", resolve: {Strategy: "StrategyOne"}})

The code above waits for the resolution of the Strategy dependency before instantiating the "MyController" controller.

In my application, there is a function that returns a promise. This promise, when resolved, provides information about the current user. Let's refer to this function as Authentication.currentUser()

I want all pages in my app to wait for this promise to be resolved before rendering any page. Instead of adding a line for each route declaration, I am looking for a solution that avoids duplication.

A controller named 'MainCtrl' is included in all pages through this line in the template:

<html ng-app="clientApp" ng-controller="MainCtrl">

One idea to address this could be specifying Authentication.currentUser() as a dependency of "MainCtrl" at the controller level (not at the route level, since this dependency is not specific to a particular route).

Your assistance on this matter would be greatly appreciated!

javascript angularjs

Answer 1

Answer №1

By transitioning from the default router to ui-router, you can implement nested states. Referencing the example found on https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-resolved-dependencies, here is a demonstration:

$stateProvider.state('parent', {
  resolve:{
     resA:  function(){
        return {'value': 'A'};
     }
  },
  controller: function($scope, resA){
      $scope.resA = resA.value;
  }
})
.state('parent.child', {
  resolve:{
     resB: function(resA){
        return {'value': resA.value + 'B'};
     }
  },
  controller: function($scope, resA, resB){
      $scope.resA2 = resA.value;
      $scope.resB = resB.value;
  }

Answer 2

By transitioning from the default router to ui-router, you can implement nested states. Referencing the example found on https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-resolved-dependencies, here is a demonstration:

$stateProvider.state('parent', {
  resolve:{
     resA:  function(){
        return {'value': 'A'};
     }
  },
  controller: function($scope, resA){
      $scope.resA = resA.value;
  }
})
.state('parent.child', {
  resolve:{
     resB: function(resA){
        return {'value': resA.value + 'B'};
     }
  },
  controller: function($scope, resA, resB){
      $scope.resA2 = resA.value;
      $scope.resB = resB.value;
  }

Answer 3

Answer №2

For those who want to address this with the standard $routeProvider, this is what I came out with:

$rootScope.$on('$routeChangeStart', function (event, next, current) {
  if (!next.resolve){ next.resolve = {} }
  next.resolve.currentUser =  function(Authentication){
    return Authentication.currentUser();
  };
});

Answer 4

For those who want to address this with the standard $routeProvider, this is what I came out with:

$rootScope.$on('$routeChangeStart', function (event, next, current) {
  if (!next.resolve){ next.resolve = {} }
  next.resolve.currentUser =  function(Authentication){
    return Authentication.currentUser();
  };
});

Injecting a single dependency for all routes using $routeProvider

Answer №1

Answer №2

Similar questions

Ways to conceal elements when a router link is clicked

How can data be transferred from a parent component to a child component using MaterialUI's styling functionality?

Retrieve the associative array from the user input by utilizing jQuery

Can different classes be assigned as "dragenter" targets?

Utilizing AngularJS as a view/template engine within Node.js/Express: A comprehensive guide

The React onChange event is malfunctioning when it comes to two-way binding

Developing a user management platform using Node.js

If the div is devoid of content, then remove the class

Troubleshooting: The Pagination Directive in AngularJS is not functioning as expected

Having trouble with Javascript/jQuery not functioning in IE8?

Div scrolling allows for parallel viewing of PDFs in a side by side arrangement

Dynamically highlight a MySQL table based on user preferences and store this information permanently

flexanimate functioning only on the first attempt

Synchronization problem between an Angular directive and an asynchronous AJAX request

Ways to access configuration settings from a config.ts file during program execution

In order to ensure that script assets in the app.blade file are updated with every route change, Laravel Vue Inertia requires

FlexSlider in the Dazzling Theme - Glitch Discovered

CORS OPTIONS request encountered while attempting to upload a file using $http in AngularJS

Emerald: Fresh alert for numerous attributes

What is the best way to split an input field into distinct fields for display on the screen?