Angular2 applied

1.1
1.2
1.3
1.4
1.5
1.6
1.7
1.8
1.9
1.10
Table of Contents
Introduction
Hello Angular 2
Tooling
Components
Templates
Services
Routing
Forms
Server Side Communication
Testing
1

Angular 2 Applied
This is a step by step guide on how to apply the latest Angular 2 techniques to
build a non-trivial application.
Introduction
2

Hello Angular 2
Hello Angular 2
3

Tooling
Build the Project
npm install -g angular-cli
ng g ng2-applied
cd ng2-applied
npm install
ng serve
Update app.css
body {
background-color: whitesmoke;
}
.content .mdl-layout__header {
background-color: #263238;
}
.content .mdl-spinner {
margin: 0 auto;
}
.mdl-navigation__link--icon>.material-icons {
margin-right: 8px;
margin-top: 8px;
}
.page-content {
max-width: 1200px;
Tooling
4

width: 100%;
margin: 0 auto;
padding: 0;
}
.item-card.mdl-card {
width: 100%;
min-height: inherit;
cursor: pointer;
}
.item-card .mdl-textfield {
width: 100%;
}
.item-card .mdl-textfield__input {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .12);
display: block;
font-size: 16px;
margin: 0;
padding: 4px 0;
width: 100%;
background: 0 0;
text-align: left;
color: inherit;
}
.item-card label {
font-size: 12px;
font-weight: bold;
}
*:focus {
outline: none;
}
Update app.component.ts
Tooling
5

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 2 Applied';
}
Update app.component.html
<div class="content mdl-layout mdl-js-layout mdl-layout--fixed-h
eader">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">{{title}}</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation"></nav>
</div>
</header>
<main class="mdl-layout__content page-content">
<h2 style="text-align: center;">Hello Angular 2 applied!</h2>
</main>
</div>
Additional Steps
npm install -g json-server
Tooling
6

"scripts": {
"start": "concurrently "npm run server" "ng serve"",
"server": "json-server --watch server/api/db.json",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
}
{
"widgets": [
{
"id": 1,
"img": "boxer.png",
"name": "Widget 1",
"description": "This is a description",
"featured": false
},
{
"id": 2,
"img": "dachshund.png",
"name": "Widget 2",
"description": "This is a description!",
"featured": true
},
{
"id": 3,
"img": "hound.png",
"name": "Widget 3",
"description": "This is a lovely widget",
"featured": false
}
]
}
Tooling
7

Components
Create widgets.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-widgets',
templateUrl: './widgets.component.html',
styleUrls: ['./widgets.component.css']
})
export class WidgetsComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
Create widgets.component.html
<div class="mdl-grid items">
<div class="mdl-cell mdl-cell--61-col">
<div class="item-card mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Widgets</h2>
</div>
<div class="mdl-card__supporting-text">
Pending.
</div>
</div>
</div>
</div>
Create widgets.component.css
Components
8

.items {
padding: 20px;
}
Update app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { WidgetsComponent } from './widgets/widgets.component';
@NgModule({
declarations: [
AppComponent,
WidgetsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Components
9

eader">
<nav class="mdl-navigation"></nav>
</div>
</header>
<app-widgets></app-widgets>
</main>
</div>
Create widget.model.ts
export interface Widget {
id: number;
img?: string;
name?: string;
description?: string;
featured?: boolean;
}
Components
10

export const widgets = [
{
"id": 1,
"name": "Widget 1",
"description": "This is a description",
"featured": true
},
{
"id": 2,
"name": "Widget 2",
"description": "This is a description!",
"featured": false
},
{
"id": 3,
"name": "Widget 3",
"description": "This is a lovely widget",
"featured": false
}
];
Update widgets.component.ts
Components
11

import { Widget, widgets } from '../shared';
@Component({
})
widgets: Array<Widget> = widgets;
constructor() {}
ngOnInit() {}
}
Update widgets.component.html
<h2 class="mdl-card__title-text">Widgets</h2>
</div>
<pre>{{widgets | json}}</pre>
</div>
</div>
</div>
</div>
Create app-routing.module.ts
Components
12

import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path: '', redirectTo: '/widgets', pathMatch: 'full' },
{path: 'widgets', component: WidgetsComponent},
{path: '**', redirectTo: '/widgets', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class Ng2RestAppRoutingModule { }
Update app.module.ts
Components
13

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
WidgetsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
})
Update app.component.ts
export class AppComponent {
title = 'Angular 2 Applied';
links = {
widgets: ['/widgets']
};
}
Components
14

eader">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" [routerLink]="links.widg
ets">Widgets</a>
</nav>
</div>
</header>
<router-outlet></router-outlet>
</main>
</div>
Components
15

Templates
update widgets.component.html
<div>
<h2 class="mdl-card__title-text">Name</h2>
</div>
Description
</div>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button
mdl-js-ripple-effect">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<h2 class="mdl-card__title-text">Select a Widget</h2>
</div>
Pending
</div>
</div>
</div>
</div>
ngFor
Templates
16

<div *ngFor="let widget of widgets"
class="item-card mdl-card mdl-shadow--2dp">
<div>
<h2 class="mdl-card__title-text">{{widget.name}}</h2>
</div>
{{widget.description}}
</div>
</div>
</div>
</div>
Property Binding
TODO: Complete
Event Binding
selectedWidget: Widget;
constructor() {}
ngOnInit() {}
selectWidget(widget: Widget) {
this.selectedWidget = widget;
}
}
Templates
17

<h2 class="mdl-card__title-text">Select a Widget</h2>
</div>
<pre>{{selectedWidget | json}}</pre>
</div>
</div>
</div>
constructor() {}
ngOnInit() {}
resetWidget() {
let emptyWidget: Widget = {id: null, name: '', description:
''};
this.selectedWidget = emptyWidget;
}
selectWidget(widget: Widget) {
this.selectedWidget = widget;
}
deleteWidget(widget: Widget) {
this.widgets.splice(this.widgets.indexOf(widget), 1);
this.resetWidget();
}
}
Templates
18

<button (click)="deleteWidget(widget); $event.stopPropagation();"
class="mdl-button mdl-button--icon mdl-js-button mdl-js-
ripple-effect">
<i class="material-icons">close</i>
</button>
Two-way Binding
TODO: Complete
ngIf
<h2 class="mdl-card__title-text" *ngIf="selectedWidget">{{sele
ctedWidget.name}}</h2>
<h2 class="mdl-card__title-text" *ngIf="!selectedWidget">Selec
t a Widget</h2>
</div>
ngSwitch
TODO: Complete
Safe Navigation Operator
Templates
19

<h2 class="mdl-card__title-text" *ngIf="selectedWidget">{{se
lectedWidget.name}}</h2>
<h2 class="mdl-card__title-text" *ngIf="!selectedWidget">Sel
ect a Widget</h2>
</div>
<h6>{{selectedWidget.description}}</h6>
</div>
</div>
<h2 class="mdl-card__title-text" *ngIf="selectedWidget">{{se
lectedWidget.name}}</h2>
<h2 class="mdl-card__title-text" *ngIf="!selectedWidget">Sel
ect a Widget</h2>
</div>
<h6>{{selectedWidget?.description}}</h6>
</div>
</div>
Templates
20

Services
import { Injectable } from '@angular/core';
import { Widget, widgets } from './widget.model';
@Injectable()
export class WidgetsService {
widgets: Widget[] = widgets;
constructor() {}
loadWidgets() {
return this.widgets;
}
}
export { WidgetsService } from './widgets.service';
export { Widget } from './widget.model';
Services
21

import { WidgetsService } from './shared';
@NgModule({
declarations: [
AppComponent,
WidgetsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [WidgetsService],
})
Services
22

import { WidgetsService, Widget } from '../shared';
@Component({
})
widgets: Array<Widget>;
constructor(
private widgetsService: WidgetsService
) {}
ngOnInit() {
this.widgets = this.widgetsService.loadWidgets();
}
//...
}
Services
23

@Injectable()
export class WidgetsService {
widgets: Widget[] = widgets;
constructor() {}
loadWidgets() {
return this.widgets;
}
//...
this.widgets = this.widgets.filter(w => w.id !== widget.id);
return widget;
}
}
Services
24

widgets: Array<Widget>;
constructor(
private widgetsService: WidgetsService
) {}
ngOnInit() {
}
//...
this.widgetsService.deleteWidget(widget);
// Refresh the widgets collection
// Generally, we would want to wait for the result of `widge
tsService.deleteWidget`
// before resetting the current widget.
this.resetWidget();
}
}
loadWidget(id) {
return this.widgets.find(widget => widget.id === +id);
}
saveWidget(widget: Widget) {
return (widget.id) ? this.updateWidget(widget) : this.createWi
dget(widget);
}
Services
25

createWidget(widget: Widget) {
this.widgets = [...this.widgets, widget];
return widget;
}
updateWidget(widget: Widget) {
this.widgets = this.widgets.map(w => {
return w.id === widget.id ? widget : w;
});
return widget;
}
Services
26

29

Angular2 applied

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to Angular2 applied

Similar to Angular2 applied (20)

Recently uploaded

Recently uploaded (17)

Angular2 applied