This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Introduction" Lesson
[00:00:00]
>> Welcome to Angular 9 fundamentals. I believe that this is probably my ninth or tenth Frontend Masters workshop. And I think Mark may be cringing every time I do this. But I just am so impressed and amazed at just really the platform that he's created. And that it's such an honor to be here today.
[00:00:22] And not only today, but for anybody that watches these courses in the future. I have made just an incredible amount of friends. I've met some really, really bright people as a result of this platform. And connecting and the feedback that I have gone from these courses. It touches my heart and it makes it worthwhile.
[00:00:41] And so I would say as well there's just incredible amount of content in Frontend Masters. It's amusing to me that even though I have content on the platform, I still very much consume the additional workshops as they come out. So Will Sentance is probably one of my biggest heroes in terms of his teaching style and just his depth of knowledge.
[00:01:06] The functional JavaScript stuff, I love it all. And so to be here and to be able to talk about Angular is just really, really exciting to me. And so, let's talk about what we're going to cover. Let's set some expectations. Let's talk about just kind of some housekeeping stuff.
[00:01:25] And what you can expect over the course of this workshop. So the agenda here is going to be as follows. So Hello Angular is just we're gonna set some context here. We're going to talk about the Angular CLI, we're going to talk about kind of modules, routers. And just give us just enough of a picture to understand kinda what's happening and so we don't feel completely lost.
[00:01:54] And then, once we have that context set, then we're going to get into component fundamentals. Talk about how component classes templates work, and how they fit together or the purpose that they play. And then we're going to talk about forms, services, server communication. And then my all time favorite topic, which is component driven architecture.
[00:02:17] And from there, Angular routing, and then unit testing fundamentals. And this agenda, these modules have been constructed in a way that allows us to build something very quickly and start to iterate it. So in the first module, we're gonna talk about the Angular CLI. And we're just gonna build an application very quickly.
[00:02:41] And just to understand, this is how you get up and running. This is how you run an Angular application. These are the pieces. Here's how you use the command line. Once we have generated that, then we're going to jump into a repository, a project that I've prepared for this course, that is a fully functioning application.
[00:03:02] And so we kind of had this end goal with a bunch of kind of cool stuff. But we're going to start at a starting branch that's kind of a pared down version of that. And we're just going to code. And so I'll talk a little bit of code, and I'll check that branch in.
[00:03:18] And I'll give everybody a challenge for them to do some code. And then we'll come back and I'll show the solution. We'll check that in and then we'll go to the next concept. So these modules were done in a very specific way for us to get up and running and start working with Angular very quickly.
[00:03:37] So in the first module, we're going to talk about the Angular CLI. We're just gonna build something up and we're going to see how that works. But from there, we're going to jump into a project that I've prepared for this workshop. That covers pretty much everything that I want to talk about and then some.
[00:03:58] And so, it's fully functional, you can save it, it goes back to the server. There's a lot of kind of neat things in here that are there for reference and for us to explore. And so this is going to be on GitHub, you can pull this down. And from the master branch, that's gonna be everything that we're gonna talk about.
[00:04:20] All the extra stuff that I just put in there because I thought it would be helpful. But then on the branches, if you notice that we've created a branch one to start out with, which is a pared down version. And then we have branches for every one of the modules that we're going to cover with a branch for the module.
[00:04:44] But then at the end of that module, we have a coding challenge and we have the solution for that challenge and that branch. And so if for some reason you need to skip a module or whatever, you can just jump into the appropriate branch for that module and get caught right back up.
[00:05:02] And so we have branches for every one of the modules with a solution branch for the coding challenge. And so this is the application that we're going to build. And if I shut this down real quick, I can just show you what the starting branch looks like. So I'll go git checkout 00-start and this is going to put us on the start branch.
[00:05:30] And then I talk about this, in the package.json you can see this. But we have a special command here, npm run server:all which is going to spin up the front end application. As well as a mock API that I've created that we use when we get into server communication.
[00:05:47] So we'll just run this and we'll let this compile. And while that's generating and running the other thing I want to point out is that there is a PDF with a bunch of slides that I've prepared. And so just a bunch of stuff in here that I don't necessarily use or I'm going to use in the workshop.
[00:06:09] But I still wanted to make it available to you for reference. And so this PDF is going to be in the repo right here. So when you pull this down, you're gonna get this PDF. And as if I realized there's a typo or something I'll just post a new version up to this.
[00:06:26] But I wanted to make this available, even though we don't use slides a ton. I do think they're valuable for kind of offline studying or for reference purposes. And so back into the starter application, this is what we're going to be working from. So it's a pared down Angular application.
[00:06:46] Because this is an Angular workshop and not a typing workshop, I wanted to for the sake of time, I just go ahead and generate some of the basic HTML and a CSS so we could focus on Angular specifically. One other thing that I want to mention, in case this comes up, is Angular is written in TypeScript.
[00:07:07] And though I will be using TypeScript, I'm not going to be focusing specifically on that. And so really focusing on Angular fundamentals for people to get up and running in Angular. And so I'm not going to strongly type everything. I'm not gonna use all of the TypeScript tricks and kind of sugar that I like to use in my day to day job.
[00:07:29] Is that I'm really being conscious of what we're working through and focusing on the Angular portion, and not so much the TypeScript version. I love TypeScript, but I'm not going to be as disciplined as I would be is if I were doing this for a production application.