Starting from scratch

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

1. 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

2. 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!.

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: