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 Client

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

Angular CLI

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

http://cli.angular.io

Angular Material

http://material.angular.io

Angular Animations

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

Dependency Injection

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
)

Dependency Injection

• Create Injector from Providers at bootstrapping
• (Re)Use instances with Token

Missing piece?

Data Architecture

Angular DOES NOT have
any data architecture

MVC? MVP? MVVM? Flux? Redux?
You can do anything!