Things Angular
will/won't do

@laco0416

about me

  • @laco0416
  • TOPGATE, Inc.
  • Angular 2 Contributor
  • ng-japan Organizer

What's Angular?

What Angular will do?

What's the Full-Stack?

Render Views

Data Model

View

Rendering

Data Model

View

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

Watch model's change

Change Detection

Transit Views

Routing

Angular Router

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

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

Angular Material

Angular Animations

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

Dependency Injection

NgModule

Injectable

Token(Dependency)

Instance

Injector

Provider

NgModule

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

Token

Instance

Injectable

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

Token

Instance

Injector

providers: [MyService]

new MyService()

{
  MyService: myService
}

Injectable

constructor(
  myService: MyService
)

Once at Bootstrap

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!

Summary

  • Angular Features
    • View Rendering
    • Routing
    • AJAX
    • And More
  • Angular DOES NOT enforce ANY data architecture

Thanks

Things Angular will/won't do

By Suguru Inatomi

Things Angular will/won't do

  • 2,325