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

Template and Styles (View)

Component / Director (ViewModel)

Router / Module (Controller)

Services (models, http, redux, logic)

Back-end or APIs

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 

app.module.ts

rootRouter

services

pipes

directives

/a: default

/master

/detail

/b/...

/c

childRouter

/d

/e

/f

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

... programming with asynchronous data streams

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

Event-Driven

Event Source

Event Handler

user clicks

window.alert('Are you sure?')

onClick='confirmSave()'

Pub/Sub Pattern

updated data

fetchDetails()

updateCache()

showToastMessage()

Event-Driven Example

Reactive Pattern

Event Source

mouse clicks

filter(x >= 2)

throttle(250ms)

map(list.length)

<li *ng-for="i in list | async">

window.alert('Are you sure?')

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

      Slides

TheJavaScriptPromise.com

    Follow

@duluca