AngularJS是现在非常流行的一个强大的前端web框架,非常适合用来创建Single Page Application(SPA)。作为一名ruby developer,我比较关心的就是:如何才能在一个 Rails 项目里使用 AngularJS 作为前端框架,既能使用 AngularJS 在前端开发的强大功能,又能享受 Rails 中各种好用的特性和插件呢?
创建Rails app
我们先来创建一个 Rails app,名字就叫 angularjs-rails 吧:
rails new angularjs-rails
我用的 ruby 版本是:2.2.0, Rails 版本是:4.2.0
添加AngularJS
然后我们需要把 AngularJS 加入到我们的 angularjs-rails 中,这里说两个方法:
1.直接到https://angularjs.org/下载AngularJS的JS文件,放到 app/assets/javascripts,下面,然后在 app/assets/application.js 里面引用该文件
//require angularjs
2.使用 rails-assets 在你的 Gemfile 里面加入下面的代码:
source 'https://rails-assets.org' do
gem 'rails-assets-angular'
end
同样需要在 app/assets/application.js 加入 //require angularjs
移除turbolinks
然后我们需要移除turbolinks,因为angularJS可以完全取代turbolinks的功能:
1.Gemfile 中注释掉 gem 'turbolinks' 这一行
2.application.js 删除 //require turbolinks 这一行
3.app/views/layouts/application.html.erb 里面
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
这两行要改成
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>