2

If I use hashbang mode there's no problem and transition between routes will be smooth, however if I change the routing mode to Html5 mode transition between the routes won't be as smooth as hashbang mode and we see some sort of blinking in other parts of the page like header, panels, footer which is because of reloading the entire page.

With html5 mode, after changing the url the entire page will be reloaded even header and footer, how can I replace just the content and keep the other parts of the page intact?

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>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Hamid Behnam
  • 961
  • 1
  • 11
  • 16
  • 1
    In HTML5 mode, AngularJS intercepts all links and updates the url in a way that never performs a full page reload. For more information, see [AnguarJS Developer Guide - Using $location - HTML5 mode](https://docs.angularjs.org/guide/$location#html5-mode). – georgeawg Apr 16 '17 at 07:19

1 Answers1

0

I am not sure if my answer fulfill your requirements but what you need is transclusion. Here is an example for that: Plnkr

Aayushi Jain
  • 2,861
  • 2
  • 29
  • 36
  • 1
    How is this related? He asked about routing and you're answering about ngTransclude which is a directive related property. – OB Kenobi Apr 16 '17 at 07:52