Angular2 toolbox

Vlad Bolibruk, JS developer, DevOps at Master of Code

Transcript

1. Angular2 toolbox by Vlad Bolibruk Master of Code Global
2. 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
3. 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”.
4. 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.
5. 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.
7. 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
8. 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 => { } ) }
9. Event emitter
10. Code implements Service public PushedProfile = new EventEmitter<any>(); pushProfileData(value){ this.PushedProfile.emit(value); } Component that produces changes notifyProfileChange() { this._userService.pushProfileData('profileChange'); }
11. Component that listens to changes getNotifyProfileChange() { this._userService.PushedProfile.takeUntil(this.ngUnsubscribe ).subscribe( data => {this.getUserDetails(); }, error => { this.errorMessage = <any>error; } ); }
12. Observable subscriptions handling, first step: private sub: Subscription; this.sub = this.service.method().subscribe( data => { }, error => this.errorMessage = <any>error ); ngOnDestroy() { this.sub.unsubscribe(); }
13. Observable subscriptions handling, second step: private sub: Subscription = null; ngOnDestroy() { if( this.sub != null){ this.sub.unsubscribe() } }
14. 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(); }
15. 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’); }