Rails javascript assets behaving oddly depending on routing

Question

I'm currently learning Rails, and I'm wanting to use angular in my project.

Here's a simple application from scratch.

1). Create a new rails app:

rails new hello_rails

2). Add angular gem to Gemfile

gem 'angularjs-rails'

3). Install the bundle

bundle install

4). Add angular to javascript manifest in app/assets/javascripts/application.js

//=require angular

5). Generate welcome index

rails generate controller welcome index

6). Populate index.html.erb with an angular hello world

 <div style = "background-color: grey">
    this is index.html.erb<br>

  <div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>

</div>

7). Also modify application.html.erb

<pre>
<!DOCTYPE html>
<html>
<head>
  <title>HelloRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body style = "background-color:green">

  This is application.html.erb <br>

   <%= link_to "click here to go home", root_path %> <br>

A yeild statement is below: <br>
<%= yield %>

</body>
</html>

8). Set root route to welcome#index in config/routes.rb

root 'welcome#index'

Run this - this works fine.

Here's what we get:

The angular is working:

However, if I click the link to return to root_path it stops working

Additionally, if we add some angular to our application.html.erb the yielded angular stops working.

<div ng-app="">
<p>Name : <input type="text" ng-model="home_name"></p>
<h1>Hello {{home_name}} at home</h1>
</div>

Can you explain why rails is working this way?

I don't think turbolinks and angular are meant to be used together and will most likely not play nice. Remove turbolinks from your Gemfile and `//= require turbolinks` from your `application.js`. — max, Nov 28 '15 at 11:52
@max - Thanks, that solves the first issue (where it stops working if you click the link to return home), but you still have the issue where the yeilded angular isn't working if theres some the application.html.erb — dwjohnston, Nov 28 '15 at 23:22
@max is it something to do with multiple declartions of angular apps? — dwjohnston, Nov 28 '15 at 23:34
ways to use **with** turbolinks: http://stackoverflow.com/questions/14797935/using-angularjs-with-turbolinks — mico, Nov 29 '15 at 12:28
@max - Hey max - I think you deserve the bounty. I suggest posting an answer - and I'll award you the bounty. I can edit it as needed. — dwjohnston, Dec 01 '15 at 23:45

Oss · Accepted Answer · 2015-11-30T01:35:33.520

I followed your steps and configured angular the same way you did. I removed turbolinks and this solved the first problem. The second problem was due to wrong usage of the ngApp directive.

AngularJS ngApp documentation

The ngApp directive designates the root element of the application and is typically placed near the root element of the page

and

Only one AngularJS application can be auto-bootstrapped per HTML document.

That said. You have ng-app="" twice in your code. And since one application only can be bootstrapped, the first div containing angular code in your application.html.erb would work but the other in index.html.erb would not.

The solution to your problem is place ng-app="" on your <body> or <html> tags in your application.html.erb according to your needs. (If you want angular to manipulate tags in the <head> section like page <title> for example just place ng-app="" on your <html> tag. If not just place it on your body tag.

<pre>
<!DOCTYPE html>
<html>
<head>
  <title>HelloRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body style = "background-color:green" ng-app="">

  This is application.html.erb <br>
  <div>
    <p>Name : <input type="text" ng-model="home_name"></p>
    <h1>Hello {{home_name}} at home</h1>
  </div>

   <%= link_to "click here to go home", root_path %> <br>


A yeild statement is below: <br>
<%= yield %>

</body>
</html>

Manipulating page title by placing ngApp in <html>

<html  ng-app="">
<head>
  <title>{{home_name}} | HelloRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
...

Works like a charm!

Here are some resources for using Angular with Rails and correctly configure turbolinks with Angular. Resource 1
Resource 2

Rails javascript assets behaving oddly depending on routing

1 Answers1