All geek questions in one place

Rails javascript assets behave strangely depending on routing

I am currently learning Rails, and I want to use angular in my project.

Here's a simple application from scratch.

1). Create a new rails application:

rails new hello_rails

2). Add angular gem to gemfile

 gem 'angularjs-rails'

3). Install package

 bundle install

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

 //=require angular

5). Create Welcome Index

 rails generate controller welcome index

6). Fill out index.html.erb 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 change 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>

eight). Set the root of the route to welcome#index in config/routes.rb

 root 'welcome#index'

Run this - it works great.

Here we get:

enter image description here

Angular works:

enter image description here

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

enter image description here

In addition, if we add angular to our application.html.erb , then the resulting angular will stop working.

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

enter image description here

Can you explain why the rails work this way?

+5
source share
1 answer

I followed your steps and configured angular just like you did. I removed the turboprops and this solved the first problem. The second problem is the misuse of the ngApp directive.

AngularJS ngApp documentation

The ngApp directive denotes the root element of an application and is usually located next to the root element of a page

and

Only one AngularJS application can be automatically loaded per HTML document.

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

The solution to your problem is to place ng-app="" in the <body> or <html> tags in your application.html.erb according to your needs. (If you want angular to manipulate the tags in the <head> section, for example, the <title> page, for example, just place ng-app="" on the <html> . If you don't just put it in 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>

Manipulate 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> ...

It works like a charm!

After adding ngApp to body tag

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

+3
source

Source: https://habr.com/ru/post/1235970/

More articles:


All Articles