Assuming you have the Angular CLI installed, this Angular CLI for beginners guide will get you up-and-running with your first “hello World” application.
In this guide to Angular CLI for beginners, we are going to go over setting up your first Angular project using the Angular CLI for the first time. We’ll get a project running and take a look at some of the things that are going on behind the scenes. We’ll also be able to demonstrate how easy it is to develop, using the Angular CLI.
Create a New Project
To create a new project using Angular, we use the “new” command, followed by the name of the project in the command prompt. If we wanted the name of our project to be My First Angular Application, we would type ng new my-first-angular-application into the command prompt.
After entering the command, it will ask if you would like to add Angular routing. Angular routing is a bit more advanced for now, and Angular tips us off to that fact by giving us a capital N, so we will choose no for this project. Just enter n.
Next, we will need to answer another question about which type of stylesheet we would like to use. This time we choose with our arrow keys, and we will select CSS for this application. Enter CSS.
Once you have made the stylesheet selection, the Angular CLI will begin a lengthy install that can take several minutes, depending on the speed of your computer. As the framework is installing, you might get a list of warnings, but you can ignore them.
Once the installation ends and you return to the command prompt, you can use the dir command on Windows, or ls command on Mac and Linux to check that there is a directory named my-first-angular-application.
Test Project
The next thing we will do in our guide to Angular CLI for beginners is to test our install to make sure it works correctly, and to demonstrate how easy it is to get an application started.
First, enter cd my-first-angular-application into your command prompt to move into that directory.
Once you have entered the directory, you should be able to start your first app by entering ng serve into the command prompt. It can take several minutes for the project to compile, so don’t get nervous. Once it’s complete, you should see a message that says, ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **.
View Project
Typing http://localhost:4200/ into your browser, or clicking on the link, should show you your first application. It’s a webpage with some links to Angular tutorials along with some basic command examples.
Error
When I first installed the Angular CLI on Windows, I was not able to get ng serve to work because Windows had it blocked. To get it working, you need to be sure you are accessing the command prompt as an administrator.
Developing the Project
It’s nice that the Angular CLI can serve up our project in our web browser, but it does more than that. While using Angular CLI, we won’t need to type ng serve every time we make a change, to see what effects they had. If you noticed, the message we got when our project finished compiling was that the Angular Live Development Server is “listening.” Listening means that any changes we make, anywhere in our code, will immediately show up in our browser.
Behind the Scenes
Now that we have our first application running, we can continue our look into Angular CLI for beginners, by taking a look at some of the crucial things that are going on behind the scenes. If you open the my-first-angular-application folder in a code editor like Visual Studio Code, you can see all of the files installed when we typed ng new.
The Main Component – NgModule
Angular projects are created by combining several components. Every Angular project starts with one main component that bootstraps Angular to the rest of the code. The main component is called the root component.
If we look at the file named app.module.ts, we can see the main component for our project. Since this article is Angular CLI for beginners, we will be glad for now that the CLI has taken care of this code for us. So we don’t need to worry about how it all works right now, but there are some elements that we do need to understand.
- The main component is named NgModule.
- The imports property is for importing external components that this component needs.
- The declaration property allows the component to use other components that don’t come from another module.
- The bootstrap property tells Angular that this is a root component, and is the starting point for your code.
Essentially, what this component is doing is telling Angular that this is the beginning of a browser-based application. It also instructs Angular to get another component named AppComponent and do what it says.
Example 1
AppComponent
If you look at the file named app.component.ts, we can see that this file contains another similar component. This component includes the properties selector, templateUrl, and styleUrls.
The templateUrl is the address of the file that holds the HTML for this page, while the styleUrls is for the address of the page(s) that contain the CSS styling for the HTML.
The selector tells Angular where to place the code in the index.html file. Just like an H1 tag, we use a tag with the selector name. In this case, we notify Angular we will use app-root as our tag.
Index.html
If you take a look at the code in the index.html file, you will see the opening and closing tags named app-root. Our code for this application will go here. You can only have one instance of these tags per page, and Angular will ignore any more app-root tags that come after.
Conclusion
Congratulations on completing your first app in the Angular CLI. I think you will agree that this is a great way to code and finish new applications quickly. The CLI takes a lot of the repetitive typing out of creating an app, and when combined with the power of the Angular framework, incredible things can happen.
I hope you have enjoyed reading over this guide to creating a new Angular application. In the next article, we’ll start to get our hands dirty with some coding. We’ll try out some easy Angular examples, and demonstrate some of the things we can do. Until then, please share this guide to Angular CLI for beginners on Facebook and Twitter.