First Angular App Part 1

Hello! As many of you probably know, Angular is one of the most popular JS frameworks out there at the moment. It’s really the only one to rival the dominance of React at the moment. So, with that, I thought it would be a great idea to walk through the basic steps of creating your first Angular app! What we will walk through and the steps it takes will be mostly meant for beginners to the world of coding. Most of you with any type of experience will breeze through this, but that doesn’t mean it’s not worth doing for a little refresher.

So with that, let’s get started!

First I’m going to go ahead and open up my VS code and in the Terminal is where I’m going to download Angular. To do we will type in -

npm install -g @angular/cli. Once that is done your VS code (or specific text editor you are using should begin the download as shown below).

Once the download is complete we can then create our first boilerplate Angular app by typing -

ng new project-name. You can see below I’ve named my project with the simple name of angular_project.

Once that is completed it will ask you a few questions. First, it will ask if you want routing, which in this case we will say no, and the second question asks about the format you would like for your stylesheet. Most of the time, as I’ve done here you will select good old CSS.

Perfect! We should now have our boilerplate of files for our first Angular project.

Now to get the app up and running in our browser we are going to type -

ng serve — open. As shown below.

Once done you should have your boilerplate page up and it should be like this.

If you’ve gotten this far and you’re new to the world of frameworks, great job! I know it doesn’t seem like we’ve done a lot so far but properly setting up and installing items is a big part of an engineer’s job. Okay so let’s now jump into creating our own content for our Angular app!

One thing I would love to point out is that in the boilerplate app for Angular they actually give you instructions and guidelines on how to add new Components, Materials, Dependencies, and many more. As you can see below as I click on New Component I get the command to use in the terminal to create a new component. Pretty cool!

Now in the file structure, you are mostly going to be working out of the src folder — app folder. To start let’s jump into the app.component.html file. It should be filled with code. This is what’s producing everything we see on our boilerplate page. To start fresh let’s just go ahead and delete it all.

Now that we have a clean slate we can start with something simple to make sure our app is property working. I’ve gone ahead and created a div with a simple title of Our First Angular App as shown below:

This code should then produce this in our browser.

If you have this, great job! Okay now let’s take it a little bit further and create our first component! The first thing that I’m going to do is change the title and format it properly as an h1. For this app we are going to create a simple Grocery List. So I’ve gone ahead and created a Header with an h1 of Grocery List.

Now let’s create our first component. To do that we are going to type into our terminal

ng g component component/grocerylist.

Once that is done you should have a new folder that is titled grocerylist with the correct css, html, specs.ts, and ts files. It should look like this below.

If you look in your grocerylist.component.html file you will see a simple p tag that says grocerylist works! Just like this.

Now to add this specific component to our app we are going to navigate back to our app.componet.html file and add it to our grocerylist component. To do so we simply need to add <app-grocerylist></app-grocerylist>. Once we’ve done that correctly the p tag from our grocerylist component should then be displayed.

And there you have it! We’ve successfully created our first Angular app and we’ve got a working header and our own added component! I know it doesn’t seem like much but if you’re a beginner pat yourself on the back. It might not look like much but getting this far shows your ability to understand the basics of creating an Angular app. Next time we are going to take it a step further and build out a bit of functionality. For now, Happ Coding Everyone!