Submit Search
Upload
AngularJS2でつまづいたこと
•
Download as PPTX, PDF
•
0 likes
•
4,552 views
Takehiro Takahashi
Follow
Frontend Meetup vol.1 - SPAを語り尽くす会! LT 2016/09/16
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 19
Download now
Recommended
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
映画にでてくるハッカーになりたい - YAPC Asia 2010
映画にでてくるハッカーになりたい - YAPC Asia 2010
Hiroh Satoh
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Hello, Node.js
Hello, Node.js
Shin Sekaryo
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
Recommended
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
映画にでてくるハッカーになりたい - YAPC Asia 2010
映画にでてくるハッカーになりたい - YAPC Asia 2010
Hiroh Satoh
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Hello, Node.js
Hello, Node.js
Shin Sekaryo
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
Node js 入門
Node js 入門
Satoshi Takami
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
Nodeについて
Nodeについて
Natsuki Yamanaka
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Ryo Iinuma
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
AimingStudy
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
civic Sasaki
Type scriptmemo
Type scriptmemo
ytanno
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
Node.js入門
Node.js入門
俊夫 森
Javascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみる
Shunji Konishi
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
Node.jsに縁のない職場でnode.jsを使い始める戦術
Node.jsに縁のない職場でnode.jsを使い始める戦術
Isamu Suzuki
SPAと覚悟
SPAと覚悟
Teppei Sato
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
Sanehiko Yogi
More Related Content
What's hot
Node js 入門
Node js 入門
Satoshi Takami
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
Nodeについて
Nodeについて
Natsuki Yamanaka
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Ryo Iinuma
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
AimingStudy
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
civic Sasaki
Type scriptmemo
Type scriptmemo
ytanno
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
Node.js入門
Node.js入門
俊夫 森
Javascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみる
Shunji Konishi
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
Node.jsに縁のない職場でnode.jsを使い始める戦術
Node.jsに縁のない職場でnode.jsを使い始める戦術
Isamu Suzuki
What's hot
(19)
Node js 入門
Node js 入門
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Node.js Hands-On
Node.js Hands-On
Nodeについて
Nodeについて
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
Type scriptmemo
Type scriptmemo
大規模なJavaScript開発の話
大規模なJavaScript開発の話
Node.js入門
Node.js入門
Javascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみる
angular1脳で見るangular2
angular1脳で見るangular2
JavaScript MVC入門
JavaScript MVC入門
Node.jsに縁のない職場でnode.jsを使い始める戦術
Node.jsに縁のない職場でnode.jsを使い始める戦術
Viewers also liked
SPAと覚悟
SPAと覚悟
Teppei Sato
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
Sanehiko Yogi
SEO対策したサイトをAPI Gateway+Lambdaで作った話
SEO対策したサイトをAPI Gateway+Lambdaで作った話
貴大 平田
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
Masayuki Kato
(SEC201) How Should We All Think About Security?
(SEC201) How Should We All Think About Security?
Amazon Web Services
(SEC323) New: Securing Web Applications with AWS WAF
(SEC323) New: Securing Web Applications with AWS WAF
Amazon Web Services
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Takuya Hattori
Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)
Yohei Yasukawa
Viewers also liked
(10)
SPAと覚悟
SPAと覚悟
20160927 reactmeetup
20160927 reactmeetup
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
SEO対策したサイトをAPI Gateway+Lambdaで作った話
SEO対策したサイトをAPI Gateway+Lambdaで作った話
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
(SEC201) How Should We All Think About Security?
(SEC201) How Should We All Think About Security?
(SEC323) New: Securing Web Applications with AWS WAF
(SEC323) New: Securing Web Applications with AWS WAF
Angular2実践入門
Angular2実践入門
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)
Similar to AngularJS2でつまづいたこと
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
Takao Tetsuro
Wasm blazor and wasi 2
Wasm blazor and wasi 2
Takao Tetsuro
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
Monomeeting 20081022
Monomeeting 20081022
Atsushi Eno
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
Akira Inoue
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Joni
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Akira Inoue
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Nodejs
Nodejs
Masanobu Masuda
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david9142
10回目nodejs
10回目nodejs
Takuya Shishido
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
Akira Inoue
kintoneカスタマイズで知っておくと便利なSDK・ツール
kintoneカスタマイズで知っておくと便利なSDK・ツール
kintone, cybozu, developer network
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Tomoki Hasegawa
Node-REDはいいぞ
Node-REDはいいぞ
Shintaro Yamasaki
Windows コンテナを AKS に追加する
Windows コンテナを AKS に追加する
Yuto Takei
Similar to AngularJS2でつまづいたこと
(20)
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
Wasm blazor and wasi 2
Wasm blazor and wasi 2
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Monomeeting 20081022
Monomeeting 20081022
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Nodejs
Nodejs
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
10回目nodejs
10回目nodejs
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
kintoneカスタマイズで知っておくと便利なSDK・ツール
kintoneカスタマイズで知っておくと便利なSDK・ツール
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Node-REDはいいぞ
Node-REDはいいぞ
Windows コンテナを AKS に追加する
Windows コンテナを AKS に追加する
AngularJS2でつまづいたこと
1.
AngularJS2でつまづいたこと Frontend Meetup vol.1
- SPAを語り尽くす会! LT 2016/09/16 Takehiro Takahashi
2.
作ったもの
3.
SNS(未完)
4.
構想4年
5.
何人かのメンバーと議論
6.
今はほぼ一人。
7.
OSS
8.
フロントエンドだけ完成 使っているライブラリ等 AngujarJS2
2.0.0-beta17 (ちょっと古いです) TypeScript Webpack node systemjs
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.
出来たもの
11.
12.
つまずいた部分
13.
認証機能
14.
認証機能をどこに持たせる? AngularJS2では「状態」を Component
が持つ Serviceに状態はなるべく持たないようにしたい つまり、Componentが認証情報を持っている? 形のないものにComponentを使うのに抵抗があった これが当たり前・・?
15.
認証機能をどこに持たせる? 悩みに悩んだ末こうなりました。 #main.ts bootstrap(AppComponent, [ AuthSharedService ]);
16.
SharedService SharedServiceは、名前の通りインジェクションされた Componentの子や子孫のComponentであれば、アクセスす ることが出来るService データを持ってOK(ということにしました...)
今回はAppComponentにインジェクションされているので事 実上どこでもアクセス出来ます
17.
ログインユーザーの管理が楽に @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; } }
18.
最後に https://github.com/mintsns/mintsns
19.
ご清聴ありがとうございました。
Download now