node.js 如何使用 AngularJS 重新加载或重新渲染整个页面

How to reload or re-render the entire page using AngularJS

提问by andersonvom

After rendering the entire page based on several user contexts and having made several $httprequests, I want the user to be able to switch contexts and re-render everything again (resending all $httprequests, etc). If I just redirect the user somewhere else, things work properly:

在基于多个用户上下文渲染整个页面并发出多个$http请求后，我希望用户能够切换上下文并再次重新渲染所有内容（重新发送所有$http请求等）。如果我只是将用户重定向到其他地方，则一切正常：

$scope.on_impersonate_success = function(response) {
  //$window.location.reload(); // This cancels any current request
  $location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
  return auth.impersonate(username)
    .then($scope.on_impersonate_success, $scope.on_auth_failed);
};

If I use $window.location.reload(), then some of the $httprequests on auth.impersonate(username)that are waiting for a response get cancelled, so I can't use that. Also, the hack $location.path($location.path())doesn't work either (nothing happens).

如果我使用$window.location.reload()，那么一些等待响应的$http请求auth.impersonate(username)会被取消，所以我不能使用它。此外，hack$location.path($location.path())也不起作用（什么也没发生）。

Is there another way to re-render the page without manually issuing all requests again?

是否有另一种方法可以重新呈现页面而无需再次手动发出所有请求？

回答by andersonvom

For the record, to force angular to re-render the current page, you can use:

作为记录，要强制 angular 重新呈现当前页面，您可以使用：

$route.reload();

According to AngularJS documentation:

根据 AngularJS文档：

Causes $route service to reload the current route even if $location hasn't changed.

As a result of that, ngView creates new scope, reinstantiates the controller.

即使 $location 没有改变，也会导致 $route 服务重新加载当前路由。

结果，ngView 创建了新的作用域，重新实例化了控制器。

回答by danza

$route.reload()will reinitialise the controllers but not the services. If you want to reset the whole state of your application you can use:

$route.reload()将重新初始化控制器而不是服务。如果要重置应用程序的整个状态，可以使用：

$window.location.reload();

This is a standard DOM methodwhich you can access injecting the $windowservice.

这是一个标准的 DOM 方法，您可以访问注入$window服务。

If you want to be sure to reload the page from the server, for example when you are using Django or another web framework and you want a fresh server side render, pass trueas a parameter to reload, as explained in the docs. Since that requires interaction with the server, it will be slower so do it only if necessary

如果您想确保从服务器重新加载页面，例如，当您使用 Django 或其他 Web 框架并且想要全新的服务器端渲染时，请将true作为参数传递给reload，如文档中所述。由于这需要与服务器交互，所以速度会比较慢，所以只有在必要时才这样做

Angular 2

角 2

The above applies to Angular 1. I am not using Angular 2, looks like the services are different there, there is Router, Location, and the DOCUMENT. I did not test different behaviors there

上述适用于角1.我不使用角2，貌似服务不同有，有Router，Location和DOCUMENT。我没有在那里测试不同的行为

回答by Kumar Sambhav

For reloading the page for a given route path :-

为给定的路由路径重新加载页面：-

$location.path('/path1/path2');
$route.reload();

回答by Neha DP

If you are using angular ui-routerthis will be the best solution.

如果您使用的是angular ui-router，这将是最佳解决方案。

$scope.myLoadingFunction = function() {
    $state.reload();
};

回答by Mario Medrano Maldonado

Well maybe you forgot to add "$route" when declaring the dependencies of your Controller:

好吧，也许您在声明 Controller 的依赖项时忘记添加“$route”：

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);

回答by Vaibs

Just to reload everything , use window.location.reload(); with angularjs

只是要重新加载所有内容，请使用 window.location.reload(); 使用 angularjs

Check out working example

查看工作示例

HTML

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

angularJS

angularJS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.reloadPage = function(){window.location.reload();}
}

http://jsfiddle.net/HB7LU/22324/

http://jsfiddle.net/HB7LU/22324/

回答by Saurabh Sarathe

If you want to refresh the controller while refreshing any services you are using, you can use this solution:

如果要在刷新正在使用的任何服务的同时刷新控制器，可以使用以下解决方案：

• Inject $state

• 注入 $state

i.e.

IE

app.controller('myCtrl',['$scope','MyService','$state', function($scope,MyService,$state) {

    //At the point where you want to refresh the controller including MyServices

    $state.reload();

    //OR:

    $state.go($state.current, {}, {reload: true});
}

This will refresh the controller and the HTML as well you can call it Refresh or Re-Render.

这将刷新控制器和 HTML，您也可以将其称为Refresh 或 Re-Render。

回答by Thilina Sampath

Before Angular 2 ( AngularJs )

在 Angular 2 ( AngularJs ) 之前

Through route

通过路线

$route.reload();

If you want reload whole Application

如果你想重新加载整个应用程序

$window.location.reload();

Angular 2+

角 2+

import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

load() {
    this.location.reload()
}

Or

或者

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

回答by Yamen Ashraf

Try one of the following:

尝试以下方法之一：

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();

回答by diyoda_

Easiest solution I figured was,

我想到的最简单的解决方案是，

add '/' to the route that want to be reloaded every time when coming back.

每次回来都想重载的路由加上'/'。

eg:

例如：

instead of the following

而不是以下

$routeProvider
  .when('/About', {
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

use,

用，

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })