The Angular Platform
ng-fukuoka #1
@laco0416
about me
- Suguru Inatomi
- Angular Contributor
- ng-japan Organizer
- grad. from Kurume NCT
What's Angular?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437343/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/2903788/dizzy-face.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437398/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437453/pasted-from-clipboard.png)
Transit Views
Routing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437463/pasted-from-clipboard.png)
Angular Router
- URL-Component Mapping
- Guard & Resolve
- Nesting
- Lazy-Loading
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437469/pasted-from-clipboard.png)
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?)
-
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() { ... }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437343/pasted-from-clipboard.png)
Side Projects
Angular CLI
- Scaffold Angular project
- Generate code
- Debug
- Test
- Lint
- Deploy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919399/pasted-from-clipboard.png)
Augury
- Chrome Extension for Angular Debugging
- Open Source
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919472/pasted-from-clipboard.png)
Angular Material
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437510/pasted-from-clipboard.png)
Angular Mobile Toolkit
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919413/pasted-from-clipboard.png)
- Angular App => PWA
- @angular/app-shell
- @angular/service-worker
- "Automatic Progressive Web Apps"
- "Angular on Mobile"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437343/pasted-from-clipboard.png)
Angular Compiler
Compilation
Source
???
Application
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3321310/pasted-from-clipboard.png)
AngularConnect 2016
AoT Compilation
- ng build --aot
- For Performance
- Bootstrap Time
- Download Size
-
For Debugging
-
Detect errors at build-step
-
AngularConnect 2016
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3321314/pasted-from-clipboard.png)
For templates
AngularConnect 2016
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3321321/pasted-from-clipboard.png)
For templates
Language Service
Angular Language Service
- VSCode Plugin (Official)
- WebStorm (Built-in)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919697/pasted-from-clipboard.png)
@angular/language-service
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437343/pasted-from-clipboard.png)
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)
- For Express.js
- universal.angular.io: DEPRECATED
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437343/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3437343/pasted-from-clipboard.png)
Missing piece?
Documentation
angular.io
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919733/pasted-from-clipboard.png)
angular.io as a docs
- Tutorial
- Fundamentals
- Techniques
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919870/pasted-from-clipboard.png)
"The Web has moved.
Frameworks must move"
Keep Learning
Keep an eye
on changes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919902/pasted-from-clipboard.png)
Watch CHANGELOG
Read Release Note
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919911/pasted-from-clipboard.png)
Read Release Note
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3920296/pasted-from-clipboard.png)
Join communities
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3919915/pasted-from-clipboard.png)
Summary
- Angular Features
- View Rendering
- Routing
- AJAX
- And More
- Follow the style guide
- CLI is Best Practice ALWAYS
- Learn Modern Web First
Thanks
The Angular Platform
By Suguru Inatomi
The Angular Platform
ng-fukuoka #1
- 4,491