with Angular 4 & Material 2
Doguhan Uluca
Pre-Order & Save 50%
Template and Styles (View)
Component / Director (ViewModel)
Router / Module (Controller)
Services (models, http, redux, logic)
Back-end or APIs
Name | CLI Command |
---|---|
Component | ng g component my-new-component |
Directive | ng g directive my-new-directive |
Pipe | ng g pipe my-new-pipe |
Service | ng g service my-new-service |
Class | ng g class my-new-class |
Guard | ng g guard my-new-guard |
Interface | ng g interface my-new-interface |
Enum | ng g enum my-new-enum |
Module | ng g module my-module |
app.module.ts
rootRouter
services
pipes
directives
/a: default
/master
/detail
/b/...
/c
childRouter
/d
/e
/f
Name | Syntax | Data direction |
---|---|---|
Interpolation Property Attribute Class Style |
{{expression}} [target]="expression" bind-target="expression" |
One-way from data source to view target |
Event | (target)="statement" on-target="statement" |
One-way from view target to data source |
Two-way | [(target)]="expression" binding-target="expression" |
Two-way |
Name | CLI Command |
---|---|
Structural | *ngIf, *ngFor, *ngSwitch |
Attribute | [class], [style], [(model)] |
Name | Usage |
---|---|
Date | {{date_value | date[:format]}} |
Text Transformation | {{value | uppercase}} {{value | lowercase}} {{value | titlecase }} |
Decimal | {{number | number[:digitInfo]}} |
Percent | {{number | percent[:digitInfo]}} |
Currency | {{number | currency[:currencyCode[:symbolDisplay[:digitInfo]]]}} |
... programming with asynchronous data streams
Event Source
Event Handler
user clicks
window.alert('Are you sure?')
onClick='confirmSave()'
updated data
fetchDetails()
updateCache()
showToastMessage()
Event Source
mouse clicks
filter(x >= 2)
throttle(250ms)
map(list.length)
<li *ng-for="i in list | async">
window.alert('Are you sure?')
Slides
Follow