使用html5mode

Question

我尝试将包含多个视图的应用程序作为模板。模板位于<script type="text/javascript"> $( "#dropdown" ).select2().select2('val',<%= @group.collect(&:members) %>) </script>文件夹下。我有2个模板来显示和路由。我的路由部分是：

js/app/pages/

我的html文件包含

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);
});

菜单div包含在页面之间路由我的菜单元素。例如，当我在浏览器上运行此站点时，URL将是localhost / Page，当我单击设置按钮时URL更改为localhost / Settings。但是当我按下键盘上的 F5 按钮时。页面给出了错误<div id="menu"></div> <div ng-view></div>。

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

Answer 1

如果您正在使用Apache服务器，那么应该在终端

中运行它

sudo a2enmod rewrite && sudo service apache2 restart

适合我

Answer 2

当您重新加载页面时，整个应用程序将重新启动。这意味着如果您不在主页面上，并且子路径中缺少某些数据，则可能会出错。

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

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

无论你的app重新加载在哪里，它都会有必要的数据来启动页面

Answer 3

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

类似

Answer 4

使用html5mode

关于它的精彩文章here

初始化非常简单

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

    // other routes here

    $locationProvider.html5Mode(true);

});

Answer 5

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

否则可以通过模块重写来管理，它会在内部为AngularJs应用程序映射带有散列版本URL的URL。

Answer 6

解决！我无法使用ngRoute管理刷新。然后我将其转换为ui-router。我通过网址声明各州。刷新工作正常。感谢您的评论和解答。也许这会对某人有所帮助。

如何：Angularjs路由刷新

6 个答案:

使用html5mode