Angularjs ng-route, как избежать перезагрузки всей страницы в режиме html5?

Если я использую режим 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>

angularjs routing ngroute angularjs-ng-route html5mode
person Hamid Behnam    schedule 16.04.2017    source источник
comment
В режиме HTML5 AngularJS перехватывает все ссылки и обновляет URL таким образом, что никогда не выполняется полная перезагрузка страницы. Для получения дополнительной информации см. Руководство разработчика AnguarJS — Использование $location — режим HTML5 .   -  person georgeawg    schedule 16.04.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, соответствует ли мой ответ вашим требованиям, но вам нужно transclusion. Вот пример: Plnkr

person Aayushi Jain    schedule 16.04.2017
comment
Как это связано? Он спросил о маршрутизации, а вы отвечаете о ngTransclude, который является свойством, связанным с директивой. - person OB Kenobi; 16.04.2017