9 Understanding Angular projects and tools

 

This chapter covers

  • Understanding the contents of a new Angular project
  • Using the development server and build process
  • Using the linter to check source code in an Angular project
  • Understanding how the parts of an Angular application work together
  • Creating a production build
  • Starting development of an Angular project with a data model

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.

Tip

You can download the example project for this chapter—and for all the other chapters in this book—from https://github.com/manningbooks/pro-angular-16. See chapter 1 for how to get help if you have problems running the examples.

9.1 Creating a new Angular project

The angular-cli package you installed in chapter 1 contains all the functionality required to create a new Angular project that contains some placeholder content to jump-start development, and it contains a set of tightly integrated tools that are used to build, test, and prepare Angular applications for deployment.

To create a new Angular project, open a command prompt, navigate to a convenient location, and run the command shown in listing 9.1.

Listing 9.1. Creating a project
ng new example --routing false --style css --skip-git --skip-tests

9.2 Understanding the project structure

9.2.1 Understanding the source code folder

9.2.2 Understanding the packages folder

9.3 Using the Angular development tools

9.3.1 Understanding the development HTTP server

9.3.2 Understanding the build process

9.3.3 Using the linter

9.4 Understanding how an Angular application works

9.4.1 Understanding the HTML document

9.4.2 Understanding the application bootstrap

9.4.3 Understanding the root Angular module

9.4.4 Understanding the Angular component

9.4.5 Understanding content display

9.5 Understanding the production build process

9.5.1 Running the production build

9.6 Starting development in an Angular project

9.6.1 Creating the data model

9.6.2 Creating a component and template

9.6.3 Configuring the root Angular module

9.7 Summary

sitemap