This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Angular Overview" Lesson
[00:00:00]
>> Once this is running, if you go to localhost:4200, you have this application here. And we kind of have two or three main things happening that we're going to build out today. The thing that really what we're gonna focus on, is the courses view. And so this is a master detail view, which I believe is the most fundamental design interface when you're building an application.
[00:00:28] So when you learn a new JavaScript framework, or you're evaluating it, what is kind of the quintessential Hello World of JavaScript frameworks? Well, it's the to do list, which is a master detail view. So the idea is you have a list of items or a collection that you can then select and manipulate.
[00:00:51] And so when I'm working with new developers, is once they have a strong understanding how to build a master detail view and how to communicate with a server, really what's left is how do I handle the business logic that is specific to that business domain. So we're going to be building this out throughout the day.
[00:01:13] The other piece is we just have a home route with just another component. And then at the end of the day, towards the end of the day, we'll talk about routing, but we just have this login route. You can just put anything in here, we're not really doing anything.
[00:01:29] And then it just routes back into kind of the main application. So this is what we're going to be building. And on the flip side, I'm going to just close this. And then I'm going to git checkout 00-start and so this is going to put us on the start branch.
[00:01:58] So the one thing I'm going to do is I'm just going to hop in. And I feel like I could probably do this way faster from the command line, but, Just discard that package-lock.json. All right, so let's switch to this branch. And then, I'm going to run this again.
[00:02:18] So npm run server:all. And it's gonna pretty much do the same thing. But what we're going to see is a really a simplified application that we're going to be building off of. So this is just getting started. This is kind of some of the stuff that we need to know.
[00:02:37] And you'll notice that as well, that we didn't see all those modules being generated. So one thing Angular has really tried to do is get smarter about how they're building. Because any non-trivial framework can get pretty large. So if I go back to the browser here, let me just refresh.
[00:02:56] You'll notice that there is the placeholders here, but nothing else is here. So this is kind of where we're going to be starting once we start to build this out. But let's take a small detour and let's talk about the kind of the main pieces as it pertains to Angular, and let's just set kind of the context.
[00:03:25] So this is the app. And I'm gonna skip through a bunch of these slides. What I do wanna talk about is, in kind of the intro, there's a couple developers here in the Zoom call, they are 1.x and they're moving to to Angular, to the latest version of Angular.
[00:03:46] And with Angular 1.x, the kind of the main core components in a very simplified view is, you have approximately eight of them. So you have your module, you have config, you have routes, controller, scope, view, service, directive. I'm very much trying to forget that part of the Angular.js.
[00:04:12] It was very good at the time, but in Angular, it's really simplified. And so I'm going to be spending also intentionally a lot of time today trying to, instead of increasing complexity, instead of showing new, really cool shiny things, is really trying to just reduce things into the simplest possible form that I can.
[00:04:40] Because once you start to understand the fundamental and underlying patterns that exist, it's very easy not only to pick up Angular, but to pick up other frameworks. And so a lot of even what I'm talking about, though the semantics and the syntax may be different, the principles are going to be the same.
[00:05:01] And I'm going to try to call those out where I can. And I think that's really where the real value is. It's not that we're learning just a specific version of Angular, but we're learning how to build well architected applications, regardless of the version or even of the framework.
[00:05:18] So the simplified big picture is, you have a module, you have routes, you have components and you have services. And that is, I would say, there are a few exceptions to this, but it's very, very rare. And so as we walk through this, at the end of the day, if you understand well, okay, this is what a module does.
[00:05:45] It's fundamentally an organizational mechanism. This is what a route does. It's if I live in Phoenix, and if you say Phoenix, most of the time people are referring to Phoenix Metro, but Phoenix is actually made up of a bunch of smaller cities. So you would say, well, where at in Phoenix do you live at?
[00:06:05] Well, I live in Peoria. And so, I think of, if you look at an application, it's, well, what part of the application does this exist in? And a well organized application will have very kind of a logical, intuitive way that it's organized and this happens via modules. And then if I said, well, I need to go to Chandler, well how do you get there?
[00:06:28] And so routes are really, I think, just a way to navigate from one kind of state to another. Components, just a fundamental building block of Angular. And Angular is certainly a component-centric framework at this point. We'll talk a little bit more about that and a bunch of an architecture.
[00:06:48] And then you have services, which in my opinion really shoulders the heavy lifting of the application. And so I'll also talk about that a little bit more.