How to Build Web Apps

with Angular 4 & Material 2

Doguhan Uluca

@duluca

TheJavaScriptPromise.com

GitHub.com/duluca/nvcc17-app

Pre-Order & Save 50%

bit.ly/FullStackAngular

Learning Objectives

• Angular Orientation
• Use Angular CLI
• Optimize Visual Code
• Build Weather App using HttpClient and RxJS
• Run Angular unit and end-to-end (e2e) tests
• Troubleshoot common Angular errors
• Guard against null data
• Containerize the app using Docker
• Deploy the app on the web using Zeit Now
• Add Material

Angular Architecture

Angular Vernacular

Name	CLI Command
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

App Structure 

Bindings

Name	Syntax	Data direction
Interpolation Property Attribute Class Style	{{expression}} [target]="expression" bind-target="expression"	One-way from data source to view target
Event	(target)="statement" on-target="statement"	One-way from view target to data source
Two-way	[(target)]="expression" binding-target="expression"	Two-way

Built-in Directives

Name	CLI Command
Structural	*ngIf, *ngFor, *ngSwitch
Attribute	[class], [style], [(model)]

Built-in Pipes

Name	Usage
Date	{{date_value | date[:format]}}
Text Transformation	{{value | uppercase}} {{value | lowercase}} {{value | titlecase }}
Decimal	{{number | number[:digitInfo]}}
Percent	{{number | percent[:digitInfo]}}
Currency	{{number | currency[:currencyCode[:symbolDisplay[:digitInfo]]]}}

Reactive Extensions

• RxJS
• Toolbox of functions to combine, create and filter the streams
• Evolution of Event-driven

Event-Driven

Pub/Sub Pattern

Event-Driven Example

Reactive Pattern

Reactive Example

Summary

• Angular Orientation
• Use Angular CLI
• Optimize Visual Code
• Build Weather App using HttpClient and RxJS
• Run Angular unit and end-to-end (e2e) tests
• Troubleshoot common Angular errors
• Guard against null data
• Containerize the app using Docker
• Deploy the app on the web using Zeit Now
• Add Material

Best Feature of Angular 4

• LTS until October 2018
• Timed Releases
• bit.ly/NgBestFeature

      Slides

TheJavaScriptPromise.com

    Follow

@duluca