如何：Angularjs 路由刷新

Question

我试图制作一个包含多个视图的应用程序作为模板。模板位于 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>

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

我在互联网上搜索 "how to refresh routing page in angularjs" 并找到了一些解决方案，但我无法让它们为我工作。我尝试了 $route.reload() 和 $routeUpdate() 方法，但这对我不起作用。也许我有什么地方错了。

Answer 1

当您 "reload a page" 时，您的整个应用程序将再次重新初始化。这意味着如果你不在主页上，而你的子路由丢失了一些数据，你可能会得到一个错误。

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

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

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

Answer 2

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

Answer 3

使用 html5 模式

关于它的一篇很棒的文章here

初始化非常简单

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

    // other routes here

    $locationProvider.html5Mode(true);

});

Answer 4

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

sudo a2enmod rewrite && sudo service apache2 restart

适合我

Answer 5

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

否则，它可以通过模块重写来管理，即在内部为 AngularJs 应用映射 url 和散列版本 URL。

Answer 6

已解决！我无法使用 ngRoute 管理刷新。然后我将它转换成 ui-router。我通过 url 声明状态。刷新正在工作。感谢您的评论和回答。也许这会对某人有所帮助。

如何：Angularjs 路由刷新

How to : Angularjs route refresh

angularjs

angularjs-routing

ngroute

使用 html5 模式