Angular Essentials
Module 1: Essentials
Introduction
What you should know before?
Why Angular?
Basics of TypeScript
Decorator
@Component()
Decorator
Indicator
Decorator
Name
Decorator
Argument
Strong types
id: number;
title: string;
list: [];
Implements
class AClass {
aMethod() {}
}
class BClass implements AClass {
aMethod() {...}
bMethod() {...}
}
Architecture
Component, Bootstrap and DOM
Component
Component
Component
Component
Component
Component
Bootstrap
Component, Bootstrap and DOM
<h1>{{ title }}</h1>
<div>
<input #item>
<button (click)="onSave(item.value)">Save</button>
</div>
<list [items]="items"></list>
Directives
- Component
- Structural Directive: ngIf, ngFor and ngSwitch
- Attribute Directive
Pipes |
<p>{{ 'gomel' | uppercase}}</p>
GOMEL
Data binding
{{ }}
[ ]
( )
[()]
bind-
on-
bindon-
Dependency Injection
import { FakeService } from './fake.service.ts';
class AComponent {
constructor(private service: FakeService) {
this.service.login();
}
}
Service
import { Injectable } from '@angular/core';
@Injectable()
class FakeService {
constructor() {}
login() {...}
}
Routing
Router config
Router links
Router outlets
Router events
Naming
app.module.ts
app.component.ts
app.component.css
app.component.html
app.directive.ts
app.service.ts
app.routing.ts
app.pipe.ts
Training overview
NgModule
import { NgModule } from '@angular/core';
@NgModule({
declarations: [...],
imports: [...],
exports: [...],
providers: [...],
bootstrap: [...]
})
export class AppModule {}
Root Component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Hello!</h1>
`
})
export class AppComponent {}
app.component.ts
Root Module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
app.module.ts
Bootstrapping the module for the browser
//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
main.ts
Component metadata
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
providers: [],
template: `<h1>Hello World!</h1>`,
styles: [],
viewProviders: [],
moduleId: module.id
})
export class AppComponent {}
The component selector
# Element
selector: 'my-app' // <my-app></my-app>
# Attribute
selector: '[highlight]' // <div highlight></div>
# Class
selector: '.cool' // <div class="cool"></div>
# Not
selector: '.cool:not(div)' //<section class="cool"></section>
The component template
# Template
template: '<h1>Hi!</h1>'
# With Backstick
template: `
<div>
<input value="Name" type="text">
</div>
`
# TemplateUrl
templateUrl: './app.component.html'
Styling component
# Styles
styles: ['.primary-color{ color: red }']
# With Backstick
styles: [`
.primary-color {
color: red;
}
`]
# StyleUrls
styleUrls: ['./app.component.css', ...]
Using other components in a component
import { Component } from '@angular/core';
@Component({
selector: 'my-footer',
template: `
<div>
<h2>Bye!</h2>
</div>
`
})
export class FooterComponent {
}
Angular template syntax
- Interpolation
- Binding
- Expressions
- Conditional templating
- Template reference variables
- Template expression operators |, ?
Interpolation {{ }}
<p>{{ 10 + 5 }}</p> // 15
Nonsupported in {{ }}
- Assignments
- Newing up variable
- Chaining expressions
- Incrementing/Decrementing
Property Binding [ ]
<p>{{ name }}</p> // Angular! v4.0.1
<p [textContent]="name"></p> // Angular! v4.0.1
<img [src]="image">
Event Binding ( )
<button (click)="onClick()">Click</button>
import { Component } from '@angular/core';
@Component({
selector: 'my-item',
template: `
<button (click)="onDelete()">Delete</button>
`
})
export class MyItemComponent {
constructor() {}
onDelete() {
console.log('Deleted');
}
}
Getting data to the component with Input
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-item',
template: `
<div>{{ item }}</div>
`
})
export class MyItemComponent {
@Input item;
constructor() {}
}
<my-item [item]="..."></my-item>
Subscribing to component events with Output
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-item',
template: `
<div>{{ item }}</div>
<button (click)="onDelete()">Delete</button>
`
})
export class MyItemComponent {
@Input() item;
@Output() delete = new EventEmitter();
constructor() {}
onDelete() {
this.delete.emit(this.item);
}
}
<my-item
[item]="appItem"
(delete)="onDeleteCatch($event)">
</my-item>
Angular Essentials - Module 1: Essentials
By Shuhratbek Mamadaliyev
Angular Essentials - Module 1: Essentials
- 898