0

そのため、AngularAMD、Require.js、および Angular-Route を使用して angularJS で LazyLoading を使用することを現在いじっています。html5Mode が有効になっているとエラーが発生し続けます。html5Mode がオフの場合、すべて正常に動作します。ただし、オンの場合、最初はルートが変更されて機能しますが、ページを更新すると 404 エラーが発生します。

たとえば、(html5ModeOn) にいる場合:

http://localhost/Lazy_Loading/

通常の H1 と 2 つのリンクが表示されます。リンクをクリックして 2 ページに移動すると、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>

app/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/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");
    }]);
});

app/page2/page2Controller.js

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

アプリ/ホーム/ホーム.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/page2Web サーバーから URL を要求します。Web サーバーでは、この URL は明らかに存在しないため、404 エラーが発生します。

アプリケーションである「インデックス」ページをリクエストしているため、html5モードなしで動作しています。これは、ロード後にルートを処理します。

http://localhost/Lazy_Loading基本的な解決策は、サーバー上で見つからないページを要求したときに常に「インデックス」ページ ( ) を返すように、Web サーバーを変更することです。サーバーを変更できない場合は、html5 モードを無効にする必要があります。

于 2014-08-19T15:02:03.200 に答える