上QQ阅读APP看书，第一时间看更新

Starting from scratch

Let's start out by creating a new Angular project using the Angular CLI. We'll name it mastering-angular-components:

Open a console window and navigate to a proper workspace for our project. Let's use the Angular CLI to create our initial project structure:

ng new mastering-angular-components --prefix=mac

After the project has been successfully created, let's move into the project folder and start serving using the ng serve command:

cd mastering-angular-components
ng serve

After following the preceding steps, you should be able to open up your browser and point it to http://localhost:4200. You should be able to see the generated application app with a welcome message saying Welcome to mac!.

It's recommended that you leave the serving mode of the CLI running all the time while in development. Since the underlying webpack will use caching when recompiling the output bundles, it will speed up your development process quite a lot. I recommend that you always have a second command-line window open and start Angular CLI in serve mode there.

Let's examine what the Angular CLI tool has created for us so far. Along with a lot of files that we'll cover in later chapters, the Angular CLI tool has created the core files that are needed in order to assemble a simple Angular application. The following directory listing shows all the critical files, which you'll also find within your generated project folder:

mastering-angular-components
├── node_modules
├── package.json
└── src
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.ts
    │   └── app.module.ts
    ├── index.html
    ├── styles.css
    └── main.ts

Let's take a quick look at these dependencies, development dependencies, and their purpose: