Tạo project Rails + Angular bằng Webpacker
This post hasn't been updated for 7 years
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 :
- Sử dụng
yarn
tạo html-loader :
yarn add html-loader
- 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: [ /\)?\]?=/ ]
}
}]
}
- Thêm
.html
vàoconfig/webpacker.yml
extensions:
- .elm
- .coffee
- .html
- 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>
- 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
All Rights Reserved