This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Setup" Lesson
[00:00:00]
>> Lukas Ruebbelke: So now let's get down to what we're actually going to be building over the workshop and what you can expect over the next seven or eight modules. So we have a project, and it is for the most part a master detail view. And so we are going to be building out this project's feature within the project.
[00:00:24] And you have a master list of projects, and then you select one. Then you can see the different detail or the details for the specific project that you can update, delete and manipulate. So I believe that the master detail view interface is one of the most fundamental interfaces for line of business applications.
[00:00:45] It's very, very common, I mean, pretty much every line of business application that I see is you have a master list of something and then you're going to manipulate that. So when you wanna build a new framework, for instance, or test out the new framework, what do you do?
[00:00:58] Well, you build out a to-do app. Well, what is a to-do app? It's a master detail view, depending on how you implement it. But a master list of to-do items that you then manipulate. And so we are going to be focusing on building out this application, and then dropping in or building out the projects feature.
[00:01:20] And what you see here on the screen is what, by the end of the workshop, this is where we will end up. So the project detail view has been built out using component driven architecture communicating with the REST server forms and component fundamentals. A lot of the directors to the different bindings and things that you would expect in an Angular application.
[00:01:51] But if we hop into the repo, we have broken this up into a couple different branches to be helpful. So I was in the 08 component architecture branch, and so when you finish the workshop, this is where you will end up. But if you go to, for instance, the master branch, this is a completely blank Angular or space Angular CLI project with a few additional resources to kind of streamline getting up and starting.
[00:02:22] So I've actually fleshed out the style sheet, and a couple different images as well as a back-end implementation that you'll just move over. And so right now we are on the kind of the finish branch for the workshop. Now if I jump into here, I can checkout master.
[00:02:44] And this is, for all intents and purposes, a completely empty workspace. So if I go npm start, there's actually nothing to run. We are going to build this up from ground zero and then start to stack these concepts. But the main application we will be building will go into the apps directory.
[00:03:05] And then we will build some common libraries that go into the libs directory down here. Now because there is quite a bit of material to cover, as well as some additional things that we're just not going to have time to get to in this workshop. What I have done is I've created an additional reference branch.
[00:03:31] And so this has everything that we're going to cover in the workshop plus some additional techniques and things that you can use as you're building out your own applications. And so I'll go ahead and run this. So, npm start.
>> Lukas Ruebbelke: And then in here, if we refresh this, since it's building, here we go.
[00:04:00] You can see that here's our project's feature but we can go into customers and we have a list of customers, this kind of cool status report component. You can actually select on a customer and then drill down. So, this is like a master detailed view but I've separated it across two routes.
[00:04:20] And then, for instance, we have child routes. We have a kind of a home component, where you'd put any widgets rather that you want. So just showing kind of the portability of components, as well as we have a login feature here that you can login. And then checking a JavaScript web token, then we're doing an HTTP interceptor as well as a route card.
[00:04:48] So there's definitely plenty of things in here outside of the workshop that once you finish the workshop I encourage you to go to the repo, pull down this branch specifically and start to look through some of the additional pieces that I'm certain you will find helpful.