devise token auth api をAngular4 でUIを実装する2

      2017/08/25

※angularの完成物のBitbucketのリンクです
Angular4-devise-token-auth

関連記事
全て連続しているので上から順に進めていっていただけるとわかりやすいと思います!
devise token auth を使って簡単に早くAPIを作る1( api作成 )
devise token auth を使って簡単に早くAPIを作る2 ( jsonの出力 )
devise token auth api をAngular4 でUIを実装する1 ( angularのセットアップ )
devise token auth api をAngular4 でUIを実装する2 今回はここ!
devise token auth api をAngular4 でUIを実装する3 ( 新規登録 )
devise token auth api をAngular4 でUIを実装する4 ( ログインしやすくする)
今回はログイン機能を構築することを目標に進めていきます!

Angularの簡単な説明

Angularとはgoogleが主導で開発を進めているjavascriptのフレームワークです
最近ではvue.jsやreactと同じくらい流行っていると思いますが、これらとは異なり完全なフルスタックフレームワークです

個人的にはvueやreactの手軽さも好きなんですけど、ある程度の規模だったりtypescriptがデフォルトなので
コンパイルする際にエラーが出て来ることで早期にバグを防げる点ですごく利点があるなーと思ってます
ただ、小規模で利用する場合はオーバースペックになる可能性が高いので規模に合わせて使うのがいいかと

そんなAngularですが全体像はこちらです

引用

ARCHITECTURE OVERVIEW

Angularには大きく分けて

  • Component
  • service

があります

Componentはrailsで例えるとcontrollerで、Serviceはmodelです

基本的に使い方は同じでServiceに共通で使うロジックをまとめてComponentでそれらを呼び出し
エラーハンドリング等もここで行う感じです
ちなみにviewレンダリングもComponentでセットになっています

Serviceを作る

まずはserviceを作っていきます!
ターミナルで

ターミナルでng コマンドで生成すると以下のコードのように最低限必要な機能が備わっています
以下を編集してログインできるようしていきます

編集後⬇︎

app.module.tsの編集

componentをターミナルで生成すると、自動的にapp.module.tsに追加されますが、
serviceは追加されません

なので、追加します

Componentを作る

componentを生成する

こちらがデフォルトのコンポーネントです

それでは先程と同様に修正を加えていきます

componentの修正が終わったら次はviewサイドでbootstrapを使用することができるように
src/index.htmlにSDNを追加します!

Componentのviewを作成する

viewでは最低限のbootstrapを使うのでindex.htmlを編集

Componentを生成した際にhtmlを作られているので、フォームを修正します

フォームを修正し終えたら、app.component.tsにlogin componentのセレクタを入れます

これでログインは終わったので、実際にログインできるか試してみます!

開発者環境を開いて、consoleもしくはnetoworkで確認してみましょう
データベースに登録されている情報が返却されていたら完璧です!

 - Angular, Javascript, node.js, Rails, SQL, typescript , , , , , , , , ,