Transcript from the "Introduction" Lesson
[00:00:00]
>> Welcome to Angular 13 fundamentals. Let's talk about the agenda. And this is a kind of a loose narrative arc simply because we have to cut these, essentially these modules up into videos for people to watch it, for it to make sense. But there's gonna be a little bit of a dynamic element as you ask questions, and start to answer them all.
[00:00:22] It's not uncommon for me to even veer off into some demo that I didn't even plan, but it was important to somebody, and so I was able to cover that. So, the first thing we're gonna do, we're gonna start up real slow. I'm going to assume that everybody here has a basic understanding of programming JavaScript, HTML, CSS.
[00:00:43] But I'm not going to assume any prior experience with angular. And so we're just gonna start out, and lay that foundation with hello angular. Then we're gonna get into component fundamentals with templates, and component classes, and binding, and how that works. Template driven forms, angular services, server communication, component driven architecture, which is my one of my all time favorite modules.
[00:01:08] And then we'll talk a bit about angular routing, and then we'll finish up with unit testing fundamentals. If you go to this link right here, onehungrymindangular13-fundamentals-workshop. You will find this repository. Now the slides that you see, if you look into the resources folder, the slides are there. And if I make any changes, then obviously, I'll update them.
[00:01:37] But there's some slides in there as well as the challenges, and those may change. But I have kinda of a loose set of challenges that I want to work through during the day, but most importantly the slides are there for our reference. And as well some of the slides I may skip over or gloss over, because I think in some cases it's easier to show code versus just reading off of a slide.
[00:02:03] But for I think study purposes in reference purposes, that having a kind of a well, kind of fleshed out slide deck to go back and review is helpful. And so that's why I've made the slides available in the repository. So please use that go make tons of money, I approve.
[00:02:22] And what we're going to be building is a basic master detail view application. So, if you've ever participated in any of my other workshops, this to me is the fundamental building block of all enterprise applications, really all applications across the board. I believe is just a variation of the master detail view interface.
[00:02:50] And so what I mean by that is you will have a master list of a collection. And so in this case there's only one, but you have a chorus, and then you can select that, and you can see the details for that item. And so if you think about a basic email application where you have all your emails, you select one, you can read it, that's a master detail view application.
[00:03:15] As well as if anybody knows when you start to build out a new framework, or you're evaluating the new framework, so if I was going to go, and evaluate let's say, reactor view, or something, I'm gonna check this out. What is the quintessential hello world application for JavaScript frameworks?
[00:03:34] Well, it's the to-do list. What is a to-do list? It is nothing more than a master detail view. You have a master list of your to-do items, and then you can either add a to do item, delete one, or modify it, and view it. So I believe that this interface, when I'm working with developers, if I can get them to build a well-architected, component-driven, component-centric master detail view application that can communicate with a back end API such as a RESTful API.
[00:04:13] Once somebody can get to that place, and they really understand those pieces, I believe that they are well equipped to really build, really anything in terms of angular, really any framework. Because from there you're simply iterating on ideas that you're already familiar with. So let me just escape out of here, and I'll just show everybody what this looks like.
[00:04:42] So, in the repository itself, I have created this main branch that has kind of everything we're gonna get to, as well as wherever I end up. I'm more than likely going to push this back into the main branch. And so this is kinda a completed version of the application.
[00:05:00] And then I have one more branch here, which is a start branch. And so I've went ahead, and kinda pre-populated some things, because this is not by any means an HTML or CSS course, there is plenty material for that. So we're not going to spend time ironing out, and building out HTML templates, and different things.
[00:05:21] So, just so that we can focus on being as effective as possible, and spending the most time getting repetitions that matter when we start into our exercises. We're going to start with the start branch, and I've just done a little bit of heavy lifting so that we can focus on the main thing.
[00:05:43] And just real quick so we can see what this application looks like, and where we're going, we have a home route, which then has some lessons for a particular course. And then what we're really gonna be focusing on is building out this course list here. With that said, I'm gonna just spin this up, and we'll let this run, and once this is completed, so since I'm here, you saw that on the command line I did npm start.
[00:06:15] And we are actually, using, so that we get a back end database. I'm using a JSON server, and once we dig into the code, I'll elaborate on that more. But there's just a few additional pieces that we're using the big one being JSON server, so that we can have something that we can pull from a server, so that we can display it.