Mastering Angular Components
Build component-based user interfaces using Angular, 2nd Edition
Gion Kunz
- 402 Seiten
- English
- ePUB (handyfreundlich)
- Über iOS und Android verfügbar
Mastering Angular Components
Build component-based user interfaces using Angular, 2nd Edition
Gion Kunz
Über dieses Buch
Develop modern user interfaces using Angular 6 and its component-based architecture.
Key Features
- Build better web applications with highly scalable concepts using Angular
- Learn new ways to design your web applications
- Build a fully functional web application that lets you tackle real-world user interface problems using Angular components
Book Description
Angular framework embraces a mature user interface (UI) component architecture, a powerful tool when developing scalable application interfaces. The simple and deterministic design of Angular components supports you in building large and scalable component-based applications.
Mastering Angular Components covers a new holistic way of thinking about UI development, and helps you discover the power of Angular 6 components through various examples. The book starts with an introduction to component-based user interfaces and how Angular 6 manages this concept. Following a step-by-step approach, you will build a fully functional task-management application using Angular. You'll start with basic layout components, adding some core task-management components before completing the first draft of your application. You will then move on to working through a refactoring exercise in order to learn how to enhance the way you deal with states and data. Once you have got to grips with all this, you will study how to make use of the Angular router within your application.
By the end of this book, you will be able to constantly refine the functionality of your application and create components that render SVG graphics, add a time-tracking feature, visualize data using third-party library Chartist, and even create a plugin architecture using Angular components.
What you will learn
- Use TypeScript to create Angular 6 components
- Leverage component composition to solve complex UI requirements
- Build an architecture using pure components and container components
- Explore the basics of RxJS observable streams and use them to build your application reactively
- Communicate between components using child queries
- Implement the Angular router to make your application navigable
- Build reusable and dynamic graphical content using Angular components and SVG
- Integrate third-party libraries such as Moment.js and Chartist into your existing Angular application
Who this book is for
Mastering Angular Components is for you if you are an Angular developer who already has a good understanding of basic frontend web technologies such as JavaScript, HTML, and CSS.
Häufig gestellte Fragen
Information
Thinking in Projects
- Introduction of a new project component and additional container components
- Two new RxJS operators called switchMap and take
- Creating a tabbed interface component for project detail navigation
- Using content projection to create a navigation UI component
- Using contenteditable to create an in-place editor
- Using @HostBinding and @HostListener to bind component members to host element properties and events
- Obtaining view elements using the @ViewChild decorator
- Performing DOM operations by using the ElementRef DOM abstraction
- Creating a commenting system that allows us to gather user comments in different areas of our application
- Summarizing a simple pipe to format relative time intervals using the third-party library Moment.js
- Creating an editor that enables users to edit text fields in-place
Moving into projects
Project service
export interface Task {
readonly id?: number;
readonly projectId?: number;
readonly title: string;
readonly done: boolean;
}
export type TaskListFilterType = 'all' | 'open' | 'done';
export interface Project {
readonly id?: number;
readonly title: string;
readonly description: string;
}
import {InMemoryDbService} from 'angular-in-memory-web-api';
import {Project, Task} from './model';
export class Database implements InMemoryDbService {
createDb() {
const projects: Project[] = [
{id: 1, title: 'My first project', description: 'This is your first project.'},
{id: 2, title: 'My second project', description: 'This is your second project.'}
];
const tasks: Task[] = [
{id: 1, projectId: 1, title: 'Task 1', done: false},
{id: 2, projectId: 1, title: 'Task 2', done: false},
{id: 3, projectId: 1, title: 'Task 3', done: true},
{id: 4, projectId: 1, title: 'Task 4', done: false}
];
return {projects, tasks};
}
}
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {BehaviorSubject} from 'rxjs';
import {map} from 'rxjs/operators';
import {Task} from '../model';
@Injectable()
export class TaskService {
…
getProjectTasks(projectId: number) {
return this.tasks
.asObservable()
.pipe(
map((tasks) => tasks.filter((task) => task.projectId === projectId))
);
}
}
ng generate service --spec false project/project
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {BehaviorSubject, Observable, combineLatest} from 'rxjs';
import {map} from 'rxjs/operators';
import {Project} from '../model';
@Injectable()
export class ProjectService {
private projects = new BehaviorSubject<Project[]>([]);
private selectedProjectId = new BehaviorSubject<number>(1);
private selectedProject: Observable<Project>;
constructor(private http: HttpClient) {
this.loadProjects();
this.selectedProject = combineLatest(this.projects, this.selectedProjectId)
.pipe(
map(([projects, selectedProjectId]) =>
projects.find((project) => project.id === selectedProjectId)
)
);
}
private loadProjects() {
this.http.get<Project[]>('/api/projects')
.subscribe((projects) => this.projects.next(projects));
}
selectProject(id: number) {
this.selectedProjectId.next(id);
}
getSelectedProject() {
return this.selectedProject;
}
}
- projects: BehaviourSubject<Project[]>
The projects member behaviour subject is emitting our whole project list once loaded from our database. This subject is the basis for all operations within our service. - selectedProjectId: BehaviourSubject<number>
Since we will need to know which of the projects is currently selected within our application, we need to store this information in our service. We're using a behaviour subject for emitting the currently selected project ID. This allows us to simply emit a project ID through selectedProjectId if we wish to select a given project. - selectedProject: Observable<Project>
The selectedProject observable will always emit the currently selected project. We'll make use of combineLatest to make sure if either projects or selectedProjectId emits a change. We will re-emit the updated, selected project through the selectedProject observable stream.
…
import {ProjectService} from './proje...