© Adam Freeman 2020
A. FreemanPro Angular 9https://doi.org/10.1007/978-1-4842-5998-6_1

1. Getting Ready

Adam Freeman1 
(1)
London, UK
 
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 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.

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 [email protected] 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 [email protected], 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.
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 { }
Listing 1-1.

A Complete Example Document

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.
...
<table class="table table-sm table-bordered table-striped">
    <tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
    <tr *ngFor="let item of getProducts(); let i = index" pa-attr>
        <td>{{i + 1}}</td>
        <td>{{item.name}}</td>
        <td pa-attr pa-attr-class="bg-warning">{{item.category}}</td>
        <td pa-attr pa-attr-class="bg-info">{{item.price}}</td>
    </tr>
</table>
...
Listing 1-2.

A Partial Listing

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.
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;
}
Listing 1-3.

Omitting Statements for Brevity

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.

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 [email protected]. 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 [email protected] 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 [email protected], 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset