© Adam Freeman 2018
Adam FreemanPro Angular 6https://doi.org/10.1007/978-1-4842-3649-9_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 design pattern called Model-View-Controller (MVC), which places an emphasis on 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 that 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 features (such as HTML5 APIs) and 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 4, 5, and 6. 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.

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 again. 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 { ProductComponent } from "./component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { PaAttrDirective } from "./attr.directive";
@NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [ProductComponent, PaAttrDirective],
    bootstrap: [ProductComponent]
})
export class AppModule { }
Listing 1-1

A Complete Example Document

This listing is taken from Chapter 15. 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 a later listing from Chapter 15. 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, all of 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-6 . The download is available without charge and includes all of the supporting resources that are required to re-create the examples without having to type them in. You don’t have to download the code, but it is the easiest way of experimenting with the examples.

How Do You Set Up Your 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.

Contacting the Author

If you have problems making the examples in this chapter work or if you find a problem with the book, then you can e-mail me at [email protected], and I will try my best to help.

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
18.190.156.80