Angular Universal Resolve

I am trying to ensure that an asynchronous call completes before any of my routes are resolved by modifying route.resolve as follows:

var originalWhen = $routeProvider.when;

$routeProvider.when = function(path, route) {
  route.resolve || (route.resolve = {});
  angular.extend(route.resolve, {
    availableCodes: function($rootScope, numbersService) {
      if ($rootScope.isAuthenticated) {
        numbersService.getAvailableCodes().$promise.then(function(data) {
          $rootScope.availableCodes = data.codes;
          console.log('resolve: ' + Date.now());
        });
      }
    }
  });
  return originalWhen.call($routeProvider, path, route);
};

I am puzzled by the fact that when I include a

console.log('controller: ' + Date.now())
in my controller, the logged time indicates that the controller loaded BEFORE my asynchronous call in the resolve function completed. I had assumed that the controller would not execute until after the async call in resolve was finished. What am I overlooking here?

Answer №1

Absolutely, the provided when patch is functioning as anticipated.

Furthermore, it should be

    return numbersService.getAvailableCodes().$promise.then(function(data) {
    ...

This will enable utilizing the promise for route resolution purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace: this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product[&apos ...

Animate the leftward disappearance of a div to make it vanish

My goal is to create a user interface where users can navigate through different divs. Here is the HTML code: <article id="realize" class="realizeBox"> <div class="shown"> <div class="heading"> <h2>Realisati ...

Getting request parameters within Model in Loopback can be done by accessing the `ctx`

common/models/event.json { "name": "Event", "mongodb": { "collection": "event" }, "base": "PersistedModel", "idInjection": true, "options": { "validateUpsert": true }, "http": { "path": "organizer/:organizer_id/events" }, "properties": {}, "va ...

Pattern for money with two decimal points and a comma as the separator

I have currently implemented regex in the convertNumberToString property, where a comma appears every 3 digits entered. The convertStringToNumber property simply removes the comma to convert it back to a number type. Now, I want to update the regex for t ...

Unable to retrieve data from local file using ajax

While delving into the world of AJAX, I encountered an issue when trying to fetch data from a local file. An error related to CORS popped up, despite my attempts to solve it by installing the 'allow-access-control-origin' plugin. Any assistance w ...

Disabling a button based on the state of a switch button using React and Material UI

For the task at hand, we need to ensure that the button is only activated when the switch button's state changes. This state is received as a prop and needs to be validated correctly within the handleChangeState function. const CustomSwitch = ({name, ...

Trigger a JavaScript function upon clicking a link

Is it possible to have a CMS that loads articles using ajax, where the article is loaded through a function with parameters, and when a certain link is clicked, it redirects to the target page and launches the function on that page? For instance, let' ...

Initializing Three.js to load the model

I have a 3D model that I initially had in the 3DS format. I then converted it to OBJ and finally to JS format. Now, my goal is to load this model into another JS file. Below you'll find the code snippet I've written for this purpose: var loader ...

Tips for verifying if the input in a Material UI textfield is an <iframe> tag

In my ReactJS code, I am utilizing the TextField component from material-ui. I need to verify if the user input is an iframe. How can I achieve this? Currently, I am attempting to use window.parent.frames.length > 0; to determine if the page contains a ...

`Inefficacy of Memory Deallocation for Dynamically Added Mesh`

I am working with a Mesh instance that utilizes a TubeGeometry for its path. Whenever I make changes to the underlying curve that the TubeGeometry instance is based on, I remove the mesh from the scene and create a new one. Although the scene updates prop ...

Issue with reading initial state value in React application

I'm currently working on an application centered around payment recording functionality. Within my app, there is a state structure that looks something like this: const [state, setstate] = useState({ amountPaid: Number(bill.total), // the 'b ...

The Electron React app crashes due to difficulty parsing the source map

I'm a beginner in the coding world and currently working on creating an electron app using react. One of the functionalities I want to implement in the app is the ability to save user login information so that the data can be automatically fetched whe ...

Accessing/Storing Pictures in MongoDB using Mongoose

I've been struggling with managing images in MongoDB for a while now. Everywhere I look suggests using GridFS because of the 16mb size limit per document. However, the documents I want to store are all <16mb each. Currently, I am storing it like th ...

Transfer information from a single form and distribute it across multiple forms with the help of jQuery or Javascript

Form1 has a variety of input fields including text, select, radio, and textarea. At the bottom there is a button labeled "copy" that allows users to copy data from all the fields in Form1. In different pages, I have three to four other forms with input fi ...

Mastering the art of resolving a dynamic collection of promises with '$.all'

Imagine having 3 promises and passing them to $q.all. This results in a new promise that resolves when the 3 promises are resolved. But what if I realize before the 3 promises resolve that I also want a 4th promise to be resolved? Can this be achieved? I ...

Determine the return type of a function based on a key parameter in an interface

Here is an example of a specific interface: interface Elements { divContainer: HTMLDivElement; inputUpload: HTMLInputElement; } My goal is to create a function that can retrieve elements based on their names: getElement(name: keyof Elements): Elemen ...

The Evolution of Alternatives to contentEditable

Related: ContentEditable Alternative I am curious about the timeline of online WYSIWYG editors prior to the existence of contentEditable. I remember using GDocs and GMail with rich-text features that functioned similarly to contentEditable. I would appre ...

Why does the onBlur event function in Chrome but fails to work in Safari?

I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error m ...

What is the most effective way to transfer parameters from a Controller to a directive?

Just starting out with AngularJS In my angular application, I've set up a directive and a controller. I'm looking to have my controller provide various configuration options, including callback methods. The directive I've created is an Ele ...

Tally the total number of items within an array using AngularJS

Here is my code snippet: $scope.data.months = []; angular.forEach(response, function (value, key) { $scope.data.months.push({'month':value}); }); The output of console.log(response) looks like this: Array[3] 0 : "April 2017" 1 ...