Let’s Build Something

Hi ya’ll! Today I am going to show you a quick little video that shows some very basic Angular via a little application.

Ok, scratch that… I FULLY intended to upload a video but it ended up being like an hour long and I tried to edit it for like 30 minutes and was like… this is killing my soul.

Since the application is already made, I’m just going to tell you about it old-fashioned style. Are you ready? No? Ok, great.

The web app we are going to make is an application to help you pick something to eat when you have many choices but no idea what to pick (truly and shamefully a first-world problem). We’re going to create this application with Angular.

If you don’t have Angular, hop on over to nodejs.org and download and install Node. Why? Doing so will allow you to use node package manager (npm). With node we can manage and install packages to our Angular web application as well as Angular itself.

To install angular, head over to a terminal of some sort and enter:

npm install -g @angular/cli

Once this is done, we will have Angular installed globally on your computer.

Next we want to create an Angular app. Open up you favourite IDE and open the integrated terminal (if it has one) or navigate to the folder you wish to save it in through the terminal and let’s utilize the Angular CLI, enter:

ng new food-generator

This will create an application called food-generator:

After the century it takes for Angular to set all this up for us (thank you), we can create a new component, let’s make a card to hold our things in:

ng generate component card

This gives us this:

Once that is done, let’s fiddle with the card’s HTML, creating the blueprint of our app:

With that out of the way, let’s add some styling:

Cool. Now let’s handle the functionality of the card:

This shows a list of food in the card component that we will choose from as well as the functionality of the button on click.

Alright, so let’s see the result. To do so, in the terminal, enter:

ng serve

This should take a moment as Angular compiles the code and sets it up to serve. Once it’s done, it will print out a message stating that it is being served on port 4200 (Angular’s default port) on your local host.

Navigating to www.localhost:4200.com we see:

Now if we click “YUM!” this is what we’ll eat for dinner:

Winner, winner, chicken dinner! Oh boy!

---

WELP, that’s it for now, perhaps at a later date I will have the mental fortitude to edit that hour-long video as it goes into more detail, but today is not that day my friend.

Be well, ta-ta!