Sử dụng Angular 2 trong ứng dụng Rails.

Angular 2 là một Framework mã nguồn mở nên hoàn toàn miễn phí và được xây dựng dành cho các nhà phát triển các ứng dụng web hiện nay. Trong bài viết này mình xin giới thiệu một cách sử dụng Angular 2 trong ứng dụng Ruby on Rails của bạn.

Cấu hình ứng dụng

Sau đây mình đưa ra các bước cài đặt để sử dụng được Angular 2 trong Rails. 1. Khởi tạo 1 ứng dụng rails:

rails new rails-angular2

2. Tạo file package.json trong thư mục gốc với nội dung sau:

{
  "name": "rails-angular-2",
  "version": "1.0.0",
  "scripts": {
  "start": "tsc && concurrently "npm run tsc:w"",
  "lite": "lite-server",
  "postinstall": "typings install",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.6",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.17",
    "angular2-in-memory-web-api": "0.0.18",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^1.8.10",
    "typings":"^1.3.2"
  }
}

3. Tạo file tsconfig.json trong thư mục gốc của ứng dụng với nội dung:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "public"
  }
}

4. Tạo file typings.json trong thư mục gốc của ứng dụng với nội dung:

{
	"globalDependencies": {
		"core-js": "registry:dt/core-js#0.0.0+20160725163759",
		"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
		"node": "registry:dt/node#6.0.0+20160831021119"
	}
}

5. Tạo file public/systemjs.config.js với nội dung: File systemjs.config.js là tập tin cấu hình SystemJS của bạn, nó cho trình duyệt biết cách thiết lập và khởi động môi trường mà ứng dụng Angular 2 yêu cầu.

// systemjs.config.js
(function (global) {
	System.config({
		paths: {
			// paths serve as alias
			'npm:': 'node_modules/'
		},
		// map tells the System loader where to look for things
		map: {
			// our app is within the ng-app folder, but compiled to the public folder
			app: 'public',
			// angular bundles
			'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
			'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
			'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
			'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
			'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
			'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
			'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
			'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
			// other libraries
			'rxjs':  'npm:rxjs',
			'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
		},
		// packages tells the System loader how to load when no filename and/or no extension
		packages: {
			app: {
				main: './main.js',
				defaultExtension: 'js'
			},
			rxjs: {
				defaultExtension: 'js'
			},
			'angular2-in-memory-web-api': {
				main: './index.js',
				defaultExtension: 'js'
			}
		}
	});
})(this);

6. Thêm dòng sau vào file config/application.rb

config.assets.paths << Rails.root.join('node_modules')

7. Thêm vào file app/assets/javascripts/application.js

//= require "core-js/client/shim.min"
//= require "zone.js/dist/zone"
//= require "reflect-metadata/Reflect"
//= require "rxjs/bundles/Rx.umd"
//= require "@angular/core/bundles/core.umd"
//= require "@angular/common/bundles/common.umd"
//= require "@angular/compiler/bundles/compiler.umd"
//= require "@angular/platform-browser/bundles/platform-browser.umd"
//= require "@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd"
//= require "systemjs/dist/system.src"

8. Chạy lệnh sau từ thư mục gốc của ứng dụng

npm install

Điều này để Node Package Manager cài đặt các gói của Angular 2. Chúng sẽ được để trong thư mục node_modules và chúng ta đã cấu hình Ruby on rails để sử dụng các gói trong thư mục này ở bước 6. Vậy là các bước cài đặt đầu tiên đã hoàn thành.

Sử dụng Angular 2 trong Rails

1. Viết code Angular 2 trong Rails

• Thêm thiết lập vào file app/views/layouts/application.html.erb trước thẻ đóng </head> như sau:

    <script src="/systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>

• Tạo file ng-app/app.module.ts có nội dung sau:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

• Tạo file ng-app/main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

• Tạo file ng-app/app.component.ts :

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Angular 2 on Rails</h1>'
})
export class AppComponent { }

• Thêm selector vào file app/views/layouts/application.html.erb sau thẻ <body> với nội dung:

<my-app></my-app>

2. Chạy ứng dụng

• Chạy lệnh

npm start

Lệnh này dùng để biên dịch các tệp TypeScript trong thư mục ng-app trong chế độ "watch", nó sẽ đợi thay đổi cho các tệp TypeScript của bạn và biên dịch lại chúng ngay lập tức khi có thay đổi, vì vậy bạn có thể giữ nó trong khi phát triển.

• Khởi động Rails

rails s

3. Kết quả Sau khi thực hiện các bước trên thì bạn chạy được ứng dụng với kết quả như sau: Vậy là chúng ta đã sử dụng đươc Angular 2 kết hợp với Ruby on Rails.

Link tham khảo: https://github.com/createthis/rails-angular-2-example-with-typescript-no-asset-pipeline Link ứng dụng demo: https://github.com/minhth1905/angular2-rails