スポンサーリンク

Rails5でAngular4アプリの作成を写経してみる（１）

以下のサイトを写経してみたい。

angular4とrails5をスッと使ってみる
kanadai
2017年05月06日に更新
http://qiita.com/kanadai/items/0034f0c0fe26efab2f2b

最終的には、できれば、Railsの方はHerokuにデプロイして、Angular4をIonic3でスマホアプリにして、実際に動かしてみたい！（ずっと前から、こういうことがやりたかった。。。）

（環境）
Windows 8.1
Ruby2.3.3-p222
SQLite 3.18.0
DevKit mingw64-64-4.7.2
Node.js v6.10.2
Rails 5.1.0

image

（０）環境構築（かなり面倒）

Ruby2.3.3と、SQLite 3.18.0、DevKit mingw64-64-4.7.2、Node.js、Rails 5.1.0は、以下の書き込み通りにインストールした。

http://twosquirrel.mints.ne.jp/?p=15995

Angular4（正確には、angular-cli 1.0.0）は、以下のコードでインストールした

npm install -g @Angular/cli

＜フォルダの構成＞

C:/angular4/testApp/ フォルダの中に、

test-web/ フォルダ　：　angular4アプリを作成

test_api/ フォルダ　：　Rails5 APIサーバを作成

の予定とする。

（１）testAppフォルダの作成

C:/angular4/　フォルダの中に、testApp フォルダを作成。

image

testAppフォルダを開き、中で、右クリック　＞　Open with Code をクリック。

Ctrl+@で、cmd.exeを開く。

ng new test-web
cd test-web
ng serve

image

image

ブラウザで、loclhost:4200　を開く。

image

（２）Rails5でAPI作成

rails new test_api --api -T
cd test_api
rails db:create

image

image

comment一式をscaffold

rails generate scaffold comment name:string
rails db:migrate

image

test_api/db/seed.rb の変更

(変更前)
image

(変更後)
image

seed投入して、rails server する。

rails db:seed
rails server

image

image

ブラウザで、loclhost:3000を開く。

image

http://localhost:3000/comments.json　を開く。

image

個人的に、初めて、Railsのjson形式を見た。

（３）AngularからRails APIをゲットしに行く。

test-web/src/app/app.component.ts

(変更前)
image

(変更後)
image

test-web/src/app/app.component.html

(変更前)
image

(変更後)
image

image

（４）cors対策。

Rails側

test_api/Gemfile

(変更前)
image

(変更後)
image

bundle install

image

image

test_api/config/initializers/cors.rb

(変更前)
image

(変更後)
image

rails serverの方を、Ctrl+C => y , Enterで一度サーバ停止してから、再度、rails server でサーバ起動

image

あらら、うまくいかない。CORSにひっかかってしまう。。。うう。

test_api/config/initializers/cors.rb　の10行目を、

origins '*'

に変更してから、再度、rails サーバを再起動。できた！

image

このあとは、最終的には、できれば、Railsの方はHerokuにデプロイして、Angular4をIonic3でスマホアプリにして、実際に動かしてみたい。

（参考）

http://twosquirrel.mints.ne.jp/?p=4449

http://qiita.com/dogwood008/items/ed7c82413500c2557ebb

http://qiita.com/tjinjin/items/e53f59b84eab6a23815f

（５）angular4ではなく、ionic3アプリの場合

ionic start test-web-ionic3
cd test-web-ionic3
ionic serve

src/app/app.module.ts
image

home.ts
image

home.html
image

うむ。angular4 →ionic3は、app.module.tsにだけ気を付ければ簡単。

 

Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです！

スポンサーリンク

Angular4, Javascript, Rails5

Posted by twosquirrel