Hello Angular

[00:00:00]
>> So let's just try it, all right, let's just get up in the mix. Here's what I want you to do, let's head over to angular.dev/playground. Now in the upper right corner, there's a drop down menu, in the upper right corner right above the code editor. Go ahead and select Hello World.

[00:00:18]
So here's what we'll do. So this is our new website, angular.dev. You can code Angular and try to Angular right in the browser. Now that's one of our major features that we want to bring to the learning experience for Angular. So we'll do our course today in VS Code.

[00:00:34]
However, I just wanted to show you that if you want to just try something new, just try it here, you just jump right in. So right on line 8, there is some code that says Hello world on line 8. Change that to Hello universe or to whatever you want it to be.

[00:00:53]
Do me one more favor, just one small thing. If you get your left hand up if you can for me. Check this out. High five from me to you. Good job, friends. You just updated your Angular code, right? You just updated your first Angular code. If you've never done Angular before, you are now an Angular developer.

[00:01:08]
You just updated code, it compiled, and it's running in the online playground. So you got that value right out of the box of being able to change it up. Now, this is just showing you that Angular templates, which is a part of the Angular component, is how you get to determine what's visible on the screen.

[00:01:28]
Before we jump right in now, I'm just gonna let you know this the project setup we talked about, the installation, on your local machines. And friends at home, if you're checking this out, at the time of this recording is Angular 17.01, but that's okay if you're at 17, all this stuff still works from 17 and above.

[00:01:45]
That's the core component for this workshop. Anything that's 17 and above, all the things I'll show you today work. All right, make sure that you've cloned the repo so you can have everything from this URL. I'm sorry that it's so long. I didn't think it through, I thought about it later.

[00:02:01]
I was like, this is very long URL, doesn't fit on one line. Okay, yeah, so you can HTTPS clone or you can do SSH, all right. Now, here's an important step for everyone. Make sure that you have all the dependencies installed. So on your computer, on your computer, go into this project, your Angular fundamentals lessons, and to the root project.

[00:02:24]
And then you're gonna do npm install, and this will bring down all of your dependencies, okay, for your application. Just like any other web library you ever use, framework, it's the same pattern. All right, and then once those dependencies, it's gonna probably take a few seconds. So it's npms, npms, it's probably gonna take some time.

[00:02:42]
And then we're gonna do ng serve, ng space serve space 01-hello-angular, okay? So this is all the stuff that you folks will need. Even at home, friends, make sure you're doing this. This will make sure that you're ready to code with us today. This is a confirmation round, okay?

[00:03:03]
If you get this all to work, you'd be ready to code with us today. All right now, how will you know that you're ready? And if you got these slides at home, you go at your own pace. But how will you know you're ready? If you're reading this, things have worked out well.

[00:03:13]
So if you go into the browser, localhost:4200. This is what I'm hoping that you're seeing.