Question

如果我使用hashbang模式没有问题，并且路由之间的转换将是平滑的，但是如果我将路由模式更改为Html5模式，则路由之间的转换不会像hashbang模式那样顺畅而且我们在页面的其他部分看到某种闪烁，例如标题，面板，页脚，这是因为重新加载了整个页面。

使用html5模式，更改网址后，整个页面将重新加载甚至页眉和页脚，如何才能更换内容并保持页面的其他部分完整？

angular.module("theApp", ["ngRoute"]);
    angular.module("theApp").controller("MainController", [MainController]);

    function MainController() {
        var vm = this;
        vm.headerContent = "Header Section";
    }

    angular.module("theApp").controller("FirstController", [FirstController]);

    function FirstController() {
        var vm = this;
        vm.testField = "this is first controller";
    }

    angular.module("theApp").controller("SecondController", [SecondController]);

    function SecondController() {
        var vm = this;
        vm.testField = "this is second controller";
    }

    angular.module("theApp").config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
        $routeProvider.when("/first", {
            templateUrl: "../../static/web/first.html",
            controller: "FirstController"
        }).when("/second", {
            templateUrl: "../../static/web/second.html",
            controller: "SecondController"
        });

        $locationProvider.html5Mode(true);
    }]);

    <html lang="en" ng-app="theApp">
    <head>
        <meta charset="UTF-8">
        <title>Django 103</title>
        <base href="/user/">
    </head>
    <body ng-controller="MainController as MyMainCtrl">
    <div class="header">
        <h2 ng-bind="MyMainCtrl.headerContent"></h2>
    </div>
    <div ng-view></div>
    </body>
    </html>

Answer 1

我不确定我的答案是否符合您的要求，但您需要的是transclusion。以下是一个示例：Plnkr

Angularjs ng-route，如何避免在html5模式下重新加载整个页面？

1 个答案: