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
Angular2 toolbox
Search
GDG Cherkasy
May 29, 2017
Programming
0
58
Angular2 toolbox
Vlad Bolibruk, JS developer, DevOps at Master of Code
GDG Cherkasy
May 29, 2017
Tweet
Share
More Decks by GDG Cherkasy
See All by GDG Cherkasy
Трансформація від розробника до ліда: байки та поради.
gdgcherkasy
0
130
Емоції: усвідомлення, прийняття, комунікація
gdgcherkasy
0
100
Kibana Plugin Development - Vlad Bolibruk
gdgcherkasy
0
76
“Why JS is way to go for backend”
gdgcherkasy
0
77
CoreData, custom merge policy
gdgcherkasy
2
1.6k
macOS_for_iOS_devs2.pdf
gdgcherkasy
0
71
MQTT.pdf
gdgcherkasy
1
37
Инструменты Lean Product Management как точки пересечения проектов с "реальностью": хватит клонировать плохие решения!
gdgcherkasy
1
77
Насколько силен Иммунитет вашей организации?
gdgcherkasy
1
100
Other Decks in Programming
See All in Programming
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
Catch Up: Go Style Guide Update
andpad
0
230
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
420
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
理論と実務のギャップを超える
eycjur
0
140
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
160
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.2k
CSC509 Lecture 03
javiergs
PRO
0
340
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Gamification - CAS2011
davidbonilla
81
5.5k
Side Projects
sachag
455
43k
Docker and Python
trallard
46
3.6k
Thoughts on Productivity
jonyablonski
70
4.9k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
Optimizing for Happiness
mojombo
379
70k
Site-Speed That Sticks
csswizardry
12
900
KATA
mclloyd
32
15k
Transcript
Angular2 toolbox by Vlad Bolibruk Master of Code Global
Angular and Plugins Steps to install module: 1.npm install packet_name
--save or 1.npm install packet_name_without_angular_support --save 2.npm install @types/packet_name_without_angular_support --save
Old steps to deploy Angular2 1.npm install (optional). 2.npm build_prestage
| npm build_stage. 3.”git add files” && git commit -m “commit message” && git push. 4.on “server git pull && service nginx restart”.
New way to deploy: 1.”git add files” && git commit
-m “commit message” && git push 2.Go to jenkins site. 3.Choose deploy project. 4.Click deploy, view Hipchat.
1.Git push 2. a.Web hook to jenkins. b.Jenkins pulls repo.
c.Build. 3. a.Docker Build. b.Docker push to docker hub. 4. a.Run Ansible Playbook. 5. a.Docker pull. b.reload of container change.
None
Steps on Jenkins . ~/.profile yarn install npm run build_prestage
docker build -f Dockerfile --tag="registryUrl/imagname" . docker push registryUrl/imagname ansible-playbook recipe.yml -i inverntory.ini --tags=prestage
Action Cable import { Ng2Cable, Broadcaster } from ‘ng2-cable/js/index’; constructor
(private _ng2Cable: Ng2Cable, _broadcaster: Broadcaster) {} subscribeToCable (length) { this._ng2Cable.subscribe(`${apiUrl}cable?room=${length}`, ‘NotificationsChannel’) this._broadcaster.on<string>(‘NotificationsChannel’).subscribe( data => { } ) }
Event emitter
Code implements Service public PushedProfile = new EventEmitter<any>(); pushProfileData(value){ this.PushedProfile.emit(value);
} Component that produces changes notifyProfileChange() { this._userService.pushProfileData('profileChange'); }
Component that listens to changes getNotifyProfileChange() { this._userService.PushedProfile.takeUntil(this.ngUnsubscribe ).subscribe( data
=> {this.getUserDetails(); }, error => { this.errorMessage = <any>error; } ); }
Observable subscriptions handling, first step: private sub: Subscription; this.sub =
this.service.method().subscribe( data => { }, error => this.errorMessage = <any>error ); ngOnDestroy() { this.sub.unsubscribe(); }
Observable subscriptions handling, second step: private sub: Subscription = null;
ngOnDestroy() { if( this.sub != null){ this.sub.unsubscribe() } }
Observable subscriptions handling, third step: import 'rxjs/add/operator/takeUntil'; import { Subject
} from 'rxjs/Subject'; private ngUnsubscribe: Subject<void> = new Subject<void>(); this.service.getData().takeUntil(this.ngUnsubscribe).subscribe( data => this.object = data, error => this.errorMessage = <any>error ); ngOnDestroy() { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); }
Use Only Pipe if you need filter same data Never
Use !!! <div>{{ filterData(slot.start) }}</div> filterData (start) { return timezone.tz(data, args).format(‘h:mm A’) } Valid Use <div>{{ slot.start | formatSlotTime: clinic:tomezone }}</div> @Pipe({ name: ‘formatSlotTime’ }) transform(val: any, args: any, filter: string) { return timezone.tz(data, args).format(‘h:mm A’); }
None