nach oben

2022 | Buch

Pro Angular

Build Powerful and Dynamic Web Apps

verfasst von: Adam Freeman

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Inhaltsverzeichnis

Über dieses Buch

Welcome to this one-stop shop for learning Angular. Pro Angular 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.

Angular is an open-source JavaScript library maintained by Google. It has many excellent options when it comes to server-side development and is used in some of the largest and most complex web applications in the world to enhance HTML in the browser. Its cornerstone is the ability to create applications that are extendable, maintainable, testable, and standardized. Knowing Angular’s foundations and understanding its applications is an asset in any developer toolbox.

The fifth edition of this popular guide explains how to get the most from Angular, presenting the range of benefits it can offer. You will begin learning how to use Angular in your projects, starting with the nuts-and-bolts concepts, and progressing 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

Access accompanying online files for Angular 13 and 14 (when it is released)Create rich and dynamic web app clients using AngularTap into some of the best aspects of server-side developmentKnow when to use Angular and when to seek an alternativeUse the ng tools to create and build an Angular projectExtend and customize AngularTake advantage of popular component libraries

Who 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, Staff Architect, Upfront Health Care

“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

Inhaltsverzeichnis

Frontmatter

Getting Ready

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. Jumping Right In

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. In Chapters 5–8, 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. Primer, Part 1

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 overview of HTML, introduce the basics of JavaScript and TypeScript, and give you the foundation you need to understand the examples in the rest of the book, continuing with more advanced features in Chapter 4. If you are already familiar with HTML and TypeScript, you can jump right to Chapter 5, where I use Angular to create a more complex and realistic application.

Adam Freeman

Chapter 4. Primer, Part 2

Abstract

In this chapter, I continue to describe the basic features of TypeScript and JavaScript that are required for Angular development and briefly touch on the RxJS package, which is used extensively by Angular and is required for some advanced features.

Adam Freeman

Chapter 5. 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 6. SportsStore: Orders and Checkout

Abstract

In this chapter, I continue adding features to the SportsStore application that I created in Chapter 5. 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 7. 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 8. 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

Working with Angular

Frontmatter

Chapter 9. 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 10. 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 10-1 puts data bindings in context.

Adam Freeman

Chapter 11. 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 11-1 puts the built-in template directives in context.

Adam Freeman

Chapter 12. 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 12-1 puts events and forms in context.

Adam Freeman

Chapter 13. 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 14, 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 15.

Adam Freeman

Chapter 14. 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 13, 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 14-1 puts structural directives in context.

Adam Freeman

Chapter 15. 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 using templates.

Adam Freeman

Chapter 16. 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 16-1 puts pipes in context.

Adam Freeman

Chapter 17. 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 18, I introduce some more advanced features that Angular provides for service. Table 17-1 puts services in context.

Adam Freeman

Chapter 18. 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 18-1 puts providers in context.

Adam Freeman

Chapter 19. 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 19-1 puts modules in context.

Adam Freeman

Advanced Angular Features

Frontmatter

Chapter 20. 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 19, 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 21. Using the Forms API, Part 1

Abstract

In this chapter, I describe the Angular forms API, which provides an alternative to the template-based approach to forms introduced in Chapter 12. The forms API is a more complicated way of creating forms, but it allows fine-grained control over how forms behave, how they respond to user interaction, and how they are validated. Table 21-1 puts the forms API in context.

Adam Freeman

Chapter 22. Using the Forms API, Part 2

Abstract

In this chapter, I continue to describe the Angular forms API, explaining how to create form controls dynamically and how to create custom validation. Table 22-1 summarizes the chapter.

Adam Freeman

Chapter 23. Making HTTP Requests

Abstract

All the examples since Chapter 9 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 23-1 puts HTTP requests in context.

Adam Freeman

Chapter 24. 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 openly and flexibly, with minimal coding. To support this feature, data bindings and services can be used to change the browser’s URL, allowing the user to navigate around the application.

Adam Freeman

Chapter 25. 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 Chapter 26. 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 25-1 summarizes the chapter.

Adam Freeman

Chapter 26. 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 26-1 summarizes the chapter.

Adam Freeman

Chapter 27. 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 28. Working with Component Libraries

Abstract

Component libraries are packages that contain Angular components and directives, such as buttons, tables, and layouts. Throughout this book, I have been creating custom components and directives to demonstrate Angular features, but component libraries use these same features to provide building blocks that you can use to simplify the development process.

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

Titel: Pro Angular
verfasst von: Adam Freeman
Verlag: Apress
Electronic ISBN: 978-1-4842-8176-5
Print ISBN: 978-1-4842-8175-8
DOI: https://doi.org/10.1007/978-1-4842-8176-5