Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS2でつまづいたこと

3,788 views

Published on

Frontend Meetup vol.1 - SPAを語り尽くす会! LT 2016/09/16

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

AngularJS2でつまづいたこと

  1. 1. AngularJS2でつまづいたこと Frontend Meetup vol.1 - SPAを語り尽くす会! LT 2016/09/16 Takehiro Takahashi
  2. 2. 作ったもの
  3. 3. SNS(未完)
  4. 4. 構想4年
  5. 5. 何人かのメンバーと議論
  6. 6. 今はほぼ一人。
  7. 7. OSS
  8. 8. フロントエンドだけ完成  使っているライブラリ等  AngujarJS2 2.0.0-beta17 (ちょっと古いです)  TypeScript  Webpack  node  systemjs
  9. 9. package.json { "name": "mintsns", "version": "1.0.0", "scripts": { "start": "npm run serve", "serve": "node_modules/lite-server/bin/lite-server", "webpack": "node_modules/webpack/bin/webpack.js --watch", "build": "node_modules/webpack/bin/webpack.js" }, "contributors": [ "info@mintsns.com <info@mintsns.com>" ], "license": "MIT", "dependencies": { "angular2": "2.0.0-beta.17", "css-loader": "^0.23.1", "es6-shim": "^0.35.0", "extract-text-webpack-plugin": "^1.0.1", "jquery": "^2.2.3", "lodash": "^4.11.2", "node-sass": "^3.6.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.6", "sass-loader": "^3.2.0", "style-loader": "^0.13.1", "systemjs": "0.19.26", "typescript": "^1.8.9", "zone.js": "0.6.12" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0", "tsd": "^0.6.5", "typescript": "^1.8.10", "typings": "^0.8.1", "webpack": "latest" } }
  10. 10. 出来たもの
  11. 11. つまずいた部分
  12. 12. 認証機能
  13. 13. 認証機能をどこに持たせる?  AngularJS2では「状態」を Component が持つ  Serviceに状態はなるべく持たないようにしたい  つまり、Componentが認証情報を持っている?  形のないものにComponentを使うのに抵抗があった  これが当たり前・・?
  14. 14. 認証機能をどこに持たせる? 悩みに悩んだ末こうなりました。 #main.ts bootstrap(AppComponent, [ AuthSharedService ]);
  15. 15. SharedService  SharedServiceは、名前の通りインジェクションされた Componentの子や子孫のComponentであれば、アクセスす ることが出来るService  データを持ってOK(ということにしました...)  今回はAppComponentにインジェクションされているので事 実上どこでもアクセス出来ます
  16. 16. ログインユーザーの管理が楽に @Injectable() export class AuthSharedService { // ログインユーザー // ログインしている場合はここにユーザーデータが入る loginUser: User; constructor() { this.loginUser = { id: 1, name: "mintsns", iconUrl: "../images/samples/icons/niconico_seiga_im3861359.jpeg", iconUrlLarge: "../images/samples/icons/niconico_seiga_im3861359.jpeg", iconUrlMedium: "../images/samples/icons/niconico_seiga_im3861359.jpeg", iconUrlSmall: "../images/samples/icons/niconico_seiga_im3861359.jpeg", isMe: true, email: "", password: "" }; } // ログインしているか isLogin() { return !!this.loginUser; } // ログインユーザーの取得 getLoginUser() { return this.loginUser; } }
  17. 17. 最後に https://github.com/mintsns/mintsns
  18. 18. ご清聴ありがとうございました。

×