[Rails 4.1] 尝试使用Bower来安装和管理Angular.js相关文件

1 年 ago

宇, 华

3 minutes

您好，以下是我的简要说明。

这次我们将尝试只使用Bower来处理Angular。

环境

流浪汉 + CentOS 6.5
Rails 4.1.8
Ruby 2.1.5

安装Bower

使用npm安装bower

$ npm install bower

使用 Bundler 在 bower-rails gem 中进行安装

・
・
# javascripts↲
gem 'bower-rails', '~> 0.9.1'
gem 'jquery-rails'
・
・

所以，执行bundle install。

花坛

确认命令

$ rake -T bower
----

rake bower:cache:clean                   # Clear the bower cache ('bower cache clean')
rake bower:clean                         # Attempt to keep only files listed in 'main' of each component's bower.json
rake bower:install[options]              # Install components from bower
rake bower:install:deployment[options]   # Install components from bower using previously generated bower.json
rake bower:install:development[options]  # Install both dependencies and devDependencies from bower
rake bower:install:production[options]   # Install only dependencies, excluding devDependencies from bower
rake bower:list                          # List bower components
rake bower:resolve                       # Resolve assets paths in bower components
rake bower:update[options]               # Update bower components
rake bower:update:prune[options]         # Update existing components and uninstalls extraneous components

创建Bowerfile文件

在项目根目录创建Bowerfile。

我們會提供Angular等相關資訊。

$ vi Bowerfile
----
asset 'angular'
asset 'bootstrap-sass-official'
# vim: ft=ruby

通过Bower进行安装

$ rake bower:install
----


bower.js files generated
/home/hoge/project/node_modules/.bin/bower install -p
[?] May bower anonymously report usage statistics to improve the tool over time? Yes
bower angular#*             not-cached git://github.com/angular/bower-angular.git#*
bower angular#*                resolve git://github.com/angular/bower-angular.git#*
bower bootstrap-sass-official#*       not-cached git://github.com/twbs/bootstrap-sass.git#*
bower bootstrap-sass-official#*          resolve git://github.com/twbs/bootstrap-sass.git#*
bower bootstrap-sass-official#*         download https://github.com/twbs/bootstrap-sass/archive/v3.3.1.tar.gz
bower angular#*                         download https://github.com/angular/bower-angular/archive/v1.3.4.tar.gz
bower bootstrap-sass-official#*          extract archive.tar.gz
bower bootstrap-sass-official#*         resolved git://github.com/twbs/bootstrap-sass.git#3.3.1
bower angular#*                          extract archive.tar.gz
bower angular#*                         resolved git://github.com/angular/bower-angular.git#1.3.4
bower jquery#>= 1.9.0                 not-cached git://github.com/jquery/jquery.git#>= 1.9.0
bower jquery#>= 1.9.0                    resolve git://github.com/jquery/jquery.git#>= 1.9.0
bower jquery#>= 1.9.0                   download https://github.com/jquery/jquery/archive/2.1.1.tar.gz
bower jquery#>= 1.9.0                    extract archive.tar.gz
bower jquery#>= 1.9.0                   resolved git://github.com/jquery/jquery.git#2.1.1
bower bootstrap-sass-official#*          install bootstrap-sass-official#3.3.1
bower angular#*                          install angular#1.3.4
bower jquery#>= 1.9.0                    install jquery#2.1.1

bootstrap-sass-official#3.3.1 bower_components/bootstrap-sass-official
└── jquery#2.1.1

angular#1.3.4 bower_components/angular

jquery#2.1.1 bower_components/jquery

首先，通过使用Bower进行安装完成，接下来我们要设置Rails，以便能够使用刚下载的内容。

一旦进行git提交

$ git add vendor/assets
$ git commit -m 'angular and bootstrap'

Rails 的配置

我将在从Bower下载的文件上设置路径。

config/application.rb的中文本地化重述如下：

module CheckersNote
  class Application < Rails::Application
　　　・
　　　・
    # config.i18n.default_locale = :de
　　　・

    # 以下を追加
    # files managed by bower
    config.assets.paths << Rails.root.join("vendor","assets","bower_components")
    config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts")
    config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)
　　# ここまで
　　・
　　・

应用程序/资产/JavaScript/应用程序.js

turbolinksを消して、angular/angularを追記。

//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require_tree .

应用/assets/stylesheets/application.css.scss

@importの行を追記

　　・
　　・
  *
  *= require_self
  *= require_tree .
  */
　　・
　　・
@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";

这样Rails的设置也完成了。

写一个Angular的示例

config/routes.rb 的配置文件

get 'welcome' => 'welcome#index'
root 'welcome#index'

控制器

$ rails g controller welcome index

class WelcomeController < ApplicationController
  def index
  end
end

观看

<div class="container-fluid" ng-app="receta">
  <div class="panel panel-success">
    <div class="panel-heading">
      <h1 ng-if="name">Hello, {{name}}</h1>
    </div>
    <div class="panel-body">
      <form class="form-inline">
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Enter your name" autofocus ng-model="name">
        </div>
      </form>
    </div>
  </div>
</div>

应用程序资产下的JavaScript文件app.coffee。

receta = angular.module('receta',[
])

完成的东西 (Achieved thing)

参考文献

by David Bryant Copeland