React 与 Angular 2 与 Rails 的集成
介绍
设置示例 Rails 应用程序
因为本教程的重点是将 React 或 Angular 集成到 Rails 应用程序中，所以 Rails 应用程序本身将尽可能简单 - 它将包含一个操作，该操作将返回将使用 React 或 Angular 在页面上呈现的任意 JavaScript 对象表示法 (JSON)。打开终端或命令提示符并输入：
rails new sampleapp
这将搭建一个默认的 Rails 应用程序并安装使其运行所需的所有依赖项。转到应用程序的目录并找到 Gemfile。对于此应用程序，您只需要以下 gem：
#Gemfile.rb
gem 'rails'
gem 'sqlite3'
gem 'sprockets'
gem 'rack-cors'
bundle install
这将在 Gemfile 中安装 gem。要配置rack-cors，请将此代码片段添加到 Rails 应用程序的配置文件中：
#config/application.rb
module Starterapp
class Application < Rails::Application
#...
config.middleware.insert_before 0, 'Rack::Cors' do
allow do
origins '*'
resource '*', :headers => :any, :methods => [:get, :post, :options]
end
end
此配置将允许接受来自任何来源（\*表示任何地址）的所有类型的请求。对于开发，此设置是可以接受的。但是，对于生产，您需要将星号替换为客户端应用程序的 URL。
下一步是创建一个控制器和一个动作，它将返回 JSON 数据并为这些数据创建路由。为了简单起见并为了本教程，我们将动作放在应用程序控制器中：
#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
#...
def index
respond_to do |format|
format.json { render json: {some: 'data'} }
end
end
#...
end
当通过https://localhost:3000请求时，名为index的操作将使用{some: 'data'} JSON进行响应。让我们为该操作设置一条路线：
#config/routes.rb
Rails.application.routes.draw do
get '/api' => 'application#index', defaults: { format: :json }
end
集成 Angular 2
Angular 2 有两个特点 - 它是一个框架，这意味着它只提供一般功能，可以根据用户的需求进行修改，并且它使用TypeScript。 在与 Rails 应用程序集成时，这些特点有一定的要求：
因为 Angular 2 是一个框架而不是一个库，所以最好将它放在一个单独的目录中，所有文件都将驻留在该目录中。这意味着，Angular 2应用程序将驻留在 Rails 应用程序的公共目录中，而不是放入 Rails 资产管道 ( app/assets ) ，与 Rails 应用程序的编译和逻辑分开。这将使我们能够区分使用 Rails 和 Angular 2 应用程序及其依赖项的关注点。
Angular 2 使用 TypeScript，它是 JavaScript 的一个超集。截至目前，还没有办法将 TypeScript 实现到 Rails 的资产管道中，这意味着必须在 Rails 应用程序的根目录中配置一个转译器。JavaScript 中的转译器（transcompilers的简称）是读取代码（或 CoffeScript 或类似代码）并将其转译为可由浏览器解释的纯 JavaScript 的工具。
设置 Angular 2 环境
由于 TypeScript 的要求，需要在根目录中创建三个文件，以便为 Angular 2 应用程序设置环境。
- 包名.json
- 类型.json
- tsconfig.json
要安装这些必需品，您需要在计算机上安装Node 包管理器 (npm) 。让我们来看看每个文件：
包名.json
package.json文件包含将Angular 2 与 Rails 集成所需的所有包的列表：
{
"name": "rails-ng2",
"version": "0.0.1",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.15",
"systemjs": "0.19.26",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.10",
"intl": "^1.0.1"
},
"engines": {
"node": "5.3.0"
},
"devDependencies": {
"typescript": "^1.8.10",
"typings": "^0.7.12"
}
}
将内容粘贴到 Rails 应用程序根目录中的文件中，并将其命名为package.json。该文件包含typings，一个用于配置 TypeScript 行为的包，以及typescript包本身作为devDependencies（依赖项的依赖项）。显然，angular2也是添加 EcmaScript 6 功能的包之一，以及systemjs和es6-shim等库，这是 Node 5 所必需的。
类型.json
另外，在根目录中，创建一个名为typings.json的文件。此文件将用于在安装软件包后配置 TypeScript 的依赖项。您还可以通过在控制台中运行typings install来手动配置 TypeScript 依赖项。
{
"ambientDependencies": {
"es6-shim":
"github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine":
"github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
}
}
您需要在根目录中创建的最后一个文件是tsconfig.json：
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"rootDir": "public"
},
"exclude": ["node_modules", "typings/main", "typings/main.d.ts"]
}
该文件包含 Angular 2 应用程序中 TypeScript 行为的标准配置。需要特别注意的一点是rootDir属性，它定义了 Angular 2 应用程序将驻留在公共目录中。
将这三个文件添加到Rails应用程序的根目录后，在控制台中写入以下命令：
npm install
等待软件包安装完成。命令完成后，根目录中将有一个名为node_modules的额外目录，其中包含所有软件包的安装。
为了运行 typescript 的配置，请运行：
npm run tsc
配置几乎完成了，但有一个问题- node_modules目录不会加载到应用程序的资产中，因为它不在app/assets目录中。因此，必须在 Rails 应用程序的配置中明确添加该目录
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~