Using Angular's UI-Router to handle nested states and integrating a back button functionality

I've encountered a challenge with nested state, resolve and the browser back button. Here is my states configuration: there's one abstract state and 2 children states - one for viewing a profile and another for reserving it. The standard flow involves opening the profile page, clicking on a link to open the request page, which works smoothly. However, when I click the browser back button on the "profile-request" page, the "ProfileViewController" is executed but the profileData isn't resolved. Is there a way to either reload the previous view without rendering it again or to force the promise resolution before executing the controller?

$stateProvider
  .state('public', {
    abstract: true,
    templateUrl: 'app/public.html'
})
.state('public.profile-view', {
    url: '/profile/:slug',
    templateUrl: 'app/profile/profile.view.html',
    controller: 'ProfileViewController',
    controllerAs : 'vm',
    resolve: {
      profileData: function($stateParams, Profiles) {
        return Profiles.query({ slug: $stateParams.slug });
      }
    }
})
.state('public.profile-request', {
    url: '/profile/request/:slug',
    templateUrl: 'app/profile/profile.request.html',
    controllerAs: 'vm',
    controller: 'ProfileRequestController',
    resolve: {
      profileData: function($stateParams, Profiles) {
        return Profiles.query({ slug: $stateParams.slug });
      }
    }
})

Answer №1

Did you consider implementing caching for the profileData in Profiles and retrieving cached data within ProfileViewController if it is available?

Alternatively, you could store the profileData in the $rootScope as another option.

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

What is the reason for a session ID being retained after a session timeout occurs in JSP?

When working with JavaScript in JSP, I encountered an issue where the userId in session always contains a session ID, even after the session has expired. However, when checking in a Java Action class, the userId is null after the session expires, unlike ...

retrieve 10 entries from Google's feed API and then dynamically load more using the "next" button

Currently, I am utilizing the Google Feed API to develop an RSS reader, but I have a specific requirement. I only want to display 10 entries initially, and then load the next set of 10 entries when the user clicks on a 'load more' button. Despit ...

What are some best practices for managing asynchronous requests on the client side with Node.js?

I am a beginner in NodeJS, currently utilizing it on the server side for my projects. My goal is to create a simple REST-based GET request that takes a search parameter called searchvar from the user and returns any matching records found in a JSON array. ...

Issue with Tinymce Editor: Content does not refresh when clicking another button within the form

I have a form set up as shown below: <form method="post" action="example.com" id="form"> <textarea id="content">{{$content_from_database}}</textarea> <button type="submit">Update</button> </form> Within the form, I ...

Removing leading zeros from numeric strings in JSON data

I am facing an issue with my jQuery-based JavaScript code that is making an Ajax call to a PHP function. updatemarkers.xhr = $.post( ih.url("/AjaxSearch/map_markers/"), params).done( function(json) { <stuff> } The PHP function returns the follo ...

The error has not been handled properly and is being thrown at line 174 in the events.js file

I encountered an issue while trying to request data from an API, resulting in a crash on any Windows server. Can someone lend a hand with this problem? Here is a snippet of my code: app.get("/js/2806/api/products/getAllDrugs", (req, res) => { co ...

Exploring Object Arrays with Underscore.js

Here is an array of objects that I am working with: var items = [ { id: 1, name: "Item 1", categories: [ { id: 1, name: "Item 1 - Category 1" }, { ...

Unable to transfer Base64 encoded data to C# through AJAX

I'm facing an issue where a base64 string I send through ajax to an aspx page with C# code behind always arrives empty. Despite other form fields posting successfully, this particular string is not making it through. The base64 string in question app ...

The system encountered an error stating that the required component "Footer" in the main directory was not located in the specified node_modules

Issue I'm Facing: Error found in components/main/Footer within the file path: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue Components Tree as shown in the screenshot below: https ...

Sorting Arrays with Missing Object Properties

Here is a sample array that I am working with: [ { "id": 1, "name": "Ruan Duarte", "idade": 11, "work": { "id": 2 } }, { "id": 2, "name" ...

Utilize ng-repeat to iterate over two arrays

Two arrays are at my disposal here. The first array contains option content, while the second array consists of option tags (i.e., A, B, C, D). How can I structure the layout for the 'input type="radio"' using ng-repeat? To start off, I am attem ...

Refresh webpage with updated title

I have hyperlinks to other sections within the same HTML document. When users click on these links, they open in a new tab. However, I want each new tab to have its own unique title. How can I achieve this without changing the title of the current tab? T ...

The combination of Firebase Storage's listAll() method and getDownloadURL() function is not functioning properly

I created a function in my utils file that is designed to find and retrieve the URLs of images stored within a specific folder on Firebase Storage. The folder path is "proj_name/screenshots/uid/" and it contains 8 images. I have imported this function into ...

Utilizing express.js to access an HTML document

var express = require("express"); var fs = require('fs'); var sys = require('sys'); var app = express(); app.use(express.logger()); app.get('/', function(req, res){ fs.readFile('/views/index.html'); }); ap ...

Preventing circular dependencies while upholding the structure of modules in Express

I am developing an express app in ES6 and organizing my files by functionality. In this structure, each module has an index.js file that is responsible for exporting relevant methods, classes, etc. Other modules simply require the index.js from another mod ...

What is the best approach to comply with the EsLint rule "react-hooks/exhaustive-deps" and properly implement componentDidMount using hooks in React with a warning level?

After reviewing the React documentation, it appears that componentDidMount is now implemented using hooks as shown below: useEffect(() => { // your code here }, []) For example, if you wish to make an API call within this hook: useEffect(() => { ...

Essential Understanding of HTML Query Strings Required

As a newcomer to the world of web design, I have taken on what seems like a challenging task for me: creating a webpage that can send a query string to the German Railway website (bahn.de) with the parameters I input. My question now is whether there is a ...

Update the var value based on the specific image being switched using jQuery

I have implemented a jQuery function that successfully swaps images when clicked. However, I am now looking to enhance this functionality by passing a parameter using $.get depending on the image being displayed. Here is the scenario: I have multiple comm ...

Implementing useEffect with event listeners

After receiving an event from the contract, I need to execute database updates. My main worry is when the contract emits another SomeEvent before the DB operations are complete, which could trigger the useEffect again before the first update is finished. ...

Looping through an array of objects using V-for

Trying to iterate through an array of objects using v-for, but struggling with the syntax: <ul> <li v-for="(data,index) in userStore.links">{{data.link}} - {{index}}</li> </ul> Issue: data.link displays nothing and in ...