Skip to main content
Disciplines
Automotive Business IT + Informatics Construction + Real Estate Electrical Engineering + Electronics Energy + Sustainability Insurance + Risk Finance + Banking Management + Leadership Marketing + Sales Mechanical Engineering + Materials
Events
DE
EN
Books
Journals
Topic Page
Marketing
Start single access now
Access for companies
EXTENDED SEARCH
Log in
Top

2020 | Book

Getting Ready Read chapter Read first chapter

Pro Angular 9

Build Powerful and Dynamic Web Apps

Author: Adam Freeman

Publisher: Apress

Part of: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Login to get access
insite
SEARCH

About this book

Welcome to this one-stop-shop for learning Angular 9. Pro Angular 9 is the most concise and comprehensive guide available, giving you the knowledge you need to take full advantage of this popular framework for building your own dynamic JavaScript applications. The fourth edition of this popular guide explains how to get the most from Angular 9, starting with an in-depth overview of the MVC pattern and presenting the range of benefits it can offer. From there, you will begin learning how to use Angular in your projects, starting with the nuts-and-bolts concepts, and progressing on to more advanced and sophisticated features. Each topic in this full-color book provides you with precisely enough learning and detail to be effective. In true Adam Freeman style, the most important features are given full court press treatment, while also addressing common problems and how to avoid them.
What You Will Learn:Gain a solid architectural understanding of the MVC PatternCreate rich and dynamic web app clients using Angular 9Use the ng tools to create and build an Angular projectExtend and customize AngularAcquire skills to unit test your Angular projectsWho This Book Is For:This book is for web developers who want to create rich client-side applications. Foundational knowledge of HTML and JavaScript is recommended.

"Adam's books provide a finely tuned blend of architectural overview, technical depth, and experience-born wisdom. His clear, concise writing style, coupled with project driven real world examples, make me comfortable recommending his books to a broad audience, ranging from developers working with a technology for the first time to seasoned professionals who need to learn a new skill quickly." Keith Dublin, Solution Principal, Slalom Consulting

“Adam’s books are the print version of a chat bot. His investment in learning how developers learn pays off in dividends, making this one of the most comprehensive resources available. Novices and experienced professionals alike will gain knowledge from the accessible and insightful material.”Mark Donile, Software Engineer, MS CS

Table of Contents

Frontmatter

Getting Started with Angular

Frontmatter
Chapter 1. Getting Ready
Abstract
Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a clear design pattern that emphasizes creating applications that are
Adam Freeman
Chapter 2. Your First Angular App
Abstract
The best way to get started with Angular is to dive in and create a web application. In this chapter, I show you how to set up your development environment and take you through the process of creating a basic application, starting with a static mock-up of the functionality and applying Angular features to create a dynamic web application, albeit a simple one. In Chapters 7–10, I show you how to create a more complex and realistic Angular application, but for now, a simple example will suffice to demonstrate the major components of an Angular app and set the scene for the other chapters in this part of the book.
Adam Freeman
Chapter 3. Putting Angular in Context
Abstract
In this chapter, I put Angular in context within the world of web app development and set the foundation for the chapters that follow. The goal of Angular is to bring the tools and capabilities that have been available only for server-side development to the web client and, in doing so, make it easier to develop, test, and maintain rich and complex web applications.
Adam Freeman
Chapter 4. An HTML and CSS Primer
Abstract
Developers come to the world of web app development via many paths and are not always grounded in the basic technologies that web apps rely on. In this chapter, I provide a brief primer for HTML and introduce the Bootstrap CSS library, which I use to style the examples in this book. In Chapters 5 and 6, I introduce the basics of JavaScript and TypeScript and give you the information you need to understand the examples in the rest of the book. If you are an experienced developer, you can skip these primer chapters and jump right to Chapter 7, where I use Angular to create a more complex and realistic application.
Adam Freeman
Chapter 5. JavaScript and TypeScript: Part 1
Abstract
In this chapter, I provide a quick tour of the most important basic features of the JavaScript language as they apply to Angular development. I don’t have the space to describe JavaScript completely, so I have focused on the essentials that you’ll need to get up to speed and follow the examples in this book. In Chapter 6, I describe some of the more advanced JavaScript features that you will need and some of the additional features provided by TypeScript.
Adam Freeman
Chapter 6. JavaScript and TypeScript: Part 2
Abstract
In this chapter, I describe some of the more advanced JavaScript features that are useful for Angular development. I explain how JavaScript deals with objects, including support for classes, and I explain how JavaScript functionality is packaged into JavaScript modules. I also introduce some of the features that TypeScript provides that are not part of the JavaScript specification and that I rely on for some of the examples later in the book. Table 6-1 summarizes the chapter.
Adam Freeman
Chapter 7. SportsStore: A Real Application
Abstract
In Chapter 2, I built a quick and simple Angular application. Small and focused examples allow me to demonstrate specific Angular features, but they can lack context. To help overcome this problem, I am going to create a simple but realistic e-commerce application.
Adam Freeman
Chapter 8. SportsStore: Orders and Checkout
Abstract
In this chapter, I continue adding features to the SportsStore application that I created in Chapter 7. I add support for a shopping cart and a checkout process and replace the dummy data with the data from the RESTful web service.
Adam Freeman
Chapter 9. SportsStore: Administration
Abstract
In this chapter, I continue building the SportsStore application by adding administration features. Relatively few users will need to access the administration features, so it would be wasteful to force all users to download the administration code and content when it is unlikely to be used. Instead, I am going to put the administration features in a separate module that will be loaded only when it is required.
Adam Freeman
Chapter 10. SportsStore: Progressive Features and Deployment
Abstract
In this chapter, I prepare the SportsStore application for deployment by adding progressive features that will allow it to work while offline and show you how to prepare and deploy the application into a Docker container, which can be used on most hosting platforms.
Adam Freeman

Angular in Detail

Frontmatter
Chapter 11. Understanding Angular Projects and Tools
Abstract
In this chapter, I explain the structure of an Angular project and the tools that are used for development. By the end of the chapter, you will understand how the parts of a project fit together and have a foundation on which to apply the more advanced features that are described in the chapters that follow.
Adam Freeman
Chapter 12. Using Data Bindings
Abstract
The example application in the previous chapter contains a simple template that was displayed to the user and that contained a data binding that showed how many objects were in the data model. In this chapter, I describe the basic data bindings that Angular provides and demonstrate how they can be used to produce dynamic content. In later chapters, I describe more advanced data bindings and explain how to extend the Angular binding system with custom features. Table 12-1 puts data bindings in context.
Adam Freeman
Chapter 13. Using the Built-in Directives
Abstract
In this chapter, I describe the built-in directives that are responsible for some of the most commonly required functionality for creating web applications: selectively including content, choosing between different fragments of content, and repeating content. I also describe some limitations that Angular puts on the expressions that are used for one-way data bindings and the directives that provide them. Table 13-1 puts the built-in template directives in context.
Adam Freeman
Chapter 14. Using Events and Forms
Abstract
In this chapter, I continue describing the basic Angular functionality, focusing on features that respond to user interaction. I explain how to create event bindings and how to use two-way bindings to manage the flow of data between the model and the template. One of the main forms of user interaction in a web application is the use of HTML forms, and I explain how event bindings and two-way data bindings are used to support them and validate the content that the user provides. Table 14-1 puts events and forms in context.
Adam Freeman
Chapter 15. Creating Attribute Directives
Abstract
In this chapter, I describe how custom directives can be used to supplement the functionality provided by the built-in ones of Angular. The focus of this chapter is attribute directives, which are the simplest type that can be created and that change the appearance or behavior of a single element. In Chapter 16, I explain how to create structural directives, which are used to change the layout of the HTML document. Components are also a type of directive, and I explain how they work in Chapter 17.
Adam Freeman
Chapter 16. Creating Structural Directives
Abstract
Structural directives change the layout of the HTML document by adding and removing elements. They build on the core features available for attribute directives, described in Chapter 15, with additional support for micro-templates, which are small fragments of contents defined within the templates used by components. You can recognize when a structural directive is being used because its name will be prefixed with an asterisk, such as *ngIf or *ngFor. In this chapter, I explain how structural directives are defined and applied, how they work, and how they respond to changes in the data model. Table 16-1 puts structural directives in context.
Adam Freeman
Chapter 17. Understanding Components
Abstract
Components are directives that have their own templates, rather than relying on content provided from elsewhere. Components have access to all the directive features described in earlier chapters and still have a host element, can still define input and output properties, and so on. But they also define their own content.
Adam Freeman
Chapter 18. Using and Creating Pipes
Abstract
Pipes are small fragments of code that transform data values so they can be displayed to the user in templates. Pipes allow transformation logic to be defined in self-contained classes so that it can be applied consistently throughout an application. Table 18-1 puts pipes in context.
Adam Freeman
Chapter 19. Using Services
Abstract
Services are objects that provide common functionality to support other building blocks in an application, such as directives, components, and pipes. What’s important about services is the way that they are used, which is through a process called dependency injection. Using services can increase the flexibility and scalability of an Angular application, but dependency injection can be a difficult topic to understand. To that end, I start this chapter slowly and explain the problems that services and dependency injection can be used to solve, how dependency injection works, and why you should consider using services in your own projects. In Chapter 20, I introduce some more advanced features that Angular provides for service. Table 19-1 puts services in context.
Adam Freeman
Chapter 20. Using Service Providers
Abstract
In the previous chapter, I introduced services and explained how they are distributed using dependency injection. When using dependency injection, the objects that are used to resolve dependencies are created by service providers, known more commonly as providers. In this chapter, I explain how providers work, describe the different types of providers available, and demonstrate how providers can be created in different parts of the application to change the way that services behave. Table 20-1 puts providers in context.
Adam Freeman
Chapter 21. Using and Creating Modules
Abstract
In this chapter, I describe the last of the Angular building blocks: modules. In the first part of the chapter, I describe the root module, which every Angular application uses to describe the configuration of the application to Angular. In the second part of the chapter, I describe feature modules, which are used to add structure to an application so that related features can be grouped as a single unit. Table 21-1 puts modules in context.
Adam Freeman

Advanced Angular Features

Frontmatter
Chapter 22. Creating the Example Project
Abstract
Throughout the chapters in the previous part of the book, I added classes and content to the example project to demonstrate different Angular features and then, in Chapter 21, introduced feature modules to add some structure to the project. The result is a project with a lot of redundant and unused functionality, and for this part of the book, I am going to start a new project that takes some of the core features from earlier chapters and provides a clean foundation on which to build in the chapters that follow.
Adam Freeman
Chapter 23. Using Reactive Extensions
Abstract
Angular has a lot of features, but the one that grabs the most attention is the way that changes propagate through the application so that filling in a form field or clicking a button causes immediate updates to the application state. But there are limitations to the changes that Angular can detect, and some features require working directly with the library that Angular uses to distribute updates throughout an application. This library is called Reactive Extensions, also known as RxJS.
Adam Freeman
Chapter 24. Making HTTP Requests
Abstract
All the examples since Chapter 11 have relied on static data that has been hardwired into the application. In this chapter, I demonstrate how to use asynchronous HTTP requests, often called Ajax requests, to interact with a web service to get real data into an application. Table 24-1 puts HTTP requests in context.
Adam Freeman
Chapter 25. Routing and Navigation: Part 1
Abstract
The Angular routing feature allows applications to change the components and templates that are displayed to the user by responding to changes to the browser’s URL. This allows complex applications to be created that adapt the content they present in an open and flexible way, with minimal coding. To support this feature, there are data bindings and services that can be used to change the browser’s URL, allowing the user to navigate around the application.
Adam Freeman
Chapter 26. Routing and Navigation: Part 2
Abstract
In the previous chapter, I introduced the Angular URL routing system and explained how it can be used to control the components that are displayed to the user. The routing system has a lot of features, which I continue to describe in this chapter and in Chapter 27. This emphasis in this chapter is about creating more complex routes, including routes that will match any URL, routes that redirect the browser to other URLs, routes that navigate within a component, and routes that select multiple components. Table 26-1 summarizes the chapter.
Adam Freeman
Chapter 27. Routing and Navigation: Part 3
Abstract
In this chapter, I continue to describe the Angular URL routing system, focusing on the most advanced features. I explain how to control route activation, how to load feature modules dynamically, and how to use multiple outlet elements in a template. Table 27-1 summarizes the chapter.
Adam Freeman
Chapter 28. Using Animations
Abstract
In this chapter, I describe the Angular animation system, which uses data bindings to animate HTML elements to reflect changes in the state of the application. In broad terms, animations have two roles in an Angular application: to emphasize changes in content and to smooth them out.
Adam Freeman
Chapter 29. Angular Unit Testing
Abstract
In this chapter, I describe the tools that Angular provides for unit testing components and directives. Some Angular building blocks, such as pipes and services, can be readily tested in isolation using the basic testing tools that I set up at the start of the chapter. Components (and, to a lesser extent, directives) have complex interactions with their host elements and with their template content and require special features. Table 29-1 puts Angular unit testing in context.
Adam Freeman
Backmatter
Metadata
Title
Pro Angular 9
Author
Adam Freeman
Copyright Year
2020
Publisher
Apress
Electronic ISBN
978-1-4842-5998-6
Print ISBN
978-1-4842-5997-9
DOI
https://doi.org/10.1007/978-1-4842-5998-6

Premium Partner

    Image Credits