使用Rails实现AngularJS的引入和运行确认（入门级）

1 年 ago

清, 扬

2 minutes

引入AngularJS

AngularJS – 将从官方页面获取的AngularJS核心文件(angular.min.js)放置在vendor/assets/javascripts/路径下。

curl https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js > vendor/assets/javascripts/angular.min.js
curl https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js.map > vendor/assets/javascripts/angular.min.js.map

创建一个用于AngularJS配置文件的app.coffee。

# app/assets/javascripts/app.coffee


app = angular.module('sampleApp', [])

app.config ($httpProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] =
    document.getElementsByName("csrf-token")[0].content

$(document).on 'page:load', ->
  $('[ng-app]').each ->
    module = $(this).attr('ng-app')
    angular.bootstrap(this, [module])

为了使jquery和turbolinks一起工作，在代码中引入jquery-turbolinks插件。

# Gemfile
gem 'jquery-turbolinks'

将jquery.turbolinks、angular.min和app加入到application.js中。（这样Rails将会加载这些js文件。）

# app/assets/javascripts/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require angular.min
//= require app
//= require_tree .

在application.html.erb中添加ng-app指令。
（由于ng-app指令内部会通过AngularJS进行解析，所以在此可以使用AngularJS）

# app/views/layouts/application.html.erb
<!-- app.coffee の戦闘のangular.moduleで宣言した名前にする -->
<html ng-app="sampleApp">

...

如果Rails在生产环境下，编译资产会导致AngularJS无法运行。因此，在production.rb中添加config.assets.js_compressor = Uglifier.new(mangle: false)。

# config/developments/production.rb

# Compress JavaScripts and CSS.
# config.assets.js_compressor = :uglifier
config.assets.js_compressor = Uglifier.new(mangle: false)
# config.assets.css_compressor = :sass

确认动作 (Confirm action)

为了进行操作确认，需要创建一个控制器。

rails g controller Templates index --skip-assets

用中文本地化地转述如下：
以如下方式进行编写。在文本字段中使用ng-model定义name变量，并使用{{name}}进行数据绑定以动态显示。

# app/views/templates/index.html.erb
<h1>Templates#index</h1>

<div>
  <%= label_tag :naem, "名前" %>
  <%= text_field_tag :name, "", "ng-model" => "name" %>
</div>

<p>こんにちは、「{{name}}」さん。</p>

输入值到文本字段后，可以看到用{{}}括起来的部分会动态变化。如果没有正常工作，可以打开JavaScript控制台（在Chrome中），检查是否有错误发生。