div element containing ng-include and ng-controller dissappears after pressing back button on the browser

Question

I have a simple app using Ruby on Rails in the back-end and AngularJS on the front end. On the application.html.erb file, I put a div element containing an ng-include and its controller, this grabs the nav.html file containing a fixed top nav bar; after that is the yield function like so:

<!DOCTYPE html>
<html>
<head>
  <title>RailsAngularAuthenticationProject</title>
  <base href="/">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="angular-auth-app">
  <div ng-include="'settingAngular/nav/nav.html'" ng-controller="NavCtrl"></div>
  <div class="" ng-controller="MainCtrl">
    <ui-view><%= yield %></ui-view>
  </div>

</body>
</html>

the homepage includes the following:

    <div class="panel panel-default">
  <div class="panel-heading">Sign in via email</div>
  <div class="panel-body">

    <label>user signed in?</label>
    <p>{{ user.signedIn ? "true" : "false" }}</p>
    <label>user email</label>
    <p>{{ user.email || "n/a" }}</p>

    <!-- sign out button -->
    <button class="btn btn-default" ng-click="signOut()" ng-if="user.signedIn">Sign out</button>

    <a ui-sref="posts.show">posts</a>

  </div>
</div>

When I click on the anchor tags "posts", this will take me to a different page, localhost:3000/posts. Everything is fine up to that point, but when I hit the back button to return to the homepage, the fix top nav bar is gone, the anchor tag becomes unresponsive and the placeholders no longer work.

I'm brand new to AngularJS, so don't know what's going on, I'm thinking it's something wrong with Angular app.js, maybe and not rails. Here is my app.js

angular.module('angular-auth-app', [
  'ui.router',
  'ui.bootstrap',
  'ngRoute',
  'ngResource',
  'templates',
  'ng-token-auth',
  'ngAnimate',
  'ngCookies',])
  .constant('baseUrl', 'http://localhost:3000')
  .config([
  'baseUrl',
  '$stateProvider',
  '$routeProvider',
  '$authProvider',
  '$locationProvider',
  '$urlRouterProvider',
  function(baseUrl, $stateProvider, $routeProvider, $authProvider, $locationProvider, $urlRouterProvider){
        $locationProvider.html5Mode(true); //this removes the # on the url, add the base to application

         $authProvider.configure({
           apiUrl: baseUrl + '/api',

          handleLoginResponse: function(response) {
            return response;
          },

          // handleAccountUpdateResponse: function(response) {
          //   return response;
          // },

          handleTokenValidationResponse: function(response) {
            return response;
          }
         });


        $stateProvider
        .state('home', {
          url: '/',
          controller: 'MainCtrl',
        })
        .state('posts',{
          templateUrl: 'settingAngular/posts/postLayout.html',
        })
        .state('posts.show',{
          url: '/posts',
          views: {
            postView: {
              templateUrl: 'settingAngular/posts/post.html',
              controller: 'PostCtrl'
            }
          }
        });

        $urlRouterProvider.otherwise('/');

       }]);

Trying to learn how to build an app using rails and AngularJs. Thanks in advance, your help will be much appreciated!

medev21 medev21 · Accepted Answer · 2016-05-01T18:33:02

Ok, I found a way to work around this issue if I set the following code for the $urlRouterProvider and $stateProvider like this:

$urlRouterProvider.otherwise('/home');

        $stateProvider
        .state('home', {
          url: '/home',
          controller: 'MainCtrl',
        })

I no longer lose the ng include navbar, controllers and placeholders; however my url will be from now on localhost:3000/home.

I still would like to set the homepage without /home. If remove 'home', then on the urlrouterprovider and state, then I go back to the same issue.

Solution:

Found the problem, Angular was just fine, it was rails turbolinks that was interfering w/ Agular ui router. So remove this line //require turbolinks from application js in javascript folder and it works like a charm.

Also I would like to point out when I added /home to the url - see code above - I went back to same issue before.

div element containing ng-include and ng-controller dissappears after pressing back button on the browser

1 Answers