This is where it all starts. We have now reached the point where we are going to use the CLI to create our application's starting point, as well as the first bunch of components we'll need to connect them to our routing configuration. We've looked at how to install the CLI, and we've even created our first Angular application together—although our todo application was a tiny one, just to get our feet wet—back in Chapter 1, Quick Start.

If you haven't yet installed the CLI, you're definitely going to want to do that now. Once you've done that (hopefully, you already have), fire up your CLI, and let's begin!

The first order of business is to create a directory on your machine where you're going to place all your Angular projects. Don't create a directory for our example application, because the CLI will do that for you. Simply create a folder on your filesystem and navigate to it from your command line (if your OS is Windows), or Terminal (if your OS is a Mac or Linux). For brevity, from here on in, I'll be referring to it as your Terminal, and the folders as directories.

Next, we're going to use our CLI to create the skeleton of our application (that is, the root directory), and all the accompanying files and sub-directories that the CLI creates for us that are needed for an Angular application. Enter the following command:

ng new realtycarousel 

If you see Project realtycarousel successfully created. as the last line of output, you should now have a directory named realtycarousel that will contain all our application files.

The output of the preceding command is displayed in the following screenshot:

Let's now test that we can run it. Navigate to your realtycarousel directory with the cd command:

cd realtycarousel

Next, start our Angular application with the CLI's server command:

ng serve  

You should see a bunch of lines output to your Terminal. If one of the lines is something similar to ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **, and the last line is webpack: Compiled successfully, then you should open a browser and point it to http://localhost:4200.

If you see a page with the Angular logo, this means that everything was set up correctly. You now have an empty Angular application.

Next, let's add several components, which we will reference in our routing configuration. Again, don't worry about components for now. We will look at them in depth in Chapter 6, Building Angular Components, and Chapter 7, Templates, Directives, and Pipes.

Run the following list of CLI commands, one at a time:

ng g c home
ng g c signup
ng g c login
ng g c logout
ng g c account
ng g c listings
ng g c createListing
ng g c editListing
ng g c previewListing
ng g c photos
ng g c uploadPhoto
ng g c editPhoto
ng g c previewPhoto
ng g c pageNotFound

The output of the first command is given in the following screenshot:

We should see a similar output when we create all the other components.

We now have the first set of components that we need. Although their templates are empty for now, this will be good enough to enable us to configure routing for our application.

Since we'll be using Bootstrap for a few things in our application, such as its navigation bar and its responsive grid, we need to install Bootstrap along with its dependencies. In Chapter 3, Bootstrap – Grid Layout and Components, we simply referenced a few CDN URLs in the header of our index.html page in order to be able to use Bootstrap. However, we will now install Bootstrap differently—we'll be using npm.

To install Bootstrap, jQuery, and Popper, run the following command in your Terminal:

npm install bootstrap@4 jquery popper --save

We have installed the libraries, and now it's time to include them in our config file so they are available throughout the application.

Open up the angular.json file and include the stylesheet and JavaScript files in the respective sections, as shown in the following code snippet:

"styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
] 

The screenshot shows the edited angular.json file:

All set!

We now have the core files that we need to be able to set up routing for our application. We also made sure to install Bootstrap because we're going to create our navigation bar for our application in this chapter. Moreover, our navigation links will contain special tags that Angular uses for routing, which is another reason why we needed to install Bootstrap at this point.

Let's open our project using our IDE (again, it's easiest if you're using Visual Studio Code—but you can use whichever IDE you prefer), so we can take a look at the project structure. Additionally, in the next section, Completing our route configuration, we'll be making changes to a couple of files for setting things up, so you'll want to have a way to easily open and edit those files.

With the project now open in your IDE, navigate to the app directory, which is located within the src directory. As Angular developers, we'll be spending the vast majority of our time within the app directory. Inside the app directory, you will find a number of files that all start with app. These files make up the root component (that is, the app component) in our application, and we're going to be examining what each of these files does when we come to Chapter 6, Building Angular Components, where you will become very familiar with Angular components. You will see many subdirectories in the app directory—one for each component we created just a few moments ago, such as for about, account, home, and so on.

Remember, the language Angular applications are written in is TypeScript, which is what the .ts file extension stands for. Let's roll up our sleeves and configure routing for our application.