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

※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を入れた後はこのコマンド一発で導入できます

$ npm install -g @angular/cli

プロジェクトを作る

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

$ ng new Angular4-devise-token-auth
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'Angular4-devise-token-auth' successfully created.

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

$ cd Angular4-devise-token-auth/
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 540eb6dc093fe60e4243                                                       d Time: 11622ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.63 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

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

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