Rails javascript资产表现奇怪,具体取决于路由
dwj*_*ton 5 javascript ruby-on-rails asset-pipeline angularjs ruby-on-rails-4
我正在学习Rails,我想在我的项目中使用angular.
这是一个从头开始的简单应用程序.
1).创建一个新的rails应用程序:
rails new hello_rails
2).将angular gem添加到Gemfile
gem 'angularjs-rails'
3).安装捆绑包
bundle install
4).将角度添加到javascript清单中app/assets/javascripts/application.js
//=require angular
5).生成欢迎索引
rails generate controller welcome index
6).使用角度hello世界填充index.html.erb
<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).同时修改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).设置根路线welcome#index中config/routes.rb
root 'welcome#index'
运行这个 - 这很好.
这是我们得到的:
角度正在工作:
但是,如果我单击链接返回root_path它停止工作
另外,如果我们为我们application.html.erb的屈服角度停止工作添加一些角度.
<div ng-app="">
<p>Name : <input type="text" ng-model="home_name"></p>
<h1>Hello {{home_name}} at home</h1>
</div>
你能解释为什么rails正在这样工作吗？
我按照您的步骤并按照与您相同的方式配置了角度。我删除了涡轮链接，这解决了第一个问题。第二个问题是由于ngApp指令的错误使用造成的。
AngularJS ngApp 文档
ngApp 指令指定应用程序的根元素，通常放置在页面的根元素附近
和
每个 HTML 文档只能自动引导一个 AngularJS 应用程序。
就是这样说的。ng-app=""你的代码中有两次。由于只能引导一个应用程序，因此div您中的第一个包含角度代码的应用程序application.html.erb可以工作，但另一个应用程序index.html.erb则不能。
您的问题的解决方案已根据您的需要放在ng-app=""您的<body>或<html>您的标签中。application.html.erb（如果您希望 Angular 操作<head>页面等部分中的标签，<title>只需将其放置ng-app=""在您的<html>标签上。如果不是，只需将其放置在您的 body 标签上。
<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>
ngApp通过放置来操作页面标题<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>
...
奇迹般有效！
以下是有关将 Angular 与 Rails 结合使用以及使用 Angular 正确配置 Turbolink 的一些资源。
资源 1
资源 2
| 归档时间： |
|
| 查看次数： |
112 次 |
| 最近记录： |