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
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
650
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
1
320
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
Software Architecture
hschwentner
6
2.3k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.8k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
CSC509 Lecture 04
javiergs
PRO
0
300
Le côté obscur des IA génératives
pascallemerrer
0
150
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
KATA
mclloyd
PRO
32
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Context Engineering - Making Every Token Count
addyosmani
7
260
Designing for Performance
lara
610
69k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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