Angular-Breeze Navigation Strategy Template

Within my Angular site, there is a page that allows users to run reports based on various criteria such as employee ID, event ID, from date, to date, and more. Once the user selects the parameters for their report and clicks submit, they are shown search results matching their criteria on the same page. From there, they can choose a result to view more detailed information.

The issue arises when users click the back button after viewing a detail page because they are redirected to the '/reports' URL without any of their previous search parameters or results saved. I am seeking a "best practices" solution for preserving the state of the page before they clicked on a specific result (e.g. '/reports?employeeId=2&eventId=7').

javascriptangularjsdesign-patternsbreeze

Answer №1

Assuming that you are utilizing a routing library, such as ngRoute provided by Angular or a third-party option like ui-router.

If you opt for the ngRoute module, you can utilize a service within it known as $routeParams, which presents the current route's parameters as an object. In case of using ui-router, you have access to $stateParams.

The handling of route parameters' persistence as you move between pages and utilize the back button is managed by the $location service using the browser API history.pushState.

To gain a deeper comprehension of how routing functions in Angular, take a look at this informative tutorial on the Angular website.

Answer №2

One way to save this information is by using the HTML5 Web Storage API. You can find some helpful examples at .

With localstorage, you can create a dictionary-like collection that connects each View (or page) with its corresponding values.

For instance, you could store an object as shown below:

data = {
    reportPage: {
        employeeId: 2,
        eventId: 7,
        ...
    }
}

Then, when you navigate back using the back-button, you can load this data in your activate method.

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

Exploring a way to iterate through an object and check if it is the sole key available

I am currently utilizing jQuery.serializeJSON (https://github.com/marioizquierdo/jquery.serializeJSON). Essentially, I have a form structured like this: <input name='store[products][][type]' type='text' value='TableSaw' /& ...

javascriptjqueryjson

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

What is the best method for incorporating a CSRF token into a JavaScript file?

My Node.js application has CSRF implemented, and it was working well when I had JavaScript inline in a JADE file. I just used #{token} to insert the token into the JavaScript code. But now that I have moved my JavaScript into external files, I am struggli ...

javascriptnode.jsexpresspugcsrf

Is it possible to utilize both href and ng-click in Angular.js?

Here is a text box: <input type="text" ng-model="SearchText" > And also, a link: <a href="#logout" ng-click="SearchText=''">Logout</a> I am trying to make both actions work in the above hyperlink. The ng-click should clear t ...

angularjsangularjs-ng-click

Troubleshooting: Issues with the functionality of Angular UI-Bootstrap Popover

I have a list generated using angular 'ng-repeat', and I am trying to make it so that when an item is clicked, a popover will appear showing some additional information. I've attempted this multiple times but it doesn't seem to be funct ...

angularjsangular-ui-bootstrappopover

Enhancing a React modal to enable user input for updating state variables

Is there a way to utilize user input from the page to dynamically create elements in a React.js application? In my app.js file, I have defined some constants at the beginning for mock data: const book1 = [ {id: uuid(), content: 'reflections&apos ...

javascriptreactjsuser-interfacefrontendrefinejs

Angular: controller's property has not been initialized

My small controller is responsible for binding a model to a UI and managing the UI popup using semantic principles (instructs semantic on when to display/hide the popup). export class MyController implements IController { popup: any | undefined onShow(con ...

javascriptangularjstypescript

Scope of MongoDB's `.findOne` method

Having trouble with variable scope. var max; ClassModel.findOne({ class: '1a' }, function (err, class1a) { if (err) return handleError(err); max = class1a.members; console.log(max); }); console.log(max); Why does ...

javascriptnode.jsmongodbmongoose

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

I'm currently working on generating a bar stack graph using the chart.js JavaScript library. My JavaScript array contains the following data: 0: {labels: "01/01/2020 00:00:00", data: 7433, category: "A"} 1: {labels: "01/01/2020 00:00:00", data: 774, ...

javascriptajax

Having trouble finding a solution in NODE.JS for this issue: "No 'Access-Control-Allow-Origin' header is present on the requested resource" (in a nodejs and angularjs environment)

I've recently started working with node.js and have been building a Rest API. The API is functioning properly, however, I'm encountering an "access-control-allow-origin" error whenever I call the services through angularjs. I've tried adding ...

angularjsnode.js

The Dropdown Menu is displaying correctly in Chrome, but is being obscured by an image in Safari

While the Nav dropdown menu functions correctly in Chrome, an issue arises in Safari where the image covers the rest of the menu. This discrepancy between browsers is puzzling. Why does this problem only occur in Safari when it displays properly in Chrome? ...

javascripthtmlcssgoogle-chromesafari

Having trouble uploading an image with Angular's HttpClient

Uploading an image using native fetch POST method works perfectly: let formData = new FormData(); formData.append('file', event.target.files[0]); console.log(event.target.files[0]); fetch('http://localhost:8080/file/ ...

javascriptangularhttp

Received a 404 error when executing a Fetch POST request to /send endpoint, even though there was no error reported

Whenever I attempt to upload data to the school database upon clicking a submit button on a form, I encounter a challenge. The server.js file has been configured and confirmed functional with Postman. But when attempting to POST the data on button click, a ...

javascriptnode.jsexpressfetch-api

remove website tracking data by using developer tools console

In JavaScript, we have the ability to delete local storage or session storage items using the clear() method: localStorage.clear(); sessionStorage.clear() However, is there an equivalent method like cookies.clear() to clear cookies? If so, how can it be ...

javascriptweb

"Learn how to dynamically update the value of a text box using a loop in jQuery when the

I am looking for a way to update the value of the second input field when the first one is changed. For example, if the user changes the value in "valuex00", I want the same value to be displayed in "valuey00". This should apply to all corresponding pairs ...

javascriptphpjquery

The result of Coordinates.speed is consistently null

I'm working on a project that involves changing the speed of background particles based on the user's device speed (like when they are in a car or bus). I thought the Geolocation API would be a perfect fit, specifically the Coordinates.speed prop ...

javascriptthree.jsnullgeolocationgps

What is the method for inserting JSON data into a select element's options?

Below is the HTML code snippet provided: <html> <head> <link rel="stylesheet" type="text/css" href="CarInfoStyle.css"> </head> <script src="CarInfoJavascript.js"></script> <body> <div class="search ...

javascripthtmljsondynamic-arrays

Automatically append version number to requests to avoid browser caching with Gulp

When deploying my project, I utilize gulp to build the source files directly on the server. In order to avoid caching issues, a common practice is to add a unique number to the request URL as explained in this article: Preventing browser caching on web app ...

javascriptnode.jsnpmgulp

Experience the magic of MFA Firebase combined with the seamless flow of React

I'm currently in the process of integrating Multifactor authentication with Firebase for a user enrollment, using the setup guide available at: https://cloud.google.com/identity-platform/docs/web/mfa I'm encountering difficulties in understandin ...

javascriptreactjsfirebasemulti-factor-authenticationgoogle-cloud-identity

I am interested in checking the dates of the current date and disabling the button if the date falls within that range

I am attempting to deactivate a button if the current date falls within a three-month period. Despite my efforts to use a combination of Php and JavaScript, I was unable to make it work. PHP Code @php($found = false) @foreach($doctors as $doctor) ...

javascriptphplaravel