what you know as JS
what you SHOULD know as JS
TypeScript
plain ol' javascript
supported by all browsers
modules
classes
()=> // keeps 'this' in your function
`Hello ${name}`
Promise
...
OR ES2015
decorators
typings
injection
Currently ES5 completely supported
ES6 partially supported
Babel & Traceur transpilers
<bw-button
color = "white"
[icon] = "buttonIcon"
[label] = "buttonLabel"
(click) = "delete($event)"
[(isProcessing)] = "buttonIsProcessing">
</bw-button>
@Component({
selector: 'bw-button',
templateUrl: 'button.component.html',
styleUrls: ['button.component.scss'],
})
export class ButtonComponent implements OnInit {
@Input() color: string;
@Input() icon: string;
@Input() label: string;
@Input() isProcessing: boolean = false;
@Output() isProcessingChange: EventEmitter<boolean> = EventEmitter<boolean>();
constructor() {}
ngOnInit() {}
}
<div
bwCollapsible
[(isCollapsed)] = "isCollapsed"
#collapsible>
This is content
</div>
<span
(click) = "collapsible.toggleCollapse()">
toggle
</span>
@Directive({
selector: '[bwCollapsible]',
})
export class CardContentDirective {
@Input() isCollapsed: boolean = false;
@Output() isCollapsedChange: EventEmitter<boolean> = EventEmitter<boolean>();
toggleCollapse(value: boolean){
this.isCollapsedChange.emit(value);
}
}
TitleService
ApiService
@Injectable()
export class TitleService {
private currentTitle: string;
private titleSubject: Subject<string> = new Subject<string>();
private title$: Observable<string> = this.titleSubject.asObservable();
constructor(
private translateService: TranslateService,
private docTitle: Title
) {
// on first load wait for language to be loaded
// translation language parameter seems to have no effect on the result
this.translateService.getTranslation('en')
.subscribe(lang => this.setTitle(this.currentTitle));
this.title$
.subscribe(title => this.translate(title));
}
setTitle(title: string) {
this.currentTitle = title;
this.titleSubject.next(title);
}
private translate(title: string) {
this.translateService
.get(title)
.first()
.subscribe(str => this.docTitle.setTitle(str));
}
}
MV*
two-way data binding
services
providers
factories
values
controllers
$scope
directives
pipes
lousy router
modules
MV*
one-way data binding
reactive programming
services
components
directives
pipes
proper router
modules
buyOrangeJuice();
buyOrangeJuice(onOrangeJuiceBought);
onOrangeJuiceBought = function(){ ... }
juicePromise = Promise((resolve, reject) => {...});
juicePromise
.then(
onOrangeJuiceBought,
onOrangeJuiceOutOfStock
);
onOrangeJuice = function(){ ... }
onOrangeJuiceOutOfStock = function(){ ... }
juiceSubject = new Subject<any>();
juice$ = Observable.from(juiceSubject);
juice$
.subscribe((result) => {...});
simulateOrangeJuiceFetch = function(juiceResult){
juiceSubject.next(juiceResult);
}
Array of results that will be served on multiple times
As an array, it can be transformed
events
API response
timer
...
import { Routes, RouterModule } from '@angular/router';
export const USER_ROUTES: Routes = [
{
path: 'user',
component: UserComponent
},
];
export const userRouting: ModuleWithProviders = RouterModule.forChild(USER_ROUTES);
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const rootAppRoutes: Routes = [];
export const rootAppRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(rootAppRoutes, { useHash: true });
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
// ANGULAR
CommonModule,
// EXTERNAL
// OWN
ButtonModule,
CardModule,
DialogModule,
MapModule,
sharedRouting
],
declarations: [ IconComponent ],
providers: [ CountryService ],
exports: [
ButtonModule,
CardModule,
DialogModule,
MapModule
]
})
export class SharedModule { }
npm i angular-cli -g
ng new <projectName>
ng serve
ng generate component <path> (also directive, class, enum, pipe, service)
ng build --prod
ng github-pages:deploy
ng test
ng lint
Slower compilation
Faster rendering
Type checking for HTML vars
Lighter (no compiler code sent to client)
Faster compilation
Slower rendering
Heavier (client compiles, thus needs compiler)
Just in Time
Ahead of Time