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!

Can't seem to to get the code to display correctly on this question, so here is a link to stackoverflow => http://stackoverflow.com/questions/36962000/div-element-containing-ng-include-and-ng-controller-dissappears-after-pressing-b

Answer 1 · 2016-05-04T19:50:29Z

May 4, 2016 7:50pm

Ok, found the answer apparently rails turbolinks interfere with ui-router, so remove this line from application.js in javascript folder and it works!

//require turbolinks

Welcome to the Treehouse Community

Looking to learn something new?

medev21

medev21

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

1 Answer

medev21

medev21