2

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

使用 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>
4

1 回答 1

0

我不确定我的回答是否满足您的要求，但您需要的是transclusion。这是一个例子： Plnkr

于 2017-04-16T05:14:19.550 回答