Angular with Rails 101

第 1 步：建立一個新的 Rails 應用程式

gem install rails -v 4.1
rails new angular_example

第 2 步：刪除 Turbolinks

刪除 turbolinks 需要將其從 Gemfile 中刪除。

gem 'turbolinks'

從 app/assets/javascripts/application.js 中刪除 require：

//= require turbolinks

第 3 步：將 AngularJS 新增到資產管道

為了讓 Angular 能夠使用 Rails 資產管道，我們需要新增到 Gemfile：

gem 'angular-rails-templates'
gem 'bower-rails'

現在執行命令

bundle install

新增 bower 以便我們可以安裝 AngularJS 依賴項：

rails g bower_rails:initialize json

將 Angular 新增到 bower.json：

{
  "name": "bower-rails generated dependencies",
  
  "dependencies": {

    "angular": "latest",
    "angular-resource": "latest",
    "bourbon": "latest",
    "angular-bootstrap": "latest",
    "angular-ui-router": "latest"
  }
}

現在 bower.json 設定了正確的依賴項，讓我們安裝它們：

bundle exec rake bower:install

第 4 步：組織 Angular 應用程式

在 app/assets/javascript/angular-app/中建立以下資料夾結構：

templates/
modules/
filters/
directives/
models/
services/
controllers/

在 app/assets/javascripts/application.js 中，為 Angular 新增 require，模板助手和 Angular 應用程式檔案結構。像這樣：

//= require jquery
//= require jquery_ujs

//= require angular
//= require angular-rails-templates
//= require angular-app/app

//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers

第 5 步：引導 Angular 應用程式

建立 app/assets/javascripts/angular-app/app.js.coffee：

@app = angular.module('app', [ 'templates' ])

@app.config([ '$httpProvider', ($httpProvider)->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrftoken]').attr('content') ])  @app.run(->   console.log 'angular app running' )

在 app/assets/javascripts/angular-app/modules/example.js.coffee.erb 建立一個 Angular 模組：

@exampleApp = angular.module('app.exampleApp', [     # additional dependencies here   ])   .run(->     console.log 'exampleApp running'   )

在 app/assets/javascripts/angular-app/controllers/exampleCtrl.js.coffee 為這個應用程式建立一個 Angular 控制器：

angular.module('app.exampleApp').controller("ExampleCtrl", [   '$scope',   ($scope)->     console.log 'ExampleCtrl running'      $scope.exampleValue = "Hello angular and rails"  ])

現在新增一個到 Rails 的路由，將控制權傳遞給 Angular。Inconfig/routes.rb：

Rails.application.routes.draw do   get 'example' => 'example#index' end

生成 Rails 控制器以響應該路由：

rails g controller Example

在 app/controllers/example_controller.rb：

class ExampleController < ApplicationController
    def index
    end
end

在檢視中，我們需要指定哪個 Angular 應用程式和哪個 Angular 控制器將驅動此頁面。所以在 app/views/example/index.html.erb：

<div ng-app='app.exampleApp' ng-controller='ExampleCtrl'>
  
  <p>Value from ExampleCtrl:</p>
  <p>{{ exampleValue }}</p>
  
</div>

要檢視應用程式，請啟動 Rails 伺服器並訪問 http：// localhost：3000 / example 。