Book Image

Mastering Angular Components - Second Edition

By : Gion Kunz
Book Image

Mastering Angular Components - Second Edition

By: Gion Kunz

Overview of this book

Mastering Angular Components will help you learn how to invent, build, and manage shared and reusable components for your web projects. Angular components are an integral part of any Angular app and are responsible for performing specific tasks in controlling the user interface. Complete with detailed explanations of essential concepts and practical examples, the book begins by helping you build basic layout components, along with developing a fully functional task-management application using Angular. You’ll then learn how to create layout components and build clean data and state architecture for your application. The book will even help you understand component-based routing and create components that render Scalable Vector Graphics (SVG). Toward the concluding chapters, you’ll be able to visualize data using the third-party library Chartist and create a plugin architecture using Angular components. By the end of this book, you will have mastered the component-based architecture in Angular and have the skills you need to build modern and clean user interfaces.

Related Content you might be interested in

Current Title:

Small book image
Mastering Angular Components - Second Edition
Gion Kunz
Jul, 2018 | 402 pages
Small book image
Learning Angular
Pablo Deeleman | Aristeidis Bampakos
Sep, 2020 | 430 pages
Small book image
Learning Angular
Pablo Deeleman | Aristeidis Bampakos
Feb, 2023 | 446 pages
Small book image
Angular 2 Cookbook
Matthew Frisbie
Jan, 2017 | 464 pages
Table of Contents (12 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Component-Based User Interfaces
Component-Based User Interfaces
Thinking in components
Components – the organs of user interfaces
Angular's component architecture
Your first component
JavaScript of the future
Tools
Summary
2
Ready, Set, Go!
Ready, Set, Go!
Managing tasks
Starting from scratch
Creating a task list
The right size of components
Adding tasks
Custom UI elements
Task data service
Filtering tasks
Summary
3
Dealing with Data and State
Dealing with Data and State
Reactive programming with RxJS
HTTP client and in-memory web APIs
Immutability
Pure components
Introducing container components
Purifying our task list
Summary
4
Thinking in Projects
Thinking in Projects
Moving into projects
Creating a tabbed interface component
Building the main navigation
One editor to rule them all
Dealing with users
Building a commenting system
Summary
5
Component-Based Routing
Component-Based Routing
An introduction to the Angular router
Composition using the router
Back to the routes
Guarding our projects
Summary
6
Keeping up with Activities
Keeping up with Activities
Creating a service for logging activities
Leveraging the power of SVG
Building an interactive activity slider component
Building the activity timeline
Summary
7
Components for User Experience
Components for User Experience
Tag management
Supporting tag input
Drag and drop
Summary
8
Time Will Tell
Time Will Tell
Task details
Managing efforts
Summary
9
Spaceship Dashboard
Spaceship Dashboard
Introduction to Chartist
Projects dashboard
Creating your first chart
Visualizing open tasks
Summary
10
Putting Things to the Test
Putting Things to the Test
An introduction to Jasmine and Karma
Writing our first test
Spying on component output
Utilities to test components
Using TestBed for running Angular tests
Testing components in action
Testing component interaction
Summary
11
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Starting from scratch

Let's start out by creating a new Angular project using the Angular CLI. We'll name it mastering-angular-components:

  1. Open a console window and navigate to a proper workspace for our project. Let's use the Angular CLI to create our initial project structure:
ng new mastering-angular-components --prefix=mac
  1. After the project has been successfully created, let's move into the project folder and start serving using the ng serve command:
cd mastering-angular-components
ng serve

After following the preceding steps, you should be able to open up your browser and point it to http://localhost:4200. You should be able to see the generated application app with a welcome message saying Welcome to mac!.

It's recommended that you leave the serving mode of the CLI running all the time while in development. Since the underlying webpack will use...
Previous Section
End of Section 3
Next Section