What is the best way to initiate the rendering of a template in AngularJS when data arrives through a resolve?

Initially, I can fetch data on first load in the controller like this:

function RankCtrl($scope, $route, $routeParams, Rank) {
   $scope.leagues = Rank.query($routeParams)
}

When the route changes, I utilize resolve to retrieve data from the server. Changing the route triggers a JSON request to the server without refreshing the page.

app.config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/rank/:type/:top', {
    controller: "RankCtrl",
    resolve: {
      leagues: function($route, $q, Rank) {
        return Rank.query($route.current.params)
      }
    }
  })

  $locationProvider.html5Mode(true);
});

I can see that the data is successfully retrieved from the server using Chrome Dev Tools.

However, my question is - where does this data go? I want to assign this data to $scope.leagues in order to update the view (template) based on the new data.

I attempted to use the

$scope.$on('$routeChangeSuccess')
event but it globally triggers all route changes, not just limited to this controller.

$scope.$on('$routeChangeSuccess', function(next, current) { 
  $scope.leagues = Rank.query($routeParams);
});

Any assistance with this issue would be greatly appreciated.

Answer №1

To properly utilize the RankCtrl, make sure to inject it with the resolve property name (leagues);

function RankCtrl($scope, $route, $routeParams, leagues) {
   $scope.leagues = leagues;
}

Additional Note:

Based on the version of Angular you are using, manual construction and resolution of promise object may be necessary:

/* ... */
resolve: {
  leagues: function($route, $q, Rank) {
    var deferred = $q.defer();
    return Rank.query($route.current.params, function(leagues){
      deferred.resolve(leagues);
    });
    return deferred.promise;
  }
}

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

Effortlessly populate the i18n language within ng-grid using AngularJS

I am currently working on an application that utilizes localization (i18n) with AngularJS. For this project, I decided to incorporate a basic ng-grid which can be found here. Here is a snippet of the code I am using: $scope.gridOptions = { data: 'f ...

What is the best method for validating multiple fields in a form with Javascript?

I am currently working on validating multiple fields within a form. Although I lack experience in JavaScript, I have managed to piece together a code that is functional for the most part. If all fields are left blank, error messages prompt correctly. Howe ...

How to Use Attributes as Component Parameters in Vue.js

I am currently developing a test Component using Vue.js. I am trying to pass a parameter to be used in my template like this: Vue.component('test', { props: ['href'], template: '<li><a href="{{href}}"><slot> ...

How come the chosen item is not showing up in the bootstrap dropdown on WordPress?

I'm having trouble displaying the selected item in a bootstrap dropdown menu on WordPress. You can check out my site at . Ideally, it should function similar to this example: http://www.bootply.com/62811 https://i.sstatic.net/5d5FH.png Here is my men ...

What is the process for connecting two scripts together?

Purpose : I am currently working on a Firefox add-on with the goal of tracking the online status of my team members in a game. Current Progress : I have developed an initial JavaScript script that runs upon opening the browser. This script creates and ...

Organize the array based on the grandchild's value

Consider this scenario: I have a collection of objects, where each object contains another collection of objects. The structure is as follows: [ { "dislikes": [ { "createDate": { "date": 11, ...

PHP can be executed and accessed directly from JavaScript without the need for any form submission

While I have come across a lot of information on PHP post/get methods for transmitting data, I find myself stuck with an interesting issue that requires some assistance. My HTML page contains data in different inputs, and I run algorithms on the JavaScrip ...

Encountering the error message "Cannot GET /" when trying to access the front page using Express.js

I am a beginner in Node.js. I have been learning through videos and documentation, and I started developing a site following an MVC structure. The node server appears to be working fine, but I am facing an issue where the front end displays 'Cannot GE ...

Developing a universally accessible variable for utilization in various functions

I'm having trouble understanding why 'currentPos.LatLng' is undefined when trying to access it outside the function even though it's part of an object. I want to be able to retrieve the current position values to use them in another fun ...

Unlock the potential of JavaScript by accessing the local variable values in different functions

I've been struggling for days to find a solution to this issue... https://i.stack.imgur.com/KDN7T.jpg https://i.stack.imgur.com/tOfCl.jpg The image above illustrates the challenge I'm facing - trying to apply data values from elsewhere to the ...

JavaScript's Use of Brackets

I’ve been working on a new project that involves adding links. To do this, users can input both the link URL and the text they want displayed. I used a prompt to gather this information. Here’s the code snippet I wrote: document.getElementById(ev.targ ...

Deactivate the form outside of normal business hours

I need to create a form for a delivery service that only operates from 9am to 9pm. If a user submits the form outside of these hours, I want to redirect them to a page displaying the company's operating hours instead of a thank you page. For instance ...

Differences Between Using Array.push() and Literal (Bracket) Notation in JavaScript

I am looking at this specific answer. What is the reason behind Code Snippet 2 not producing the same result as Code Snippet 1? Code Snippet 1: var firstEvents = events.reduce(function(ar, e) { var id = e.getId(); if (e.isRecurringEvent() && ...

Validation is performed on the Bootstrap modal form, ensuring that the modal is only loaded after the

In order to provide a better understanding of my website's file structure, I would like to give an overview. The index.php file dynamically adds many pages to my website. Here is the code from index.php: <?php include ('pages/tillBody.php ...

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Is there a way to ensure that all images maintain the same height and width using CSS percentages, rather than set pixel values? I'm working on displaying images in circles, where most are uniform in size but a few outliers distort the shape. The wide ...

Managing errors in jQuery's .ajax function

Having some issues with jQuery.ajax() while trying to fetch an html code snippet from table_snippet.html and replacing the element in my html code. The error handler in jQuery.ajax() gets triggered instead of the expected success handler. <!DOCTYPE H ...

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...

Implementing jQuery during the navigation between Node routes

Below is a snippet of my jQuery code: $(function () { $('.mnav a').click(function () { el = $('.border'); el.addClass('blink'); el.one('webkitAnimationEnd oanimationend msAnimationEnd animatio ...

utilizing the identical characteristics of the parent component

In order for the properties in InputGroup.js to be accessible as this.props in lower-level components like TextInput.js, Checkbox.js, I have created a simple component called InputComponent.js. In this component, I assign this.props to this.prpt so that it ...

Is it possible for jcarousel to interact with a database as well?

Hey there, I've been searching everywhere but couldn't find any information on how to make jcarousel work with a database. That's why I'm reaching out here for some help. I have a page where I'm using jcarousel. css js Currently ...