Dealing with promises in AngularJS within the ui-router configuration

Below is a snippet of my $stateProvider code:

$stateProvider
  .state("home", {
      url: "/",
      template: "<employee-info-component user='$resolve.user'></employee-info-component>",
      resolve: {
        user: function(individualFootprintService) {
          var usr = individualFootprintService.getCurrentUser();
          return usr.then(function(data) {
            return data;
          });
        }
      }

This is the getCurrentUser service I am using:

function getCurrentUser() {
  return $http
    .get("/user")
    .then(function(response) {
      return response.data;
    });
}

Here is how I bind the user in my component:

        binding:{
                user: '<'
        }

We initially set up the controller like this:

function individualFootprintController(user) {
        var $ctrl = this;
user.then(function (data) {
            $ctrl.user = data;
        });
}

However, we encountered an exception

Error: [$injector:unpr] Unknown provider: userProvider <- user <- individualFootprintController

So we modified the controller to this:

function individualFootprintController() {
            var $ctrl = this;
            console.log($ctrl.user);
    }

In this version, user doesn't reach the controller and remains undefined. My question now is how do I access the desired object from the controller?

Answer №1

It is recommended to utilize bindings in place of binding.

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

Retrieve the value of the object within the mysterious index loop in JavaScript

I have retrieved search results from the data, and each time the index of my search result varies. At one point, the result may appear in the 4th index, while at another time it might be in the 100th index. How can I retrieve the rank value from within t ...

Are the server updates not syncing with the client browser?

Is there a reason why server updates are not appearing on the client browser? Could it be that a specific attribute value needs to be modified or is this related to caching? app.get('/hello' , (_ , res) => { res.header({ 'Cach ...

I'm looking to instantiate a Backbone collection outside of a script - how can I do that?

I have created my backbone collection named "Events" with a model called "Event". I want to create the backbone collection in this manner: Check out my code below: <script src="<?php echo site_url(); ?>js/backbone-calendar.js"></script&g ...

Passing a JavaScript variable to PHP within an HTML document: Parsing data from Wikipedia

I am currently working on passing a JavaScript variable named $url to a PHP function in the same HTML file. The idea is that a user inputs a species into a textbox, and the Wikipedia API is called to check if the input matches a Wikipedia page. If a match ...

Setting up the Node.js file system for an Ionic project: A step-by-step guide

Seeking a solution to delete a Folder/File on the client side using javascript/jQuery/AngularJS1. After researching, I found that it can be done using Node.js as shown in this Sitepoint link. Now, I am unsure how to integrate Node.js fs(File System) with ...

Load external JSON file using THREE.JSONLoader (excluding models)

I'm attempting to use THREE.JSONLoader to load a JSON file that contains coordinates, not a JSON model. Here's what I'm aiming to achieve: var loader = new THREE.JSONLoader(); loader.load("coordinates.json", function(result) { console.log ...

Removing CSS from a Link in react-router-dom

My attempt to create unique divs for different pages using the code in my home.js didn't go as planned. <Link to="Subject1"> <Product title="The Lean Startup" image="https://images-na.ssl-images-amazon.co ...

Expanding a JSON data structure into a list of items

In my Angular service script, I am fetching customer data from a MongoDB database using Django: getConsumersMongodb(): Observable<any> { return this.httpClient.get(`${this.baseMongodbApiUrl}`); } The returned dictionary looks like this: { &q ...

Sharing a state object with another React file can be accomplished by using props or context to

My first React file makes an API call to retrieve data and save it in the state as Data. import React, { Component } from "react"; import axios from "axios"; import Layout from "./Layout"; class Db extends Component { constructor() { super(); th ...

Incorporating Images in AngularJS based on Boolean Values Retrieved from Model Database

I have a requirement to display images in a table based on true and false values from the 'user' collection. How can I achieve this functionality? Here is the code snippet: <div class="col-sm-12"> <div class="info-box"> <d ...

Modifying the color of an individual object in THREE.js: Step-by-step guide

I am currently working on editing a program that uses Three.js and Tween.js. Despite my efforts to find a solution both here and online, I have not been successful. The program involves creating multiple objects (cones) using THREE.Mesh, with a script that ...

Toggle the visibility of text boxes based on the checkbox selection

After doing some research, I decided to revise the question after receiving feedback that it was causing some concern. When a checkbox is clicked, the content of the corresponding div should be visible and vice versa. How can I achieve this? Thank you. JQ ...

Using Bootstrap to present information with a table

Presenting information in a Bootstrap table with Vue.js I have gathered the necessary data and now I want to showcase it in a table using bootstrap. Currently, I have achieved this using SCSS as shown in the image below: https://i.sstatic.net/XN3Y4.png ...

Numerous checkboxes have been chosen alongside a submission button

I recently completed a small project involving multiple checkboxes using ajax. You can view the demo here. However, I am now looking to implement a submit button for filtering options. After selecting multiple checkboxes and clicking the submit button, onl ...

Class with an undefined function call

Currently, I am working with angular2 and TypeScript where I have defined a class. export class Example{ //.../ const self: all = this; functionToCall(){ //.. Do somerthing } mainFunctionCall(){ somepromise.then(x => self.fu ...

Enhance user experience with jQuery UI sortable and the ability to edit content in real

I am facing an issue with jquery sortable and contenteditable. The problem arises when I try to use jquery sortable along with contenteditable, as the contenteditable feature stops working. After searching on Stack Overflow, I found a solution. However, up ...

receiving an undefined value from a remote JSON object in Node.js

I have been struggling to extract the specific contents of a JSON api without success. Despite my best efforts, the console always returns undefined. My goal is to retrieve and display only the Question object from the JSON data. After spending several h ...

How can I prevent AngularJS from re-rendering templates and controllers when navigating to a route with the same data?

Is it possible to prevent the templates for the controllers of a route from re-rendering when changing the route, even if the data remains unchanged? ...

Show the current phone number with the default flag instead of choosing the appropriate one using the initial country flag in intl-tel-input

Utilizing intl-tel-input to store a user's full international number in the database has been successful. However, when attempting to display the phone number, it correctly removes the country code but does not select the appropriate country flag; ins ...

Improving Performance in AngularJS Through Efficient Scope Passing Between Controllers

I am facing a situation in my AngularJS project where I have two controllers - controller 1 is constantly present in the view, while controller 2's visibility can change based on the view. In order to ensure that controller 1 has access to certain sco ...