Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular Elementsにハマってみた/I use the Angular Elements
Search
Eiji Hachiya
January 29, 2020
0
1k
Angular Elementsにハマってみた/I use the Angular Elements
2020/01/29(水) に行われたClassiAngularNight #5の資料です
Eiji Hachiya
January 29, 2020
Tweet
Share
More Decks by Eiji Hachiya
See All by Eiji Hachiya
なぜClassiはReactが盛り上がってる2017年にAngularを選択したのか?/why we use angular
hachi_eiji
2
1.7k
【Real Tech Night #2】学校教育を支えるマルチテナント/multi-tenant_in_edtech
hachi_eiji
1
280
レガシー業界の社内を変える /realtech
hachi_eiji
0
490
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Navigating Team Friction
lara
187
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Automating Front-end Workflow
addyosmani
1370
200k
Optimizing for Happiness
mojombo
379
70k
Adopting Sorbet at Scale
ufuk
77
9.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
Copyright © 2020 Classi Corp. All Rights Reserved. Angular Elementsでハマってみた
2020/01/29 Classi Angular Night #5
Copyright © 2020 Classi Corp. All Rights Reserved. • 八谷
英治 (はちや えいじ) • Twitter hachi_eiji • Classi株式会社 • エンジニアリングマネージャー 1 自己紹介
Copyright © 2020 Classi Corp. All Rights Reserved. AngularJS使ってますか!! 2
https://connpass.com/event/78163/presentation/
Copyright © 2020 Classi Corp. All Rights Reserved. AngularJS •
Angular Elementsを使う Angular Elements概要 • Angular ElementsによるAngularJSの段階的アップグレード戦略 AngularJS の中でAngularを動かす 3 Angularで作った コンポーネント Angularで作った コンポーネント Angularで作った コンポーネント Angularで作った コンポーネント Angularで作った コンポーネント Custom Element
Copyright © 2020 Classi Corp. All Rights Reserved. この部分だけAngular Elementsを使う
4
Copyright © 2020 Classi Corp. All Rights Reserved. リロードすると見えたり、見えなかったりする みんな大好き
IE/Edgeだけ動かない(ことが多々ある) 5
Copyright © 2020 Classi Corp. All Rights Reserved. 原因はAngular Elementsの起動順番にあった
6 Angular Elements AngularJS ① Load Script ② Load Script ①’ bootstrap ②’ bootstrap 時間 Angularのコンポーネントを呼び出すために AngularJSのbootstrapを呼び出す前に Angularの初期化を終わせる必要があった
Copyright © 2020 Classi Corp. All Rights Reserved. 解決案その1 7
Angular Elements AngularJS ① Load Script ② Load Script ③ bootstrap ④ bootstrap 時間 問題点 ③が終わる前に④のイベントを待受イベン トの起動完了させないと空振りが起きる AngularJS側の 起動Eventを投げる platformBrowserDynamic() .bootstrapModule(<モジュール名>) .then((moduleRef) => { defineCustomElements(moduleRef.injector); }) .then(() => { // AngularJSを呼び出す前にAngularの初期化を終わらせたい // angularJSElementInitialized イベントはAngularJS側に記載する const event = new Event('angularJSElementInitialized'); window.dispatchEvent(event); })
Copyright © 2020 Classi Corp. All Rights Reserved. 最終的な解決案 8
Angular Elements AngularJS ① Load Script ② Load Script ③ bootstrap ④ bootstrap 時間 Promise.thenで イベントを起動する window.addEventListener('DOMContentLoaded', function () { // initializeElementはAngular Element上で定義済み window['initializeElement']().then(function () { angular.bootstrap(document, ['classi']); }); });
Copyright © 2020 Classi Corp. All Rights Reserved. 大切なことなのでもう一度 9
https://connpass.com/event/78163/presentation/
Copyright © 2020 Classi Corp. All Rights Reserved. 2021年に終わるので徐々に変えていき 10