So you're actually not wasting time and padding for content this time around?
In this tutorial, we are going to create and run our web app using the Angular CLI. So, let's have some fun.
Now that our environment is set up, I figured it's time we actually create our web app so we like, you know, have a place to code and stuff.
In order to do that, the first step would be for you to create a folder on your hard drive, called Projects. Once that is said and done, we need to open a Command Prompt in that folder. That is easily accomplished by navigating to the Projects folder and, in the folder address bar at the top of the folder, click on it, write cmd, and presto, you have a command prompt opened for that folder. Something like this:
Now that we have that out of the way, it's time to create our Angular app, by running the following command:
ng new recipe-site
This command invokes an Angular command (designated by thge ng) called new, which will create a web application called recipe-site.
When asked if you want routing, type y and then press Enter. And when it comes to stylesheet format, use your arrows to select Less and press Enter. After a few minutes, your application should be scaffolded in a folder inside your Projects folder called recipe-site.
You may receive some notifications or warnings about how Git is not configured. Just ignore them, they don't impact your work.
In the command prompt, type the following command:
cd stands for change directory and it tells the prompt to navigate to the folder with the given name.
And now, let's run our application, shall we? Type the following command:
ng serve --open
So what does that command do? Well, it basically builds your application and then launches it on your computer. By default, Angular applications run on port 4200. The --open part of the command tells the prompt that when the build is complete, it should open the website in your default browser (mine is Chrome).
In the previous section I kept talking about building the application. You can run a build of your application by running the following command in the recipte-site folder:
The build process basically takes every component in your application and checks it for any and all errors, be it coding errors, missing imports etc.
If I remember correctly, Angular does a build process whenever you run ng serve. However, there are some changes in some files which require you to do a build before you serve the application. That's why my recommendation when running Angular apps is the following:
We will take a look at all of these concepts in more detail in the next tutorial. For now, this is all I have for you. See you next time.