Currently delving into the world of Rails while also incorporating Angular into my project.
Let's build a basic application from scratch.
1). Start off by creating a new Rails app:
rails new hello_rails
2). Include the angular gem in your Gemfile
gem 'angularjs-rails'
3). Install the bundle
bundle install
4). Add angular to the JavaScript manifest located in
app/assets/javascripts/application.js//=require angular
5). Generate the welcome index
rails generate controller welcome index
6). Fill index.html.erb with a simple Angular "hello world" example
<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). Make modifications to application.html.erb as well
<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 the root route to welcome#index in config/routes.rb
root 'welcome#index'
Once you have completed these steps, run the application - it should work without any issues.
Upon completion, you should see something like this:
https://i.sstatic.net/OMJBS.png
The Angular integration should be functional as shown:
https://i.sstatic.net/Djlh3.png
However, if you click on the link to return to root_path, the functionality may cease.
https://i.sstatic.net/1Wi0D.png
Moreover, adding some Angular code to the application.html.erb might disrupt the existing Angular functionality.
<div ng-app="">
<p>Name : <input type="text" ng-model="home_name"></p>
<h1>Hello {{home_name}} at home</h1>
</div>
https://i.sstatic.net/9y2QT.png
Can you explain why Rails behaves in this manner?