Can the URL in angular.js be modified without having to invoke the controller

Question

Can the URL in angular.js be modified without having to invoke the controller

My current issue involves the following scenario: I am using the url

http://localhost:8080/#/dashboard

to display features in my dashboard. For instance, when the url changes to

http://localhost:8080/#/dashboard/20

, I need to load cities where the country id is 20. Similarly, if the url changes to

http://localhost:8080/#/dashboard/20/1

, I have to load districts where the city id is 1. However, the problem arises when transitioning from loading cities to districts. Whenever the url changes to #/dashboard/20/1, my controller refreshes and reloads all the data. I am seeking a solution where I can change the url without refreshing the controller. I want to be able to load only districts without reloading the entire data each time.

I attempted using window.history.pushState but it did not work. Is there a way to disable and enable my $routeProvider to achieve this goal?

Any suggestions or ideas on how to approach this?

javascript angularjs url pushstate

Answer 1

Answer №1

In order for this to work effectively, I suggest either referencing the same controller or utilizing a factory/service to manage your variables. Controllers will always need to be updated when the state changes if they are closely tied to them.

Update: By the way, have you explored ui.router? Check it out here: https://github.com/angular-ui/ui-router I personally find this to be a more helpful solution compared to the outdated $route

Answer 2

In order for this to work effectively, I suggest either referencing the same controller or utilizing a factory/service to manage your variables. Controllers will always need to be updated when the state changes if they are closely tied to them.

Update: By the way, have you explored ui.router? Check it out here: https://github.com/angular-ui/ui-router I personally find this to be a more helpful solution compared to the outdated $route

Can the URL in angular.js be modified without having to invoke the controller

Answer №1

Similar questions

mvc data binding without any assistance

show various commands and outcomes of the getElementsByClassName() function

Is there a way to iterate through an array in reverse, starting from the last element and ending at the first element?

"Learn the technique of displaying or concealing a row in a ListView with the help of

Fetching image URL via an AJAX request with CarrierWave

Add a span tag with the class "javascript" around the index of a character within a string

A guide on sending arrays from javascript to a Laravel controller through axios

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

What steps should I take to make jQuery compatible with a Greasemonkey 0.8 script on Firefox 2, without internet access on the computer?

Utilizing Odoo Point of Sale feature on product selection

No response detected - ajax communication with codeigniter

Tips on incorporating asynchronous functionality in AngularJS

Issues with simple jquery and javascript: unable to add the class ".has-error" and onclick event not properly defined

The use of AngularJs with a hash in the href can disrupt scrolling functionality and alter the URL to include a combination of hash

Determining the optimal time to declare a controller within a directive

Error: Unable to access the 'sid' property because it is undefined

Discover the power of catching Custom DOM Events in Angular

Changing the boolean value of User.isActive in Node.js: A step-by-step guide

Capybara testing integration for input fields using 'TextAngular' feature

Implications of using literals, objects, or classes as arguments in functions that are called multiple times can have