AngularJS NG-Route,如何避免在HTML5模式下重新加载整个页面



如果我使用HashBang模式,则没有问题,路由之间的过渡将是平稳的,但是,如果我将路由模式更改为html5模式过渡,则路由之间的过渡将不会像哈希邦模式那样光滑我们看到页面其他部分的某种眨眼,例如标题,面板,页脚,这是因为重新加载了整个页面。

使用HTML5模式,更改URL后,整个页面都将重新加载,即使是标头和页脚,我如何仅替换内容并保持页面的其他部分完整?

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>

我不确定我的答案是否满足您的要求,但是您需要的是transclusion。这是一个例子:plnkr

最新更新