尝试使用Angular8+Rails5来创建应用程序

3 年 ago
新, 韵
2 minutes

尝试将Angular和Rails结合起来使用

1_nmQ30kViITehpW9xALP2Rg.jpeg

由于我个人都喜欢这两个框架，所以如果这种结合的开发在世界上变得更加普遍，我会感到非常高兴。

Angular8和Rails5（*以下是文章的翻译）

我不知道你是怎么想的，但我喜欢Ruby on Rails，因为它易学、快速编写，并且是开源的。我也对引入了酷炫新渲染引擎Ivy的Angular的新版本Angular8的发布充满期待。

如果你和我一样对这两个框架感兴趣，但是对于如何入门这两个很棒的框架一点概念都没有的话，那么请务必阅读这个。

现在就开始试一试吧！

若要按照惯例将Javascript框架与Rails一起使用，就需要使用webpack。然而，Rails有一个称为webpacker的适用于此的宝石，可以运行Angular项目。然而，在最新版本（7系及以上）的Angular中，内部已经嵌入了webpack系统，这种项目结构问题将成为使用绝佳的AngularCLI的障碍。

我们需要做的是使用Rails应用作为一个具有控制器的API，接收Angular的输出文件并提供它们。

在开始之前，请安装以下内容。

    • node (8.9以上)

 

    • NPM (5.5.1以上)

 

    • Angular CLI

 

    • Rails 5+ (インストールにRVMまたはRbenvを使うことをおすすめします)

 

    Postgresql

创建一个Angular项目

在喜欢的目录位置打开终端，创建一个Rails/Angular项目。
ng new rails-angular-project
如果问你是否使用Angular routing，毫不犹豫地按下”YES”！（非常好用！）
然后请选择你喜欢的样式表格式。（我个人推荐使用SCSS）
完成以上步骤后，让我们跳转到刚刚创建的项目中。
cd rails-angular-project

1. 创建一个Rails项目

让我们在当前目录中创建一个Rails项目吧！
rails new . -database=postgresql
通过这个命令，会在Angular项目的内部开始创建Rails项目，但如果拒绝了所有的合并请求，就会发生冲突。
一旦Rails项目创建成功，就需要在.gitignore文件中添加一些文件。
请打开.gitignore文件，并复制粘贴以下内容。

# Ignore bundler config.
/.bundle

# Ignore all logfiles and tempfiles.
/log/*
/tmp/*
!/log/.keep
!/tmp/.keep

# Ignore uploaded files in development
/storage/*
!/storage/.keep

.byebug_history

# Ignore master key for decrypting credentials and more.
/config/master.key

# Ignore application configuration
/config/application.yml

将上述的两个合并为一体

目前，这个项目是一个与Angular项目结合的Rails应用程序，它使用Rails作为API提供，并且也享受了Angular框架的SPA的好处。但是首先必须允许Rails访问由Angular提供的文件。

通常情况下，在Angular应用程序中，我们使用`ng serve`来进行开发，但是这次我们将配置使用`ng build`，将输出到Rails的公共目录。

打开位于根目录下的 Angular.json 文件，将输出目录从 dist/rails-angular-app 改为 public。

...

"options": {
    "outputPath": "public",
...

下一步，在app/controllers文件夹中创建一个名为static_controller.rb的文件。

class StaticController < Rails::ApplicationController
    def index
        render file: Rails.root.join('public', 'index.html')
    end
end

static_controller负责通过Angular提供的index.html进行渲染。

请在routes.rb文件中加入以下代码。

Rails.application.routes.draw do
    get '*other', to: 'static#index'
end

通过这个方法，你可以让Rails捕获路由并重定向到static_controller。此外，上述代码还可以定义需要的所有API路由。但这些内容我们留到下次讨论！

使用Foreman使得更方便

通过引入Foreman，我们可以更容易地提供Web应用程序。

请通过将gem添加到foreman中进行安装。

...
# Use foreman
gem 'foreman'
...

使用bundle install命令安装新的gem。

安装 bundler

在根目录中新增一个名为 Procfile 的文件。这个文件的作用是让 foreman 可以读取并组合所有的命令。

web: rails s -p 3000
client: ng build --watch=true

你可以用这个命令启动foreman。

开启工头

预计会同时启动Rails应用程序和Angular应用程序。当访问localhost:3000时，将显示以下屏幕。

1_RCUJQELq4Gpw5AYRc7wUCQ.png

太好了！现在你可以自由地开发Web应用并且使用简单而强大的框架提供API，同时还可以利用Angular CLI的能力。

5.最后

这次，我们制作了一个应用程序，它将Rails 5作为后端和Angular 8作为前端，它们存在于同一个目录中，并且充分发挥了它们各自的优势。希望这个教程对你有所帮助。

请参阅相关报道

Angular 8+ 与 Rails 5+ – Sam Green

✖
广告
将在 10 秒后关闭
bannerAds