CODEWITHSUNDEEP
javascripthtmlangularjsngroute
Michal W
Michal W

Reputation: 330

AngularJS - Lost html after refreshing page

I came accross big problem with my simple angular app. After refreshing page, all html is lost!
My problem is not about angular data and/or session/local storage data but only HTML.
For example, when accessing home page via navbar "Home" button it looks like: enter image description here

After klicking refresh button or f5 "Home Page" inside h1 tag is lost: enter image description here

So the question is - What is wrong with my routing configuration or maybe this is expected behaviour for angular? I was looking a lot about this problem but most of the topics are about saving data in $localStorage or $sessionStorage. This problem occurs for all my pages.

EDIT Hi Guys, thanks for Your comments.

@devqon - I don't think that locationProvider is needed here. I am using routeProvider. I changed a little bit routing configuration : replaced '' with "" and put otherwise statement at the end of configuration:

<code>
app.config(function($routeProvider, $httpProvider) {
    $routeProvider.when("/", {
        templateUrl : "src/html/home.html",
        controller  : "HeaderCtrl"
    })
    .when("/home", {
        templateUrl : "src/html/home.html",
        controller  : "HomeCtrl"
    })
    .when("/flights", {
        templateUrl : "src/html/flights.html",
        controller  : "FlightCtrl"
    })
    .when("/customers", {
        templateUrl : "src/html/customers.html",
        controller  : "CustomerCtrl"
    })
    .when("/login", {
        templateUrl : "src/html/login.html",
        controller : "HeaderCtrl"
    })
    .when("/flight_choose", {
        templateUrl : "src/html/flight_choose.html",
        controller : "FlightChooseCtrl"
    }).otherwise("/home");

    $httpProvider.interceptors.push('airlinesRequestInterceptor');
});
</code>

As You can see I've created HomeCtrl which is very simple:

<code>
app.controller('HomeCtrl', function() {});
</code>

The home.html is on the first screnshot. @Gustavo Gabriel - could You be more specific? :) Aforementioned changes did NOT solve the problem :(

EDIT 2

@Kai - thank You for Your response. After Your advice I changed configuration and now it looks like: app.config(function($routeProvider, $httpProvider) { $routeProvider.when("/", { templateUrl : "src/html/home.html", controller : "HomeCtrl" }) .when("/flights", { templateUrl : "src/html/flights.html", controller : "FlightCtrl" }) .when("/customers", { templateUrl : "src/html/customers.html", controller : "CustomerCtrl" }) .when("/login", { templateUrl : "src/html/login.html", controller : "HeaderCtrl" }) .when("/flight_choose", { templateUrl : "src/html/flight_choose.html", controller : "FlightChooseCtrl" }).otherwise("/");

$httpProvider.interceptors.push('airlinesRequestInterceptor');

}); I've also changed navbar link for Home: enter image description here The problem still occurs, so maybe I misanderstood You. Any ideas?

Thanks in advance, Michal

Upvotes: 1

Views: 1026

Answers (2)

Michal W
Michal W

Reputation: 330

It looks like, I've created directives for attaching html partials, which didn't work well with routing and ng-view. As You have seen on my first post, my index.html body looked like:

<code>
<body>
    <div class="wrapper">
        <ng-header></ng-header>
        <ng-content></ng-content>
        <ng-footer></ng-footer>
    </div>
</body>
</code>

I just wanted to have my index.html as simple as possible. I've created html files for header, content, footer and directives for injecting them. For example, directive for content looked like:

<code>
app.directive('ngContent', function() {
  return {
    restrict: 'A',
    templateUrl: '/src/html/content.html'
  }
});
</code>

When I changed above directive to this one, problem with loosing html after refreshing page disappeared :

<code>
app.directive('ngContent', function() {
  return {
    template: '<div id="content">'+
    '<div ng-view></div>'+
    '</div>'
  };
});
</code>

After digging a little bit, I found there was an issue for angular team for that scenario and there is simple solutions for that: https://github.com/angular/angular.js/issues/6812

According to what @jswright and @saidimu wrote:

if ng-view instantiation is delayed (through ng-include) then the $route instantiation is delayed as well. This means that $route will miss the location change event.

Fix: Run $route update function on instantiation (not just on the location change event)

So in order to fix this issue You have to only inject $route into run function.

<code>
app.run(['$route', function($route)  {

}]);
</code>

I found interesting post about $route :

$route Must Be Injected In Order To Enable The $routeChangeSuccess Event In AngularJS

Once again, Thank You Guys for help.

Upvotes: 0

Kai
Kai

Reputation: 2599

Your inclusion of the HeaderCtrl in your Routes is causing problems, as you're specifying two controllers for the same /home path. Change the controller for .when ("/" to HomeCtrl, and just specify the HeaderCtrl in your HTML for the Header as an attribute, ng-controller="HeaderCtrl". I've made the same mistake before.

Upvotes: 1

Related Questions