Angular 1.5.x Component Router Data Loading Feature

Is there a way to make a component route wait for data before executing the controller and rendering the view, similar to using resolve in ngRoute or ui-router?

The documentation provides an example:

https://i.sstatic.net/Do1Qa.png

This only waits for the URL change, as shown below:

//Old url
http://localhost/#/

// wait for the promise (e.g. 1s) and then change the url to
http://localhost/#/heroes

However, the view is changed immediately after clicking the link, followed by the URL change, which seems odd!

This process does not block the view render or controller execution (obviously).

Here's a demo of this situation:

Code and preview: plunkr.co (click on heroes)

There is a similar unanswered question here: Angular 1.5.x Component Router Resolve

Answer №1

I have discovered a resolution:

To properly set this up, it needs to be defined within the component:

.component('myComponent', {
    templateUrl: './my-compnent.html',
    controller: MyComponentCtrl,
    $canActivate: function($nextInstruction, $prevInstruction) {
      return Promise.resolve(<true or false>);
    }
})

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

The functionality of jQuery touch events on iOS devices is not functioning properly

I'm encountering issues with jQuery touch events on iOS devices. Here is my current script: $(document).ready(function(){ var iX = 0,iY = 0,fX = 0,fY = 0; document.addEventListener('touchstart', function(e) { ...

When res.write is called before res.send, an error occurs

I'm struggling to figure out why I am getting an error with the following code. app.get("/", (req, res) => { res.write("Hello"); res.send(" World!"); }) // Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers afte ...

Assigning a Value to a Select Option in a Dynamically Generated Form

I've developed a dynamic form that includes a dropdown menu. I would like this dropdown to display fiscal weeks, and to achieve this, I need to implement a loop within a TypeScript function. form.ts - <div class="col-md-9" [ngSwitch]="field.type ...

Is it advisable to restrict ajax requests?

Is using ajax requests more resource-intensive than a traditional page load? Consider a basic menu with standard links where clicking a link takes you to a new page. By using ajax, I can avoid this default behavior and instead fetch the linked page' ...

Experiencing sporadic 502 Bad Gateway issues when operating Express applications through Nginx

As I manage multiple Node.js express apps behind nginx, I encountered intermittent 502 Bad Gateway errors in certain situations despite successfully running the apps. The primary instance of this issue arises during user login attempts. The first login try ...

NodeJS presents a potential maze of confusion with its promises

I've been struggling to grasp the concept of asynchronous code execution in NodeJS. My goal is to fetch the output of ip a on a Linux machine and extract the IP Subnet manually. Once that is done, I simply want to use console.log() to display the IP S ...

A recursive function that utilizes a for loop is implemented

I am encountering a critical issue with a recursive function. Here is the code snippet of my recursive function: iterateJson(data, jsonData, returnedSelf) { var obj = { "name": data.groupName, "size": 4350, "type": data.groupType }; if ...

Pressing a specific button triggers a broadcast signal, prompting a modal window to pop up and display relevant information

Within my website's HTML page named rollup.html, there exists a button that triggers the opening of a modal. <button id="myBtn" ng-click="printDivModal('rollup-tab')">ModalTest</button> In the accompanying JavaScript file, roll ...

Encountered a parsing issue while attempting to retrieve JSON data from an API in Dialogflow

I am currently working on retrieving JSON data from the iex API. Utilizing Google's Dialogflow inline editor, I encountered an error while attempting to fetch the JSON information: Error: Parse Error at Error (native) at Socket.socketOnData (_http_cl ...

Utilize the `npm ls somepackage` command to adhere to version range specifications

I need to utilize npm ls to pinpoint the source of security warnings. Reference to the documentation states that: Positional arguments consist of name@version-range identifiers, which will restrict the outcomes to only the paths leading to the specified ...

Every checkbox has been selected based on the @input value

My component has an @Input that I want to use to create an input and checkbox. import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-aside', templateUrl: './aside.component ...

Enable jquery offsetParent() function

$(document).ready(function(){ $("button").click(function(){ if ($("p").offsetParent().css("background-color") === "red") { $("p").offsetParent().css("background-color", "yellow"); } else { $("p").offsetParent().c ...

Updating and Preserving Content in Angular

I've encountered an issue while working on a code that allows users to edit and save a paragraph on the screen. Currently, the editing functionality is working fine and the save() operation is successful. However, after saving, the edited paragraph do ...

"Strategically placing elements on an HTML grid

My current project involves creating a grid layout in HTML using CSS. The goal is to use this layout for various elements such as images, text, and links. What I envision is a visually appealing grid where each object fits together seamlessly with no gaps ...

Accessing variables from a webpage using the console in Chrome

Suppose I have a webpage that contains a set of JavaScript variables like this: const pageId = 1 const pageName = "pName" Is it feasible for me to access these variables directly from the console window? Instead of modifying the page code to log the var ...

Integrating Bootstrap into an Angular 1.x project using webpack has been proven to

After adding npm bootstrap to my webpack-based Angular 1.x project, I encountered an issue when trying to require "bootstrap" after "jquery" - it returned a module not found error. Can someone please provide guidance on how to properly use Bootstrap with w ...

What are the steps to integrate DeviceOrientationControls with scrolling on iOS 13?

I am currently using DeviceOrientationEvents data to animate the rotation of a camera in three.js using DeviceOrientationControls. The controls are updated with each animation frame, and everything is functioning as expected. However, I have noticed that w ...

Looking for JavaScript code that can dynamically create an HTML table from JSON data

I am in need of a javascript solution that can dynamically generate either an HTML table or a bootstrap grid layout based on a specific data structure. [ {"x":0,"y":0,"width":2,"height":1,"title":"Lorem ipsum dolor sit amet"}, {"x":2,"y":0,"width ...

Using MVC4 and jQuery to unselect items from an Html.CheckboxListFor

In my search page, I am utilizing jQuery to toggle the visibility of different sections based on user input. Specifically, I have a Html.Textbox and Html.CheckboxListFor that are shown or hidden depending on whether there is any input in the textbox or if ...

Ways to identify and differentiate user clicks on various buttons

I have generated 3 different plan options from an array of objects retrieved from the backend. Depending on whether the plan is cheaper, the user's subscription, the corresponding button will display "downgrade", more expensive, the button will show ...