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

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

今回は新規登録を追加します!

新規登録のためのメソッドをauth.service.tsに追加する

新規登録ができるように、auth.service.tsにメソッドを追加します
追加後はこんなコードになります

sign-up.component.tsを作成する

作成後はコードを以下のように修正してください

viewの修正

componentが終わったので、次はhtmlを変更していきます

app.component.htmlにセレクタを入れる

最後にセレクターを入れてやります
こうすることでAngularがsign-up.componentをここに呼び出すことができます

登録してみる!

いくつかエラーが出ていますが、無事に登録できて successしたと返ってきています!

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