Project Structure Tour

[00:00:00]
>> Okay, friends. So if you got this, that's letting us know that the Angular CLI was able to launch the local dev server. Now, because we wanna give you good tools that help you, the local dev server for Angular is actually V. So pretty fast, pretty modern. But one question that we get a lot of times on the Angular team is, why aren't you using XYZ tool, right?

[00:00:27]
Yeah, we don't like to break people. That is really our answer to that. And so what we try to do is watch and learn. See where the industry is going, see which solutions are the best, and then we try to incorporate what makes sense to Angular. But we don't just jump on the latest thing at the latest time because that's not always the right answer for us and for developer community.

[00:00:48]
All right, now that we've updated some Angular code, you've run it locally. The next thing to do, let's actually understand what's in a project. Okay, so if you have not done this step already, which is to open up our project in VS Code, let's go ahead and do that.

[00:01:05]
And then I'm gonna jump over to VS Code, and we're just gonna explore. Let's just explore, let's get involved. So in any Angular project, you're gonna have a bunch of folders that are needed, like our .angular folder for some settings, angular.json. Very important file, the angular.json is where your project configuration lives a lot of times, right?

[00:01:27]
So we're talking about low-level configuration. Things like if you have your translation set up, which translations do your application support? And which builder are you gonna use? Are you gonna use ES build or a different build? I mean, so we have low-level configuration, and then some project configuration.

[00:01:43]
If I wanna open this up, it's just a ton of stuff. So I'm not gonna ask you to understand it, or try to reason about it, friends. But what I want you to see is, this is where I can find out things about my project. So if we look at the one we just worked on, the Hello Angular project.

[00:01:58]
You can see the project type, you can see names and rules and files. I mean, lots of stuff that you can do. Lots of stuff that you can do in this project, okay? Your package.json will have your dependencies, very common to what you see in just any node-based environment usually.

[00:02:12]
Package.json with your requirements, your dependencies. So you have all your Angular dependencies and any developer dependencies that you need for your project. Now, let's keep going. One really cool thing about Angular. We were the first library or framework to be built with TypeScript way back in the day before we knew TypeScript would win the war, right?

[00:02:37]
We didn't know what was gonna happen, and we're like, this is a good idea. I'll tell you a funny part about the story's little context. We were actually gonna make our own thing. It's very Googly of us, let's be honest, right? We were gonna make our own thing.

[00:02:49]
We were gonna make something called @script. And then it was like or, the TM mark is almost like or, instead of doing your own thing, we got this other project that we're working on that might be a really good fit. And then we ended up collaborating with that team and then we were the first project to really make it where it's TypeScript first.

[00:03:07]
So you can't write Angular apps in JavaScript, it's TypeScript first. It's TypeScript only. Really, you can't even use regular JavaScript. And so that's how we were part of that story early on using TypeScript. And so you get your TypeScript config for your project. So let's jump into this project folder.

[00:03:23]
Now, this project folder, you may not see this in a standard Angular project, okay? Because I'm doing a setup that allows us to have one set of dependencies, and then a bunch of applications in it. That was to make our time together easier, but it's also used for things like mono repos, right?

[00:03:39]
So if you wanna do the mono repo structure, we have multiple independent applications but one set of dependencies, that's what I chose for today, so that way every time we switch, you don't have to npm install every single time. We can just switch and go, okay? So underneath this project folder, I have a bunch of examples, if we go to our Hello World example, all right?

[00:03:58]
So this is interesting. Because we have some more TypeScript-project-specific configuration, and then in the source folder is where all the magic happens, okay? This is where all the magic happens. This where you find your components, your global styles. So we have our global styles that we'll have for the entire application lives here.

[00:04:19]
Okay, the entire application global styles lives there. main.ts, this is like our Bootstrap file. So let's say you've done React before. Anybody ever done React before? Okay, so I think there's an index.js file that has the main function that kicks off everything. For us that's main.ts, okay? So in the Angular world, main.ts is where it kicks off everything that you're gonna have.

[00:04:42]
And the magic line, is line 5, is bootstrapApplication. So you say what your root component is to kick off the entire application, and then you provide an application configuration. And we'll get into that even more as we have to edit that file and edit that object. But for now, just know which component will I load my application with?

[00:05:04]
Well, you've looked in main.ts and it tells you. So can you tell me what's the name of the component that we will bootstrap this application with?
>> App component?
>> Yeah, that wasn't a trick question. I know I asked it like it was a trick question. It was not.

[00:05:17]
I don't ask trick questions. That's not interesting to me. No, it is app component. Okay, very good, very good. Excellent work, friends, right. So, app component. Now, if we were to go into app component, let's actually, just having a look and we'll go into what all of this stuff turns out to be.

[00:05:33]
But remember when you were just in angular.dev, and you updated that line of code, this is the same type of code. It's the same behavior. Got an application config, which if you have routing and other things, again, we'll spend more time here, but this is just like a high level overview of project.

[00:05:50]
app.routes, if you have routes that you wanna define, you put them in that file, okay? And this is the structure of a Angular application. This is it. Okay, this is it. This is a very basic Angular application. Application can actually be deployed. If you took this and you set up a deployment, let's say with Firebase or something like that, which we have a really nice integration with, you could deploy this with, you install Firebase into your project, and then sign in and ng-deploy, and then this can go up to the Internet if you wanted it to, okay.

[00:06:22]
And I'll be totally transparent. Angular has had an interesting reputation. One of the things you probably have heard is that it's really hard to learn and there's a high barrier to entry. The team has done a lot of work to change that and just the number of files has been reduced to help reduce that learning curve.

[00:06:41]
So that way when you're ready for more files, you add them. We haven't deprecated support for them. We're just like, hey, what do you really need to get started? And we give you what you need to get started now.