Question

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

例如，如果我在（html5ModeOn）：

http://localhost/Lazy_Loading/

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

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

如果我关闭html5Mod，并做同样的事情，（显然只有/＃/在网址中），一切正常。有什么想法吗？

的index.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;
});

应用/家/ homeController.js

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

应用/第2页/ page2Controller.js

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

应用/家/ home.html做为

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

Answer 1

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

它没有html5模式，因为您正在请求＆＃34;索引＆＃34;页面，这是您的应用程序，然后在加载后处理路由。

基本解决方案是修改您的网络服务器，始终返回您的＆＃34;索引＆＃34;页面（http://localhost/Lazy_Loading）请求在服务器上找不到的页面。如果您无法修改服务器，则需要禁用html5模式。

Angular Js Lazy loading和html5mode

1 个答案: