The Angular Platform

ng-fukuoka #1

@laco0416

about me

• Suguru Inatomi
• Angular Contributor
• ng-japan Organizer
• grad. from Kurume NCT

What's Angular?

What Angular will do?

What's the Full-Stack?

Render Views

Data Model

View

Data Model

View

@Component({
  template: "<h1>{{title}}</h1>"
})
class MyComponent {
  title = "Hello!";
}

<h1>Hello!</h1>

Watch model's change

Change Detection

https://blog.thoughtram.io//angular/2016/02/22/angular-2-change-detection-explained.html

https://blog.thoughtram.io//angular/2016/02/22/angular-2-change-detection-explained.html

Transit Views

Routing

http://slides.com/gerardsans/ngpoland-amazing-ng2-router#/4/3

Angular Router

• URL-Component Mapping
• Guard & Resolve
• Nesting
• Lazy-Loading

http://slides.com/gerardsans/ngpoland-amazing-ng2-router#/8/5

Access to Server

AJAX

@Injectable()
export class HeroService {
  constructor (private http: Http) {}

  getHeroes (): Observable<Hero[]> {
    return this.http.get("/api/heroes")
                    .map(resp => resp.json());
  }
}

Http Service

Angular Http

• Wrap XHR/JSONP
• Return Observable
  • Lazy-Execution
  • Aborting
  • Multi-Responses

@angular/http/client

• coming soon (4.3?)
  • Pull Request
• Brand-new Http API
  • Interceptor
  • Progress Event
  • Easy to test

Angular Animations

@Component({
  animations: [
    trigger("visibility", [
      state("shown", style({ opacity: 1 })), 
      state("hidden", style({ opacity: 0 })),
      transition("* => *", animate(".5s"))
    ])
  ]
})
class MyComponent() { ... }

Side Projects

Angular CLI

• Scaffold Angular project
• Generate code
• Debug
• Test
• Lint
• Deploy

http://cli.angular.io

Augury

• Chrome Extension for Angular Debugging
• Open Source

https://augury.angular.io

Angular Material

http://material.angular.io

Angular Mobile Toolkit

http://mobile.angular.io

• Angular App => PWA
  • @angular/app-shell
  • @angular/service-worker
• "Automatic Progressive Web Apps"
• "Angular on Mobile"

Angular Compiler

Compilation

Source

AoT Compilation

• ng build --aot
• For Performance
  • Bootstrap Time
  • Download Size

• For Debugging

  • Detect errors at build-step

Language Service

Angular Language Service

• VSCode Plugin (Official)
• WebStorm (Built-in)

@angular/language-service

Angular Universal

Server-Side Angular

@angular/platform-server

• Render Angular apps on Server
  • renderModule / renderModuleFactory
  • ≒ bootstrapModule / bootstrapModuleFactory

Angular Universal

• platform-server Wrappers
  • For Express.js
    • @nguniversal/express-engine
  • For ASP.Net Core
    • @nguniversal/aspnetcore-engine
  • For Hapi (WIP)
• universal.angular.io: DEPRECATED

angular/universal

Dependency Injection

NgModule

NgModule

@NgModule({
  providers: [ 
    MyService,
    { provide: MyService, useClass: MyService },
    { provide: MyService, useValue: new MyService() },
    { provide: MyService, useFactory: () => new MyService() },
  ],
})
class AppModule {}

Injectable

@Component({
  selector: "my-component"
})
class MyComponent {
  constructor(myService: MyService) {
  }
}

Token

Instance

Injector

providers: [MyService]

new MyService()

{
  MyService: myService
}

Injectable

constructor(
  myService: MyService
)

Missing piece?

Documentation

angular.io

http://angular.io

angular.io as a docs

• Tutorial
• Fundamentals
  • https://angular.io/guide/cheatsheet
• Techniques
  • https://angular.io/guide/styleguide
• API References

angular.io as an app

• Built on Latest Angular
  • Angular Material
  • Angular Mobile Toolkit
• Angular PWA
• Source Code
  • angular/angular: /aio

How to learn Angular?

• ES2015+
• TypeScript
• RxJS / Observables
• (Service Worker)
• (webpack)
• (Component Design)

Required Knowledges

Angular << Modern Web

Understand the Web

"The Web has moved.

Frameworks must move"

Martin Probst - Awesome Productivity with Angular 2 - YouTube

Keep Learning

Keep an eye

on changes

Watch CHANGELOG

Read Release Note

angularjs.blogspot.com

Read Release Note

ngjapan.blogspot.jp

Join communities

slack-invite.ngjapan.org

Summary

• Angular Features
  • View Rendering
  • Routing
  • AJAX
  • And More
• Follow the style guide
  • CLI is Best Practice ALWAYS
• Learn Modern Web First

Thanks