Creating our application

Unless you have recently installed Angular, you need to install it using npm. The part that we are going to install is the Angular CLI. This gives us everything we need to run from Command Prompt to generate our application, add components, scaffold the application, and more:

npm install -g @angular/cli

As we are going to develop both client and server code, it will be helpful to keep our code together to do this; therefore, we are going to create Client and Server folders under a common directory. Any Angular commands will be run in the Client folder. It is relatively common to share code between the client and server side, so this arrangement is a simple way to keep the application together and simplify sharing.

Creating an application with Angular is easily accomplished using the ng new command, which was added to our system when we added the Angular CLI. We are going to specify command-line arguments to choose SCSS to generate our CSS, as well as choosing the prefix we want to give to any components that we create:

ng new Chapter04 --style scss --prefix atp

The naming convention I have chosen to follow reflects the name of the book, so we use atp to reflect Advanced TypeScript Projects. While we aren't going to make heavy use of CSS in this chapter, I tend to use SCSS as my CSS pre-processor more than I use raw CSS because it has a rich syntax for using things such as style mixins, which means that this is the style engine I tend to go to by default. The reason that we are choosing to use the atp prefix is to make our component selectors unique. Suppose that we had a component that we wanted to call label; obviously, this would clash with the built-in HTML label. To avoid the clash, our component selector would be the atp label. As HTML controls never use hyphens, we guarantee that we aren't going to collide with existing control selectors.

We are going to accept the installation defaults, so just press Enter when prompted about whether or not to add Angular routing support. When the installation completes, we are going to start our Angular server, which also watches to see whether files change and rebuilds the application on the fly. Normally, I would install all of the required components before I did this part, but it is useful to see exactly what Angular gives us as a starting point and the ability to view live changes is highly useful:

ng serve --open

Unlike React, the default web address for opening our application is http://localhost:4200. When the browser opens, it displays the default Angular sample page. Obviously, we are going to remove lots from this, but in the short term, we are going to keep this page as it is while we start adding some of the infrastructure we need.

Angular creates a lot of files for us, so it's worth identifying which ones are the ones that we are going to work with the most and what purpose they serve.

Table of Contents for Creating our application

Create new playlist

Sign In

Sign Up

Table of Contents for
Creating our application