{"id":7890,"date":"2017-07-03T01:08:00","date_gmt":"2017-07-02T16:08:00","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=7890"},"modified":"2026-06-25T01:22:03","modified_gmt":"2026-06-24T16:22:03","slug":"rails5-angular-%e3%81%a7%e4%bd%9c%e3%82%8b%e3%80%82spa-%e4%bc%9a%e5%93%a1%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=7890","title":{"rendered":"Rails5 + Angular \u3067\u4f5c\u308b\u3002SPA \u4f1a\u54e1\u30b5\u30a4\u30c8\u306e\u4f5c\u308a\u65b9\u3002"},"content":{"rendered":"

\u3069\u3082\u3067\u3059\u3002<\/p>\n

\u4eca\u56de\u3001\u67d4\u3089\u304b\u3081\u306e\u30bf\u30a4\u30c8\u30eb\u3067\u3059\u304c\u3001<\/p>\n

\u524d\u56de\u306e<\/p>\n

\u300cRails5 API\u30e2\u30fc\u30c9 + Angular SPA\u74b0\u5883 \u7206\u901f\u69cb\u7bc9\u306e\u624b\u9806 \u305d\u306e1\u3002<\/a>\u300d<\/p>\n

\u300cRails5 API\u30e2\u30fc\u30c9 + Angular SPA\u74b0\u5883 \u7206\u901f\u69cb\u7bc9\u306e\u624b\u9806 \u305d\u306e2\u3002<\/a>\u300d<\/p>\n

\u3053\u308c\u3089\u306a\u3069\u306e\u7d9a\u304d\u3068\u306a\u308a\u3001\u4eca\u56de\u306f\u3001 Devise Token Auth + angular2-token \u306b\u3088\u308b\u8a8d\u8a3c<\/strong>\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

\uff08\u3061\u3087\u3063\u3068\u653e\u7f6e\u3057\u3066\u3044\u307e\u3057\u305f\u3002\u3002\u3002<\/p>\n

\u4ee5\u4e0b\u306f\u3001\u5404\u30e9\u30a4\u30d6\u30e9\u30ea\u306e github\u30ec\u30dd\u30b8\u30c8\u30ea<\/strong>\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

devise_token_auth<\/strong><\/p>\n

https:\/\/github.com\/lynndylanhurley\/devise_token_auth<\/a><\/p>\n

Devise Token Auth <\/strong>\u306b\u95a2\u3057\u3066\u306f\u3001\u524d\u56de\u306e\u8a18\u4e8b\u306e\u300cRails5 + devise token auth\u3067\u4f5c\u308b \u8a8d\u8a3cAPI<\/a>\u300d\u3067\u7d39\u4ecb\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u306e\u3067\u3001\u53c2\u8003\u306b\u3057\u3066\u3044\u305f\u3060\u3051\u308c\u3070\u3068\u30fc\u3002<\/p>\n

angular2-token<\/strong><\/p>\n

https:\/\/github.com\/neroniaky\/angular2-token<\/a><\/p>\n

\u30c7\u30e2\u5b9f\u88c5<\/h4>\n

\u4eca\u56de\u306f\u3001 Devise Token Auth + angular2-token<\/strong>\u3092\u7528\u3044\u3066\u4f1a\u54e1\u767b\u9332\u3092\u4f5c\u3063\u3066\u884c\u304f\u306e\u3067\u3059\u304c\u3001\u4ee5\u4e0b\u306b\u30c7\u30e2\u30b5\u30f3\u30d7\u30eb\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n

angular2-token-example<\/strong><\/p>\n

https:\/\/github.com\/neroniaky\/angular2-token-example<\/a><\/p>\n

\u4eca\u56de\u306f\u3001\u3053\u3061\u3089\u306b\u3059\u3067\u306b\u30c7\u30e2\u5b9f\u88c5\u304c\u3042\u308a\u307e\u3057\u3066\u3001\u305d\u308c\u3092\u57fa\u306b\u5b9f\u969b\u306b\u624b\u3092\u52d5\u304b\u3057\u3066\u5b9f\u88c5\u3057\u3066\u89e3\u8aac\u3055\u305b\u3066\u9802\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

https:\/\/angular2-token.herokuapp.com\/#\/<\/a><\/p>\n

\"\"<\/p>\n

\u3069\u306e\u3088\u3046\u306a\u30c7\u30e2\u304b\u3068\u8a00\u3046\u3068\u3002<\/p>\n

\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<\/strong>\u3001\u30d1\u30b9\u30ef\u30fc\u30c9\u5165\u529b<\/strong>\u3001\u78ba\u8a8d\u5165\u529b<\/strong>\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u767b\u9332<\/strong>\u3092\u884c\u3044\u3001\u30ed\u30b0\u30a4\u30f3<\/strong>\u3057\u305f\u308a\u3001\u60c5\u5831\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8<\/strong>\u3057\u305f\u308a\u3001\u30ed\u30b0\u30a2\u30a6\u30c8<\/strong>\u3057\u305f\u308a\u3068\u8a00\u3063\u305f\u3001 \u4e00\u901a\u308a\u306e\u3067\u3082\u30b5\u30f3\u30d7\u30eb\u304c\u5b9f\u88c5\u3055\u308c\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n

\u305d\u308c\u3067\u306f\u65e9\u901f\u3001git\u306ecommit\u3092\u57fa\u306b\u8efd\u304f\u8aac\u660e\u3055\u305b\u3066\u9802\u304d\u307e\u3059\u30fc\u3002<\/p>\n

\u5b9f\u88c5<\/h4>\n

\u30ec\u30dd\u30b8\u30c8\u30ea\u306f\u3001\u4ee5\u4e0b\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

\u524d\u56de\u3068\u306f\u5225\u306b\u65b0\u305f\u306b\u30d6\u30e9\u30f3\u30c1\u3092\u5207\u3063\u3066\u4f5c\u696d\u3092\u884c\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n

\u30d6\u30e9\u30f3\u30c1\u540d\u306f\u300cdevise_token_auth<\/strong>\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

github<\/strong><\/p>\n

rails-api-angular-example<\/a><\/p>\n

\u8a2d\u5b9a<\/h5>\n

github<\/strong><\/p>\n

rails change db mysql & devise_token_auth setup<\/a><\/p>\n

\u307e\u305a\u306f\u3001\u4f7f\u7528\u3059\u308b\u305d\u308c\u305e\u308c\u306egem\u3092\u8ffd\u52a0\u3002<\/p>\n

gem 'omniauth'\ngem 'devise_token_auth'\ngem 'omniauth-github'<\/pre>\n
CORS \uff08\u30af\u30ed\u30b9\u30c9\u30e1\u30a4\u30f3\uff09\u5bfe\u5fdc\u3059\u308b\u305f\u3081\u3001rack-cors\u3082\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
gem 'rack-cors'<\/pre>\n
\u307e\u305f\u3001\u524d\u56de\u307e\u3067sqlite3\u3092\u4f7f\u7528\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001mysql2\u306b\u5207\u308a\u66ff\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u8a2d\u5b9a\u3082\u5909\u66f4\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n
default: &default\n  adapter: mysql2\n  encoding: utf8\n  pool: 5\n  username: root\n  password:\n  host: localhost\n\ndevelopment:\n  <<: *default\n  database: rails_api_angular_example<\/pre>\n
Gemfile\u3092\u66f4\u65b0\u3057\u305f\u3089\u3001\u300cbundle install\u300d\u3068\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n
$ bundle install --path vendor\/bundle<\/pre>\n
app\/controllers\/application_controller.rb<\/strong><\/p>\n
class ApplicationController < ActionController::API\n  include DeviseTokenAuth::Concerns::SetUserByToken\nend<\/pre>\n
\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3067\u4f7f\u7528\u3059\u308bApplicationController<\/strong>\u306b\u3001 DeviseTokenAuth::Concerns::SetUserByToken \u3092 include\u5b9a\u7fa9\u3002<\/p>\n
app\/controllers\/private_resource_controller.rb<\/strong><\/p>\n
class PrivateResourceController < ApplicationController\n\n    before_action :authenticate_user!\n\n    def index\n        response = {\n            data: 'Private Content for ' + current_user.email\n        }\n\n        render json: response\n    end\n\nend<\/pre>\n
\u524d\u56de\u306b\u3066\u4f7f\u7528\u3057\u3066\u3044\u305f\u3001\u300capp\/controllers\/users_controller.rb\u300d\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n
app\/models\/user.rb<\/strong><\/p>\n
$ rails g devise_token_auth:install User auth<\/pre>\n
class User < ActiveRecord::Base\n  # Include default devise modules.\n  devise :database_authenticatable, :registerable,\n         :rememberable, :trackable, :omniauthable,\n         :validatable #,:recoverable,:confirmable\n  include DeviseTokenAuth::Concerns::User\nend<\/pre>\n
config\/routes.rb<\/strong><\/p>\n
Rails.application.routes.draw do\n  mount_devise_token_auth_for 'User', at: 'auth'\n\n  resources :private_resource, only: :index\nend<\/pre>\n
migrate\u306e\u5dee\u5206\u3082\u51fa\u3066\u304a\u308a\u307e\u3059\u304c\u3001\u3053\u3061\u3089\u306f\u5272\u611b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3059\u3002<\/p>\n
github<\/strong><\/p>\n
add angular2-token package<\/a><\/p>\n
angular2-token\u306epackage\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3002<\/p>\n
github<\/strong><\/p>\n
delete user files<\/a><\/p>\n
\u524d\u56de\u307e\u3067\u4f7f\u7528\u3057\u3066\u3044\u305f\u300cuser\u300d\u307e\u308f\u308a\u306e\u30c7\u30fc\u30bf\u3092\u524a\u9664\u3002<\/p>\n
github<\/strong><\/p>\n
refactor scss files & add bootstrap<\/a><\/p>\n
bootstrap\u306ecss\u3084\u3001font-awesome\u306ecss\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n
github<\/strong><\/p>\n
remove spec file<\/a><\/p>\n
\u3053\u3061\u3089\u3082\u524d\u56de\u307e\u3067\u3057\u3088\u3046\u3057\u3066\u3044\u305f Anglur\u306espec\u5468\u308a\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n
github<\/strong><\/p>\n
template init<\/a><\/p>\n
\"\"<\/p>\n
app-routing.module.ts \u3092\u524a\u9664\u3057\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e app.component.html \u3092\u4fee\u6b63\u3002<\/p>\n
app.component.ts<\/strong><\/p>\n
import { Component, ViewEncapsulation, OnInit } from '@angular\/core';\nimport { Angular2TokenService } from 'angular2-token';\n\nexport class AppComponent {\n  title = 'app works!';\n  constructor(private _tokenService: Angular2TokenService) {\n    this._tokenService.init();\n  }\n}<\/pre>\n
app.module.ts<\/strong><\/p>\n
import { Angular2TokenService, A2tUiModule } from 'angular2-token';\nimport { AppComponent } from '.\/app.component';\n\nimport {\n  routes\n} from '.\/';\n\n@NgModule({\n  imports: [\n    routes,\n    BrowserModule,\n    HttpModule,\n    A2tUiModule\n  ],\n  providers: [\n    Angular2TokenService\n  ],\n  declarations: [ AppComponent ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/pre>\n
app.routes.ts<\/strong><\/p>\n
import { RouterModule, Routes } from '@angular\/router';\n\nimport { Angular2TokenService } from 'angular2-token';\n\nconst routerConfig: Routes = [\n];\n\nexport const routes = RouterModule.forRoot(routerConfig, { useHash: true });<\/pre>\n
tokenService\u306e\u4e2d\u8eab\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
constructor(public tokenService: Angular2TokenService) {\n}\nconsole.log(tokenService);<\/pre>\n
activatedRoute: ActivatedRoute\natOptions: Object\ncurrentAuthData: (...)\ncurrentAuthHeaders: (...)\ncurrentUserData: (...)\ncurrentUserType: (...)\nhttp: Http\nrouter: Router<\/pre>\n
index.ts<\/strong><\/p>\n
export * from '.\/app.routes';\nexport * from '.\/app.component';\nexport * from '.\/app.module';<\/pre>\n
\u6700\u8fd1\u3001\u79c1\u3082\u3001\u3082\u3063\u3071\u3089\u3053\u306e\u8a18\u8ff0\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u7d30\u5206\u5316\u3092\u884c\u3046\u307b\u3069\u3001\u5927\u91cf\u306b\u767a\u751f\u3057\u3066\u3057\u307e\u3046 component\u5468\u308a\u3002<\/p>\n
component\u540c\u58eb\u3067 import\u3057\u3066\u4e71\u96d1\u306b\u306a\u3089\u306a\u3044\u69d8\u306b\u3001\u3068\u308a\u3042\u3048\u305a index.ts\u3092\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3057\u3066\u7f6e\u304f\u30eb\u30fc\u30eb\u904b\u7528\u3059\u308c\u3070\u3042\u308b\u7a0b\u5ea6\u7cbe\u67fb\u3055\u308c\u3066\u306f\u3044\u304d\u307e\u3059\u3002<\/p>\n
github<\/strong><\/p>\n
add example<\/a><\/p>\n
app.module.ts<\/strong><\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { FormsModule } from '@angular\/forms';\nimport { HttpModule } from '@angular\/http';\n\nimport { Angular2TokenService, A2tUiModule } from 'angular2-token';\n\nimport {\n  AppComponent,\n  ExampleModule,\n  routes\n} from '.\/';\n\n@NgModule({\n  imports: [\n    routes,\n    BrowserModule,\n    HttpModule,\n    ExampleModule,\n    A2tUiModule\n  ],\n  providers: [\n    Angular2TokenService\n  ],\n  declarations: [ AppComponent ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/pre>\n
app.routes.ts<\/strong><\/p>\n
import { RouterModule, Routes } from '@angular\/router';\n\nimport {\n  ExampleComponent\n} from '.\/';\n\nimport { Angular2TokenService } from 'angular2-token';\n\nconst routerConfig: Routes = [\n  { path: '', component: ExampleComponent }\n];\n\nexport const routes = RouterModule.forRoot(routerConfig, { useHash: true });<\/pre>\n
example.component.ts<\/strong><\/p>\n
import { Component, OnInit } from '@angular\/core';\nimport { Angular2TokenService } from 'angular2-token';\n\n@Component({\n  selector: 'example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.scss']\n})\nexport class ExampleComponent {\n  constructor(public tokenService: Angular2TokenService) {\n    this.tokenService.init();\n  }\n}<\/pre>\n
example.module.ts<\/strong><\/p>\n
import { NgModule } from '@angular\/core';\nimport { FormsModule } from '@angular\/forms';\nimport { CommonModule } from '@angular\/common';\nimport { HttpModule } from '@angular\/http';\nimport { RouterModule } from '@angular\/router';\n\nimport {\n  ExampleComponent,\n} from '.\/';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    RouterModule\n  ],\n  declarations: [\n    ExampleComponent,\n  ],\n  exports: [\n    ExampleComponent\n  ]\n})\nexport class ExampleModule { }<\/pre>\n
example\/index.ts<\/strong><\/p>\n
export * from '.\/example.component';\nexport * from '.\/example.module';<\/pre>\n
index.ts<\/strong><\/p>\n
export * from '.\/example';\nexport * from '.\/app.routes';\nexport * from '.\/app.component';\nexport * from '.\/app.module';<\/pre>\n
github<\/strong><\/p>\n
add Current User Status<\/a><\/p>\n
\"\"<\/p>\n
\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u306e\u8868\u793a<\/p>\n
\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
github<\/strong><\/p>\n
add shared files<\/a><\/p>\n
OutputComponent \u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
shared\/index.ts<\/strong><\/p>\n
export * from '.\/shared';<\/pre>\n
github<\/strong><\/p>\n
add register files<\/a><\/p>\n
\"\"<\/p>\n
example.component.html \u306b register \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
<\/pre>\n
register.component.html<\/strong><\/p>\n
\n
\n
Register<\/h4>\n
\n