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!

(Week 11)

If you can’t guess from the very obvious title, this post will be on Angular.

Sorry Shakespeare, nobody cares.

If you have happened across my last post, you will know how new I am to Angular. If you had not, I am brand spanking new. As the responsibility to know Angular for one of my projects was thrust upon me, my React-laced soul was ripped in two and I dramatically prepared myself for the worst.

Woe… WOE.

So why am I doing a post on something I am new at and already have an unnecessarily dramatic negative attachment to? Once upon a time, I heard somewhere from someone much smarter than me that to really learn and know a topic is to be able to successfully talk about and teach that topic. So here I am, so brave.

Alright, let’s get down to the brass tax (also what is brass tax?).

What is Angular?

Angular is an open-source platform that utilizes Typescript and allows for the simplified building of web applications.

Angular focuses on the use of components, templates, dependency injection, and other tools to get the job done.

What are components?

A component is a building block that you may use to create an Angular application. Components control an area on the screen and may be used multiple times throughout the application, achieving reusability and modularity. A component consists of three things:

• A class
• A template
• And a style sheet

Here is an example I coded of a simple Leaflet map component:

What are templates?

A template acts as a companion to a component and describes the view of that component. This view is in the form of good ol’ HTML.

In Angular, there is a view hierarchy that starts with the root template and branches down to other nested templates.

Here is an example of a table template for a table component that utilizes Angular Material UI:

What is dependency injection?

Do you lay awake at night worrying about instantiating your objects? Lose sleep no more as Angular has you covered with dependency injection!

All you need to do is declare your dependencies, and Angular does the rest allowing for more flexibility in code.

I have not really done any dependency injection yet, so here is a source I feel is straightforward in explaining it better than I could at the present moment.

---

I’d like to say more, but I am strapped for time due to my pursuit of graduating with a decent GPS and trying REALLLYYYY hard not to check out (aka lots of projects).

Ta ta for now!