【问题标题】：How to : Angularjs route refresh如何：Angularjs 路由刷新
【发布时间】：2016-07-17 01:15:07
【问题描述】：

我试图制作一个包含多个视图作为模板的应用程序。模板位于js/app/pages/ 文件夹下。我有 2 个模板要显示和路由。我的路由部分是：

var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
    .when('/Page', {
        templateUrl: 'js/app/pages/Page.html',
        controller: 'pageController',
        reloadOnSearch: false
    })
    .when('/Settings', {
        templateUrl: 'js/app/pages/Settings.html',
        controller: 'settingsController',
        reloadOnSearch: false
    })
    .when('/Admin', {
        templateUrl: 'js/app/pages/Admin.html',
        controller: 'adminController',
        reloadOnSearch: false
    })
    .otherwise({
        redirectTo: '/Page'
    });

    $locationProvider.html5Mode(true);
});

我的 html 文件包含

<div id="menu"></div>
<div ng-view></div>

Menu div 包含在页面之间引导我的菜单元素。例如，当我在浏览器上运行此站点时，URL 将是 localhost/Page，当我单击设置按钮时，URL 将更改为 localhost/Settings。但是当我按下键盘上的 F5 按钮时。页面给了我错误The resource cannot be found.。

我在互联网上搜索“如何在 angularjs 中刷新路由页面”并找到了一些解决方案，但我无法让它们为我工作。我尝试了$route.reload() 和$routeUpdate() 方法，但这对我不起作用。也许我做错了什么。

【问题讨论】：

标签： angularjs angularjs-routing ngroute

【解决方案1】：

如果您使用的是 Apache 服务器，这应该可以在终端中运行

sudo a2enmod rewrite && sudo service apache2 restart

为我工作

【讨论】：

不，我正在使用 iis。不是apache服务器。谢谢

【解决方案2】：

解决了！我无法使用 ngRoute 管理刷新。然后我把它转换成ui-router。我通过网址声明状态。并且刷新正在工作。感谢 cmets 和答案。也许这会对某人有所帮助。

【讨论】：

【解决方案3】：

实际上，当您从键盘按 F5 时，它会针对该页面访问您的服务器，而不是有角度的，因为您的 URL 之间没有任何 # 符号。对于 Angular，URL 应该像 - localhost/#/Page

【讨论】：

我不明白“#”号的意思。你能补充一些细节吗？

【解决方案4】：

使用html5模式

一篇关于它的好文章here

初始化很简单

.config(function($routeProvider, $locationProvider) {

    // other routes here

    $locationProvider.html5Mode(true);

});

【讨论】：

哦，你已经在使用它了，这篇文章还是不错的。祝你好运

【解决方案5】：

当您“重新加载页面”时，您的整个应用程序将再次重新启动。这意味着，如果您不在主页上，并且您所在的子路线缺少一些数据，您可能会收到错误消息。

您应该查看路由的解析属性，例如，

.when('/Settings', {
        templateUrl: 'js/app/pages/Settings.html',
        controller: 'settingsController',
        reloadOnSearch: false,
        resolve: {
            resourceone: function(){return whatsneeedtoberesolvehere;}
        }
    })

这样，无论您的应用在何处重新加载，它都将拥有启动页面所需的数据

【讨论】：

这里需要什么？这是一个解决我所在的网址的功能吗？或不？你能补充一些细节吗？
您应该解决您在此处遇到错误的任何资源，如上面的资源一。然后你可以将它注入任何控制器并在页面中随意使用它。

【解决方案6】：

只需在 URL 中保留 #，您就不必花费额外的精力来管理重新加载等。您可以认为 URL 中的“#”代表单页应用程序中的特定状态。

否则它可以通过模块重写来管理，它将 url 映射到 AngularJs 应用程序内部的散列版本 URL。

【讨论】：

您的意思是 'localhost/#/Page' 或 'localhost/#/Settings' 之类的 url。是这样吗？