0

所以我目前正在使用 AngularAMD、Require.js 和 Angular-Route 在 angularJS 中使用 LazyLoading，并且在启用 html5Mode 时我一直遇到错误。当 html5Mode 关闭时，一切正常。但是，如果它打开，路由将在第一次更改并工作，但如果您刷新页面，它将给出 404 错误。

例如，如果我在 (html5ModeOn)：

http://localhost/Lazy_Loading/

它将显示正常的 H1 和两个链接。如果我单击链接转到第二页，它将更改 url，并更新页面。此时，如果我刷新，页面变为空白，控制台显示：

"NetworkError: 404 Not Found - http://localhost/Lazy_Loading/page2"

如果我关闭 html5Mod 并做同样的事情（显然只有 /#/ 在 url 中），一切正常。有任何想法吗？

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Lazy Loading</title>
    <base href="http://localhost/Lazy_Loading/" />
</head>
<body>
    <div ng-view></div>

    <script src="bower_components/requirejs/require.js" data-main="app/config.js"></script>
</body>
</html>

应用程序/config.js

require.config({
    baseUrl:'app',
    paths: {
        'angular': '../bower_components/angular/angular',
        'angular-route': '../bower_components/angular-route/angular-route',
        'angularAMD': '../bower_components/angularAMD/angularAMD'
    },
    shim: {
        'angular': {
            'exports': 'angular'
        },
        'angular-route': ['angular'],
        'angularAMD': ['angular']
    },
    priority: [
        'angular'
    ],
    deps: [
        'app'
    ]
});

应用程序/app.js

define(['angularAMD','angular-route'], function (angularAMD) {
    'use strict';

    var app = angular.module('webapp', ['ngRoute']);

    app.config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $routeProvider.when('/', angularAMD.route({
            templateUrl: 'app/home/home.html',
            controller: 'homeCtrl',
            controllerUrl: 'app/home/homeController.js'
        }))
        // .when('/:client', angularAMD.route({ // This also doesn't work for some reason
        //     templateUrl: 'app/home/home.html',
        //     controller: 'homeCtrl',
        //     controllerUrl: 'app/home/homeController.js',
        //     accessLevel: 0
        // }))
        .when('/page2', angularAMD.route({
            templateUrl: 'app/page2/page2.html',
            controller: 'page2Ctrl',
            controllerUrl: 'app/dashboard/page2Controller.js'
        }))
        .otherwise({redirectTo: "/"});
    }]);

    var appCtrl = app.controller('appCtrl', ['$rootScope','$location', function ($rootScope, $location) {

        $rootScope.$on("$routeChangeStart", function (event, next, current) {
        });

        $rootScope.$on("$routeChangeError", function (event, next, current, rejection) {
        })

        $rootScope.$on("$routeChangeSuccess", function (event, next, current, success) {
        })
    }]);



    angularAMD.bootstrap(app);

    return app;
});

应用程序/home/homeController.js

define(['app'], function (app) {
    app.register.controller('homeCtrl',['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
        console.log("Home Page");
    }]);
});

应用程序/page2/page2Controller.js

define(['app'], function (app) {
    app.register.controller('page2Ctrl',['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
        console.log("Home Page");
    }]);
});

应用程序/home/home.html

<h1>Home Page</h1>
<a href="page2">Page 2</a> <br />
<a href="#page2">#Page 2</a>
4

1 回答 1

1

如果刷新页面，浏览器会http://localhost/Lazy_Loading/page2从网络服务器请求 url。在网络服务器上，这个 url 显然不存在，因此 404 错误。

它在没有 html5 模式的情况下工作，因为您正在请求“索引”页面，这是您的应用程序，然后在加载后处理路由。

基本解决方案是修改您的网络服务器，以便http://localhost/Lazy_Loading在请求在服务器上找不到的页面时始终返回您的“索引”页面 ()。如果无法修改服务器，则需要禁用 html5 模式。

于 2014-08-19T15:02:03.200 回答