Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


18,291 Points

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

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

       apiUrl: baseUrl + '/api',

      handleLoginResponse: function(response) {
        return response;

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

      handleTokenValidationResponse: function(response) {
        return response;

    .state('home', {
      url: '/',
      controller: 'MainCtrl',
      templateUrl: 'settingAngular/posts/postLayout.html',
      url: '/posts',
      views: {
        postView: {
          templateUrl: 'settingAngular/posts/post.html',
          controller: 'PostCtrl'



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

1 Answer

18,291 Points

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