如何在不重新加载页面的情况下重新启动 Angular 应用程序？

Posted 2023-02-22

【中文标题】如何在不重新加载页面的情况下重新启动 Angular 应用程序？

【英文标题】：How to restart angular app without page reload?

【发布时间】：2014-07-21 08:15:02

【问题描述】：

我想在不强制刷新页面的情况下重置我的 Angular 应用程序的状态。这样做的惯用方法是什么？

【问题讨论】：

你试过***.com/questions/16703215/…吗？

您要重置什么状态？在我构建的一个应用程序中；我们为应用程序的每个屏幕/方面提供了一个重置​​方法，该方法将重置视图的状态。当用户退出时；我们将“重置”所有视图并加载登录屏幕。乏味，但实用。在我构建的另一个应用程序中；我们强制重新加载应用程序。容易得多；但没有那么优雅。

@JeffryHouser 我想重置所有状态。好像页面重新加载时一样。我了解重新加载路由会强制视图重新呈现，并创建相关控制器的新实例。我也有兴趣重置所有服务。

【参考方案1】：

我不知道是否有惯用的方式，但是如果您使用手动引导（即摆脱 ng-app），那么您可以重置

删除您引导 Angular 进入的元素 将其替换为元素的干净副本 再次运行引导程序

示例 html：

<div id="myid" ng-controller="MyCtrl">
  <button ng-click="i = i+1">Add 1</button>
  <span>i = i</span>
  <button ng-click="reset()">RESET</button>
</div>

示例控制器/JS（也包括 jQuery），将在 onload 上运行：

var $cleanCopy = $("#myid").clone();

function bootstrap() 
  angular.bootstrap(document.getElementById('myid'), ['mymodule']);


angular.module('mymodule', []).controller('MyCtrl', function($scope) 
  $scope.i = 1; 

  $scope.reset = function() 
    // You need this second clone or angular bootstraps
    // into the original clone!
    $("#myid").replaceWith($cleanCopy.clone());
    bootstrap();
  ;
);

bootstrap();

这是一个有效的 JSFiddle：http://jsfiddle.net/zd377/2/

【讨论】：

这不起作用，小提琴不再包含相同的代码。

我完成了所有 3 点，但收到一个错误，即元素已被引导。