Angular Pro 9

Bluarancio SpA nasce nel 2001 dalla fusione di tre Aziende italiane, tutte specializzate
nel settore IT con l'obiettivo di garantire servizi informatici di supporto attraverso attività
dirette o con l'ausilio dei migliori Partner tecnologici del mercato. L'esperienza maturata
da Bluarancio è nella progettazione e realizzazione di servizi a valore aggiunto
nell'ambito ICT, come: portali Internet, soluzioni di asset management evoluto, Data
Warehouse, Business intelligence, commercio elettronico, ERP, CRM e integrazione di
piattaforme B2C e B2B.

Bluarancio ha competenze approfondite e dirette su:

- Sistemi operativi: WINDOWS, UNIX/Linux, MacOS, iOS, Android.
- DBMS: ORACLE, SQL-Server, Maria DB, PostgreSQL e MySQL.
- Piattaforme: Microsoft Dynamics CRM, AX e Navision, Sharepoint, Pentaho.
Getting Ready
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:

Extendable: It is easy to figure out how even a complex Angular app works once you
understand the basics—and that means you can easily enhance applications to create
new and useful features for your users.
Maintainable: Angular apps are easy to debug and fix, which means that long-term
maintenance is simplified.
Testable: Angular has good support for unit and end-to-end testing, meaning you can
find and fix defects before your users do.
Standardized: Angular builds on the innate capabilities of the web browser without
getting in your way, allowing you to create standards-compliant web apps that take
advantage of the latest HTML and features, as well as popular tools and frameworks.

Angular is an open-source JavaScript library that is sponsored and maintained by

Google.

It has been used in some of the largest and most complex web apps around. In this
book, I show you everything you need to know to get the benefits of Angular in your own
projects.

What Do You Need to Know?

Before reading this book, you should be familiar with the basics of web development,
have an understanding of how HTML and CSS work, and have a working knowledge of
JavaScript. If you are a little hazy on some of these details, I provide refreshers for the
HTML, CSS, and JavaScript I use in this book in Chapters 5, 6, and 7. You won’t find a
comprehensive reference for HTML elements and CSS properties, though, because
there just isn’t the space in a book about Angular to cover all of HTML. What Is
the Structure of This Book?

This book is split into three parts, each of which covers a set of related topics.

Part 1: Getting Started with Angular Part 1 of this book provides the information you
need to get ready for the rest of the book. It includes this chapter and primers/refreshers
for key technologies, including HTML, CSS, and TypeScript, which Chapter 1 - Getting
Ready 4 is a superset of JavaScript used in Angular development. I also show you how
to build your first Angular application and take you through the process of building a
more realistic application, called SportsStore.
Part 2: Angular in Detail Part 2 of this book takes you through the building blocks
provided by Angular for creating applications, working through each of them in turn.
Angular includes a lot of built-in functionality, which I describe in depth, and provides
endless customization options, all of which I demonstrate.

Part 3: Advanced Angular Features Part 3 of this book explains how advanced features
can be used to create more complex and scalable applications. I demonstrate how to
make asynchronous HTTP requests in an Angular application, how to use URL routing
to navigate around an application, and how to animate HTML elements when the state
of the application changes.

What Doesn’t This Book Cover?

This book is for experienced web developers who are new to Angular. It doesn’t explain
the basics of web applications or programming, although there are primer chapters on
HTML, CSS, and JavaScript. I don’t describe server-side development in any detail—
see my other books if you want to create the back-end services required to support
Angular applications. And, as much as I like to dive into the detail in my books, not
every Angular feature is useful in mainstream development, and I have to keep my
books to a printable size. When I decide to omit a feature, it is because I don’t think it is
important or because the same outcome can be achieved using a technique that I do
cover.

What Software Do I Need for Angular Development?

You will need a code editor and the tools described in Chapter 2. Everything required
for Angular development is available without charge and can be used on Windows,
macOS, and Linux.

How Do I Set Up the Development Environment?

Chapter 2 introduces Angular by creating a simple application, and, as part of that
process, I tell you how to create a development environment for working with Angular.
What If I Have Problems Following the Examples? The first thing to do is to go back to
the start of the chapter and begin again. Most problems are caused by missing a step or
not fully following a listing. Pay close attention to the emphasis in code listings, which
highlight the changes that are required. Next, check the errata/corrections list, which is
included in the book’s GitHub repository. Technical books are complex, and mistakes
are inevitable, despite my best efforts and those of my editors. Check the errata list for
the list of known errors and instructions to resolve them.

Chapter 1 ■ Getting Ready 5 If you still have problems, then download the project for
the chapter you are reading from the book’s GitHub repository,
https://github.com/Apress/pro-angular-9, and compare it to your project. I create the
code for the GitHub repository by working through each chapter, so you should have the
same files with the same contents in your project. If you still can’t get the examples
working, then you can contact me at adam@adam-freeman.com for help. Please make
it clear in your email which book you are reading and which chapter/example is causing
the problem. Remember that I get a lot of emails and that I may not respond
immediately.

What If I Find an Error in the Book?

You can report errors to me by email at adam@adam-freeman.com, although I ask that

you first check the errata/corrections list for this book, which you can find in the book’s
GitHub repository at https://github. com/Apress/pro-angular-9, in case it has already
been reported. I add errors that are likely to cause confusion to readers, especially
problems with example code, to the errata/corrections file on the GitHub repository, with
a grateful acknowledgment to the first reader who reported it. I keep a list of less serious
issues, which usually means errors in the text surrounding examples, and I use them
when I write a new edition.

Are There Lots of Examples?

There are loads of examples. The best way to learn Angular is by example, and I have
packed as many of them as I can into this book. To maximize the number of examples
in this book, I have adopted a simple convention to avoid listing the contents of files
over and over. The first time I use a file in a chapter, I’ll list the complete contents, just
as I have in Listing 1-1. I include the name of the file in the listing’s header and the
folder in which you should create it. When I make changes to the code, I show the
altered statements in bold. Listing 1-1. A Complete Example Document import
{ NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-
browser"; import { AppComponent } from "./app.component"; import { StoreModule }
from "./store/store.module"; @NgModule({ imports: [BrowserModule, StoreModule],
declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {
} This listing is taken from Chapter 7. Don’t worry about what it does; just be aware that
this is a complete listing, which shows the entire contents of the file. When I make a
series of changes to the same file or when I make a small change to a large file, I show
you just the elements that change, to create a partial listing. You can spot a partial
listing because it starts and ends with an ellipsis (...), as shown in Listing 1-2. Chapter 1
■ Getting Ready 6 Listing 1-2. A Partial Listing ...
Name Category Price
{{i + 1}} {{item.name}} {{item.category}} {{item.price}}
... Listing 1-2 is from a later chapter. You can see that just the body element, and its
content, is shown and that I have highlighted a number of statements. This is how I
draw your attention to the part of the listing that has changed or emphasize the part of
an example that shows the feature or technique I am describing. In some cases, I need
to make changes to different parts of the same file, in which case I omit some elements
or statements for brevity, as shown in Listing 1-3. Listing 1-3. Omitting Statements for
Brevity import { ApplicationRef, Component } from "@angular/core"; import { Model }
from "./repository.model"; import { Product } from "./product.model"; import
{ ProductFormGroup } from "./form.model"; @Component({ selector: "app", templateUrl:
"app/template.html" }) export class ProductComponent { model: Model = new Model();
form: ProductFormGroup = new ProductFormGroup(); // ...other members omitted for
brevity... showTable: boolean = true; } This convention lets me pack in more examples,
but it does mean it can be hard to locate a specific technique. To this end, the chapters
in which I describe Angular features in Parts 2 and 3 begin with a summary table that
describes the techniques contained in the chapter and the listings that demonstrate how
they are used. Chapter 1 ■ Getting Ready 7 Where Can You Get the Example Code?
You can download the example projects for all the chapters in this book from
https://github.com/Apress/ pro-angular-9. How Do I Contact the Author? You can email
me at adam@adam-freeman.com. It has been a few years since I first published an
email address in my books. I wasn’t entirely sure that it was a good idea, but I am glad
that I did it. I have received emails from around the world, from readers working or
studying in every industry, and—for the most part, anyway—the emails are positive,
polite, and a pleasure to receive. I try to reply promptly, but I get many emails and
sometimes I get a backlog, especially when I have my head down trying to finish writing
a book. I always try to help readers who are stuck with an example in the book,
although I ask that you follow the steps described earlier in this chapter before
contacting me. While I welcome reader emails, there are some common questions for
which the answers will always be “no.” I am afraid that I won’t write the code for your
new startup, help you with your college assignment, get involved in your development
team’s design dispute, or teach you how to program. What If I Really Enjoyed This
Book? Please email me at adam@adam-freeman.com and let me know. It is always a
delight to hear from a happy reader, and I appreciate the time it takes to send those
emails. Writing these books can be difficult, and those emails provide essential
motivation to persist at an activity that can sometimes feel impossible. What If This
Book Has Made Me Angry and I Want to Complain? You can still email me at
adam@adam-freeman.com, and I will still try to help you. Bear in mind that I can only
help if you explain what the problem is and what you would like me to do about it. You
should understand that sometimes the only outcome is to accept I am not the writer for
you and that we will have closure only when you return this book and select another. I’ll
give careful thought to whatever has upset you, but after 25 years of writing books, I
have come to understand that not everyone enjoys reading the books I like to write.
Summary In this chapter, I outlined the content and structure of this book. The best way
to learn Angular development is by example, so in the next chapter, I jump right in and
show you how to set up your development environment and use it to create your first
Angular application.