Angular's route resolve feature does not wait for the promise to resolve before

I just started using angular and I'm facing an issue with my user route. I'm trying to resolve the user object before rendering the view, but even after injecting $q and deferring the promise, the view is loading before the promise gets returned.

Here's how my Route looks like:

.when('/user/:userId', {
    templateUrl: 'user/show.html',
    controller: 'UserController',
    resolve: {
        user: userCtrl.loadUser
    }
})

And this is what my Controller code looks like:

var userCtrl = app.controller('UserController', ['$scope',
    function($scope){
        $scope.user = user; // The User object is undefined

        // This console log fires before the user object is resolved
        console.log("Firing from the controller");

    }]);

userCtrl.loadUser = ['Restangular', '$route', '$q',
    function(Restangular, $route, $q) {

        var defer = $q.defer();

        Restangular.one('users', $route.current.params.userId).get().then(function(data) {
            console.log("Firing from the promise");
            defer.resolve(data);
        });

        return defer.promise;
    }];

Answer №1

Upon thorough investigation of the Github issues, a comparable issue was discovered and successfully addressed by implementing the following solution:

userCtrl.loadUser = ['Restangular', '$route',
    function(Restangular, $route) {
        return Restangular.one('users', $route.current.params.userId).get();
    }];

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

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

Angular - Automatically update array list once a new object is added

Currently, I'm exploring ways to automatically update the ngFor list when a new object is added to the array. Here's what I have so far: component.html export class HomePage implements OnInit { collections: Collection[]; public show = t ...

Why does Internet Explorer throw a null pointer exception while Firefox does not?

My script loops through an array of HTML tag IDs, with some elements being empty. It works perfectly in Firefox but throws a null pointer or 'not an object' error in IE. if((storedVars.id) != ("")){selenium.browserbot.getCurrentWindow().document ...

Display content exclusively in PDF format

On my HTML page, I have two sections - one for inputting values and the other for viewing a PDF. To ensure that the PDF view is hidden until explicitly requested, I need it to remain invisible by default. It should only appear as a PDF when someone clicks ...

Is there a way to compare data before and after revalidation using useSWR?

With the use of Next.js and through the implementation of useSWR, data is fetched from an endpoint every 30 seconds using an automatic revalidation interval (https://swr.vercel.app/docs/revalidation#revalidate-on-interval). Within the retrieved data, there ...

Is it possible to selectively hide the remove icon for certain files within the antd Upload component?

Is there a way to specifically hide the remove button in the Antd Upload component for files that meet certain criteria? I am aware of the "showRemoveIcon" prop which disables the remove icon for every file, but is there a way to do this for only one fil ...

Tips for creating a universal function to connect html elements in AngularJS

As a beginner in angularJS, I come with prior experience writing common functions for binding html controls in JS. However, I am looking to apply the same approach in angularJS. I understand the angular way of binding html controls, but my goal is to str ...

How can I make sure a Post method finishes executing before returning the result of a Get method in Express.js?

I am currently utilizing the Ionic framework and Express to facilitate communication between my application, a server API, and a JavaScript game. The game transmits information to the API through XMLHttpRequest and post requests, while my application retri ...

Retrieve Vuejs template by either module or ID

In my .Vue file, I have defined a template along with its subcomponents with the intention of allowing customers to override this template without needing to modify any javascript code. If there exists an element with id="search-result", then that element ...

Is there a way to obtain an Instagram login token through AJAX?

I'm encountering issues while trying to receive a token from Instagram. Despite using the following code, I keep running into these errors: SEC7127: CORS request blocked the redirect. SCRIPT7002: XMLHttpRequest: Network Error 0x2ef1, Unable to final ...

Embracing the power of AngularJS within the MVC Razor

As someone who is new to Angular and has been working on some basic projects, I am currently facing a challenge. I am attempting to transition some views to utilize Angular, but I have hit a roadblock. Is there anyone who can assist me in achieving the f ...

Tips for stopping the textarea from moving around as you type and avoid it hitting the bottom of the page: Utilize JQuery and

As I type into the auto-sizing textarea, the text runs to the bottom of the page and causes it to dance uncontrollably with each key press. This forces me to constantly scroll down to see what's happening. How can I prevent this page dancing and keep ...

Guide to verifying the update of user information with sweet Alert on ASP MVC

I'm currently working on an ASP MVC web application that involves using stored procedures with SQL Server. My goal is to implement a confirmation alert (Sweet Alert) to confirm the data update for a logged-in user. The code for editing works fine wi ...

HTML content that is produced through JSONP retrieval

Recently, I've been experimenting with the jQuery library and have found it to be quite useful. Lately, I've been delving into AJAX requests to fetch various information like weather updates, current downloads, and more, which has been going smoo ...

Automatically copy any chosen selection on the page to the clipboard

Is there a way to copy any selection from a webpage to the clipboard, regardless of where it is located on the page (div, text input, password input, span, etc.)? I have created a function that can retrieve the selected text, but I am struggling with sett ...

I would like to inquire about the process of accessing profile information on a website through the LinkedIn API

Do you know how I can use the latest LinkedIn JavaScript API with OAuth 2.0 to retrieve my own profile details for a website? The goal is to automatically update the website using my linked profile information. I have attempted the following: api_key: ...

Displaying dropdown options based on the previous selection made by the user

Can I link the data in my second dropdown to the selection made in the first dropdown? I tried a similar solution from stackoverflow without success. You can find the reference here. The code works when directly copied and pasted but not within my system. ...

Utilizing jQuery's AJAX method for Access-Control-Allow-Origin

Here's the code snippet I'm working with: $.ajax({ url: url, headers: { 'Access-Control-Allow-Origin': '*' }, crossDomain: true, success: function () { alert('it works') }, erro ...

Issue with Trix text editor not triggering the change event

Lately, I've been facing some difficulties in getting the tirx-change event to trigger when there are changes in the content of a trix-editor. Despite using React JS for the view, I haven't been able to identify the problem. Below is the code sni ...

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...