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

      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 ( ログインしやすくする)

今回からは実際にAngular4を利用してapiとつなげていきます!

※Angularとdevise token authを繋ぐライブラリneroniaky/angular2-tokenが存在しますが、4系に対応していない + 難しいコードや、ややこしいコードは書かないので、ライブラリを使わずにそのまま書いていきます。あと、今回はtypescriptやangularの最低限のベースを知っている方対象という前提なので、全く使ったことがない方は少し難しいかもしれませんので、docsなどを読んでからまた戻ってきていただけると嬉しいです!

node.jsのインストール

node.jsの最新バージョンを以下のリンクからインストールをおこなってください
node.js インストールページ

Angular CLIのインストール

angularにはangular cliという便利なライブラリがあります
このライブラリはターミナル上でコマンドを叩くだけでプロジェクトを作ったり
コンポーネントやサービスをジェネレートできるのでとても便利です

angular-cli詳細ページ

nodeを入れた後はこのコマンド一発で導入できます

プロジェクトを作る

無事にインストールが完了したら以下のコマンドでプロジェクトを生成します

生成が終わったら、ディレクトリに移動し起動します
その後localhost:4200にアクセスすると

app worksが表示されれば、これで準備は終了です!

次の記事
devise token auth api をAngular4 でUIを実装する2

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