AngularJS traditional navigation rather than using $location.path

Question

AngularJS traditional navigation rather than using $location.path

While working in controller A, I used $location.path('/home') for redirection. However, I realized that I needed a normal redirect as $location.path does not reload the page. I am aware that in ui-route, we have $state.go({reload:true}) for this purpose. But how can I achieve the same with normal ngRoute? When I tried the following:

.controller('home', function($route){
$route.reload()
}

I ended up in an infinite loop.

javascript angularjs

Answer 1

Answer №1

Instead of using $location.path('/path');, you can utilize the window object to reload the page:

window.location = '/path';

If you prefer to stick with ngRoute, you can refresh the page when there is a route change:

myApp.run(['$route', '$rootScope', function ($route, $rootScope) {
    return $rootScope.$on('$routeChangeStart', function (event, next, current) {
        $route.reload();
    });
}]);

Answer 2

Instead of using $location.path('/path');, you can utilize the window object to reload the page:

window.location = '/path';

If you prefer to stick with ngRoute, you can refresh the page when there is a route change:

myApp.run(['$route', '$rootScope', function ($route, $rootScope) {
    return $rootScope.$on('$routeChangeStart', function (event, next, current) {
        $route.reload();
    });
}]);

Answer 3

Answer №2

Why do you need to reload the page when the location changes during navigation? I believe there is no necessity for the reload() function on location change.

Instead of using $route.reload() as an on-the-fly function, the controller executes when navigating and checks for the on-the-fly function, then runs $route.reload(). This causes the route to reload, the controller to initialize again, and the on-the-fly function $route.reload() to execute once more, creating an endless loop of reloading.

If necessary, you can try using $route.reload within a function triggered by ng-click. Avoid using the reload() function as an on-the-fly function.

For example:

$scope.saveData = function(){
 //implement some save functionality and reload the route
$route.reload();
}

<button ng-click="saveData">Save</button>

Answer 4

Why do you need to reload the page when the location changes during navigation? I believe there is no necessity for the reload() function on location change.

Instead of using $route.reload() as an on-the-fly function, the controller executes when navigating and checks for the on-the-fly function, then runs $route.reload(). This causes the route to reload, the controller to initialize again, and the on-the-fly function $route.reload() to execute once more, creating an endless loop of reloading.

If necessary, you can try using $route.reload within a function triggered by ng-click. Avoid using the reload() function as an on-the-fly function.

For example:

$scope.saveData = function(){
 //implement some save functionality and reload the route
$route.reload();
}

<button ng-click="saveData">Save</button>

AngularJS traditional navigation rather than using $location.path

Answer №1

Answer №2

Similar questions

Navigate the orbit control camera in a circular motion around the target object

Ways to retrieve JSON information and incorporate it into an if statement in this specific scenario

What is the best way to create a smooth transition for a bootstrap navbar in chrome, toggling from right to left on

Employ a directive within a different directive

turning off next.js server side rendering in order to avoid potential window is undefined issues

Leveraging *ngFor to extract HTML content from ion-label

Show data from a Node.js server in its original format within an AngularJS application

AngularJS - Increase the input date by 6 hours before converting it to JSON

Using ng-repeat with ng-model; accessing the value of ng-model

Is there a way to delete a field from a JSON object using JavaScript?

What steps do I need to take in order to implement a functional pagination menu in Vue?

Manage the angularJS user interface switch through an external event

In React, the `context` is consistently an empty object

The customCellFormatter function does not seem to be triggering for the dash_tabulator object

Struggling to grasp the concept of PHP LZW decompression function within JSend framework

Utilizing JavaScript as the front-end client for a web application connected to the backend of

The hyperlinks in the navigation bar are leading me to incorrect destinations

Targeting lightgallery.js on dynamically added elements in Javascript: The solution to dynamically add elements to

Display a "Loading" image in the gallery before anything else loads

What causes an ajax request to submit "none" as the value of a dom element?