Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

medev21
medev21
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

     $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

1 Answer

medev21
medev21
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