Tạo project Rails + Angular bằng Webpacker

1. Giới thiệu

• Webpack là một công cụ hỗ trợ xây dựng JavaScript module trong các ứng dụng của bạn. Webpack đơn giản hóa các workflow bằng việc xây dựng một cách nhanh chóng một đồ thị tham chiếu (dependency graph) trong ứng dụng của bạn và sắp xếp nó một cách chính xác.
• Webpack có thể được cấu hình theo tùy chọn code của bạn và tách biệt thành cách vendor/js/css trên production. Chạy với server với mode development có thể xem có thể những thay đổi code của bạn của bạn một cách nhanh nhất và có rất nhiều đặc điểm thú vị.

Qua bài viết này tôi sẽ hướng dẫn các bạn sử dụng gem Webpacker để khởi tạo một project Rails và Angular.

2. Khởi tạo

Trước tiên bạn hãy tạo một project Rails sử dụng Webpack bằng cách :

rrails new myapp --webpack=angular

hoặc có thể add vào gemfile của bạn

# Gemfile
gem 'webpacker'

chạy bundler.

Sau đó chạy ./bin/rails webpacker:install:angular hoặc bundle exec rake webpacker:install:angular

Chú ý : sử dụng rake thay bằng rails nếu bạn sử dụng Rails phiên bản < 5.0.

Hệ thống sẽ báo bạn cần phải cài yarn nếu máy bạn chưa cài đặt. Bạn theo đường link bên dưới để cài đặt https://yarnpkg.com/en/docs/install

Và như vậy bạn đã có TypeScrip cũng như là Angular trong project ở folder app/javascript với tên app là hello_angular

Tiếp đó bạn cd vào thư mực app/javascript và chạy lệnh npm install để cài các node_module cần thiết.

Kết thúc việc khởi tạo

3. Add Angular vào Rails page

Sau khi đã có folder project Angular ở trong Rails, chúng ta sẽ tiếp tục tạo một page đơn giản bằng Angular chạy trên cổng 3000 của Rails. Để làm được vậy trước hết bạn tạo 1 trang Top Page trong Rails

app/controllers/top_page_controller.rb

class TopPageController < ApplicationController
  def index
  end
end

config/routes.rb
Rails.application.routes.draw do
  root "top_page#index"
end

Sau khi bạn đã có controller và khai báo route bạn mở file app/javascript/hello_angular/packs/hello_angular.js bạn sẽ thấy

// Run this Angular example by adding the following HTML markup to your view:
//
// <hello-angular>Loading...</hello-angular>
//
// <%= javascript_pack_tag 'hello_angular' %>

require('../hello_angular')

Như vậy muốn trang Top Page của bạn nhận được trang angular example bạn paste hay dòng khai báo vào và ta có view như bên dưới:

app/view/top_page/index.html
<hello-angular></hello-angular>
<%= javascript_pack_tag 'hello_angular' %>

3. Sử dụng HTML template với Typescript và Angular

Thông thường Angular sẽ sử dụng HTML template bằng cách tạo một file html và khai báo vào component như bên dưới :

@Component({
  selector: 'hello-angular',
  templateUrl: './template.html'
})

Nhưng trong trường hợp này bạn không thể khai báo như vậy vì Rails sẽ hiểu đó như một route.

Để sử dụng HTML template các bạn làm theo các bước sau đây :

1. Sử dụng yarn tạo html-loader :

yarn add html-loader

2. Thêm html-loader vào config/webpack/loader/html.js

module.exports = {
  test: /\.html$/,
  use: [{
    loader: 'html-loader',
    options: {
      minimize: true,
      removeAttributeQuotes: false,
      caseSensitive: true,
      customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
      customAttrAssign: [ /\)?\]?=/ ]
    }
  }]
}

3. Thêm .html vào config/webpacker.yml

extensions:
    - .elm
    - .coffee
    - .html

4. Thêm file html.d.ts

// app/javascript/hello_angular/html.d.ts

declare module "*.html" {
  const content: string
  export default content
}

5 . Tạo một file template cho app.component.ts

<h1>Hello {{name}}</h1>

6. Khai báo vào app.component.ts

import { Component } from '@angular/core'
import templateString from './template.html'

@Component({
  selector: 'hello-angular',
  template: templateString
})

export class AppComponent {
  name = 'Angular!'
}

4. Run

Sau khi đã hoàn thành hết các bước bên trên, giờ bạn hãy chạy server lên và tận hưởng thành quả

Trước hết mở một cửa sổ terminal và bật server rails

rails s

Mở của sổ thứ hay bật webpacket

./bin/webpack-dev-server

Giờ bạn mở trình duyệt lên và vào http://localhost:3000