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,337