Angular Master Class @ Codewise

Stepan Suvorov

VP Engineering @ Studytube

@stevermeister

`${new Date().getFullYear() - 2012} years with Angular`

Agenda

  • TypeScript
    • complex types
    • classes and interfaces
    • generics
  • Angular project architecture
  • Angular Dependency Injection
  • Http tricks
  • Reactive thinking (rxjs, forms, router)
  • Angular Optimization
  • Zone.js
  • Angular Tools: Chrome Dev Tools + Augury
  • + Angular + Service Workers
  • Discussion points: dynamic view generation, deep linking,...

TypeScript

playground

Classes and Interfaces

Generics

Project Structure

Angular Cli Blessing

too many components

router?

SharedModule

+ forRoot()/forChild() strategies

Dependency Injection

Main parts

  • Provider
  • Injector
  • Dependancy

Going deep with Injector

import { ReflectiveInjector} from '@angular/core';
import { MyService } from './my.service';
const injector = 
  ReflectiveInjector.resolveAndCreate([MyService]);
myService = injector.get(MyService);

Component Injector

componentInstance.injector

live conding

Child Injector

const injector = 
  Injector.resolveAndCreate([MyService]);

const childInjector = 
  injector.resolveAndCreateChild([MyService]);

childInjector.get(MyService) !== injector.get(MyService)

Injector Tree

live conding

What about Providers?

Token

Recipe

{

}

Provider Token

  • String
  • Class
  • OpaqueToken InjectionToken

Provider Recipe

  • useClass
  • useExisting
  • useFactory
  • useValue

How injection happens?

  • constructor
  • decorator
  • parameter
  • optional

Http

What's missing?

  • .json()
  • base URL
  • Auth-token
  • Interceptors

What's there?

  • Observables
  • base URL
  • Auth-token
  • Interceptors

Own HttpService

code

HttpClient

  • JSON
  • response type checking
  • Interceptors are back!

Angular4.3+

Interceptors

Reactive Thinking

RxJs

some code

Reactive Forms

Router Reactive Parts 

Angular Optimization

What could be faster

  • onPush Strategy
  • detach CD
  • AOT compilation
  • Lazy loding (+preloading)
  • SSR
  • ServiceWorkers

Zone.js

Async operations

  • Events
  • XMLHttpRequests
  • Timers

How Angular got known?

 setTimeout(() => {
      this.name = 'Bob';
}, 1000);

Zones!

live coding

ngZone

this.zone.run(() => {
    
});
this.zone.runOutsideAngular(() => {
    
});

Angular Tools

Angular Tools

Service Workers

What are Service Workers?

  • can't access the DOM directly
  • control how network requests from your page
  • It's terminated when not in use (no own state)
  • extensive use of promises
  • HTTPS required
  • Reliability
  • Performance
  • Push Notifications

SW Life Cycle

Install with AngularCli

  • ng set apps.0.serviceWorker=true
  • npm install @angular/service-worker
  • index.html
  • sw bundle to dist
  • ngsw-manifest.json

Install with Webpack

  • index.html
  • sw bundle to dist
  • ngsw-manifest.json

More to read

Angular Master Class @

By Stepan Suvorov

Made with Slides.com

Angular Master Class @

  • 1,367

More from Stepan Suvorov