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
55
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
110
Емоції: усвідомлення, прийняття, комунікація
gdgcherkasy
0
62
Kibana Plugin Development - Vlad Bolibruk
gdgcherkasy
0
68
“Why JS is way to go for backend”
gdgcherkasy
0
63
CoreData, custom merge policy
gdgcherkasy
2
1.4k
macOS_for_iOS_devs2.pdf
gdgcherkasy
0
67
MQTT.pdf
gdgcherkasy
1
32
Инструменты Lean Product Management как точки пересечения проектов с "реальностью": хватит клонировать плохие решения!
gdgcherkasy
1
72
Насколько силен Иммунитет вашей организации?
gdgcherkasy
1
90
Other Decks in Programming
See All in Programming
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
420
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.9k
Good first issues of TypeProf
mame
3
510
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
Powerfully Typed TypeScript
euxn23
3
1.5k
JS RPCを理解する
yusukebe
5
260
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
510
mb_trim関数を作りました
youkidearitai
PRO
1
190
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
730
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
13
2.4k
BBQ
matthewcrist
80
8.8k
Happy Clients
brianwarren
92
6.4k
GitHub's CSS Performance
jonrohan
1025
450k
Product Roadmaps are Hard
iamctodd
45
9.8k
How to name files
jennybc
65
94k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Optimizing for Happiness
mojombo
370
69k
The Cult of Friendly URLs
andyhume
74
5.7k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Docker and Python
trallard
35
2.7k
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