Basic Angular Concepts and Syntax

0:00[MUSIC PLAYING] Hi, everyone. Shaun Wassell here. Over the past decade or so, a number of very popular frameworks and libraries have come about for frontend development. And among those is Angular, which is an incredibly useful and structured tool that can be used to build websites. So what we're going to be taking a look at here today, we're going to start off by looking at what are some of the main benefits that Angular provides. And perhaps, a little more specifically, what benefits does Angular provide that you won't find in other tools such as the slightly more popular React?

0:37Additionally, we're also going to be creating and running our first Angular app. And we're going to take a look at the basic structure of an Angular project so that when you want to actually work on a website that's written in Angular, you'll know where to find everything. So that's our basic plan of attack for today. Let's jump right in.

0:00[AUDIO LOGO] OK, so before we jump into seeing how exactly Angular works, what its syntax is, how to create and run a project, et cetera, let's start off by talking about two of the main benefits of Angular. Now, these are just two of many possible benefits, but I chose these two because what I would consider to be the most important things that we get out of Angular.

0:30So the first main benefit of Angular is something called reusable components. Now, we're going to go into more detail on this shortly. But basically, reusable components form the backbone of most of modern web development. It's something that you'll see in React, it's something that you'll see in View, it's something that you'll see in pretty much every modern library or framework for web development. So we'll talk about what that is in just a minute but for now, just know that it's important.

1:02And the second main benefit of Angular is its predictable structure and patterns. Now, the first one, as I said, is something that's pretty common among most libraries these days. The second one here, however, is something that's a little bit more common to Angular. So again, we're going to go into more detail on what this predictable structure and patterns means for Angular, how it compares to other frameworks and libraries, et cetera but for now, just know that this is one of the main benefits that Angular provides.

1:33OK, so let's start talking, in a little bit more detail, about reusable components. So first of all, what are reusable components exactly? Well, to go into detail on this, let's imagine that we're building a fairly simple site, right. Maybe we're building a blog site. And on that site, we have a Home page, right. This would just be the site that says, welcome to my blog or something like that. We might have an About page. OK. And in addition to these, we probably will have many, many blog pages, right.

2:07I'm just going to draw them like this but chances are that we'd have hundreds, thousands, maybe even hundreds of thousands or millions of these blog pages, each of which is going to have a similar structure, right. So it'll have the title up here, probably, and it might have a cool photo to grab the user's attention, and then it might have the text of the article, complete with headings and text and code samples, et cetera.

2:38OK. So each of these blog pages has the same basic structure but different data, and that is where reusable components are especially useful, right. So essentially, what reusable components allow us to do is have a single component, a single layout if you will, where basically, we only define the important logic, and as I said, layout of some piece of our application and we're able to pass in the data later.

3:11So for the layout that I discussed up here, all we would define in this blog page component, if that was what we were going to do, is we would just define, basically a space where you could pass in the title, we'll see how to do that later on. We would allow ourselves to specify different URLs for this image here, right. So if we want to display mountains or something, we could do that. And obviously, for the text of the article, we would be able to pass that in as data as well. So what reusable components allow us to do is minimize the effort required to build and maintain sites.

3:48And here's what I mean by that, right. Again, let's imagine our blog site-- and let's imagine that we have a lot of different blog pages, each with the same layout. Now, let's imagine that we were to build each of these blog pages just using static HTML and CSS. Well, essentially, what that would mean is we would actually have to write out the entire DOM structure for each of these, right. So we would have the title, we might have the picture, we might have the text with all of its headings, et cetera.

4:19And this would all be written out in actual HTML, stored in separate files, one for each different blog page. OK. So in other words, if we have a million blog pages, we would also have a million HTML files. Now, the problem with this kind of thing comes in when we want to make some kind of change across all of our files. OK. So let's say that, I don't know, let's say that we wanted to add a signup form to each of our pages, right.

4:51A signup form that allows users to sign up for our email list. Well, if we wrote this in static HTML and CSS, what we would have to do is actually copy and paste that form, right. I'm just going to assume it'll look something like this. We would have to actually copy and paste the HTML structure for that form into each and every page in our site. And if there's a million pages then, we would probably at that point use something like Perl or something that would automate it a little bit for us.

5:22But the point is that is a pain to do and it's also very error prone, right. Because we might-- all of our pages might have little differences, and so we might end up missing several pages because the structure that we're trying to insert this form into, automatically, might be a little bit different, right. There might be a typo or something. So the point here is that with static files-- if we wrote this site in static HTML and CSS, that would be a very tedious task. However, with reusable components, which again is one of the main benefits of Angular, what we can do, right-- we would just have a single component, which would represent our page, right.

6:02Again, that's going to have like the title, the image, the content, et cetera, we would only have to add this signup form to that component. OK. So basically, if we were to just add this to this component, that would automatically be reflected in all of the pages that actually end up using this component. So we went from having to make a million changes for a million blog pages to one change for a million blog pages.

6:33OK. So those changes would automatically be reflected in all of the pages that actually use this component. So hopefully, you're seeing by now why reusable components are such a critical concept to understand in modern web development. Basically, what they allow us to do is instead of having to write our site as our users see it, as a collection of different pages, each with different content and different structure and different data, different functionality, et cetera, what we can do is just come up with some reusable components, like a form here, right.

7:14We might have a-- we might even go so far as to have a nice jumbotron image component that's capable of displaying different images, et cetera. We might have a comment form component that looks something like this, right. It allows users to enter in a comment, and then the comments are down below, right. And then what we can do is when we have these components, these reusable components, all we have to do to create the different pages in our application is assemble them, sort of like LEGO blocks, right.

7:51We could just have, let's say, our blog page again. And our blog page just has this image, right. This signup form and then, of course, we'd have the actual title and content of the article but then we could put this comment form at the bottom and really all we've had to do to create this page is insert the title and the content of each article into the page. So basically, it reduces the amount of code that we have to write by many orders of magnitude in some cases.

8:25And the beauty of this too is that if we wanted to then create an About page or a Home page or something, and we wanted to include the signup form on that, it would be really easy to just include the signup form in that page as well, right. All we have to do, right, as you'll see in Angular, is just say, we want to display the signup form component right here in this page. OK. And if we wanted to have comments on our About page as well, we could do that. It would be very easy to do.

8:56All we do is tell Angular we want to display this component here and it takes care of it for us. All right. So that's the basic concept of reusable components. And it's an incredibly useful topic. We're going to learn a lot more about it as we go on. But let's move on next to the second main benefit of Angular, which is predictable structure and patterns. OK. So as I mentioned before, this benefit is fairly unique to Angular because if you look at a library like React, for example, it doesn't really provide a whole lot of guidance with how you're supposed to organize your application.

9:37So if you want to have a folder that contains all of your components-- this is supposed to be a folder here. If you want have a folder that contains all of your components and each of your components are arranged by feature, let's say, right. So blog, products, shopping cart, et cetera, you can do it that way, right. This is in libraries like React as I said.

10:09OK. Now, the problem with this, this might sound like a good thing and in some cases it is, but my experience the end result of complete freedom with how you organize your project is a mess, right. That's the end result you get. Your code base just turns into one big mess that nobody knows where to find different components, different functions, et cetera, inside of. So what Angular does is it provides a very rigid folder structure, right. I'm just going to draw it like this. It provides a very rigid opinionated folder structure for how everything is supposed to be arranged.

10:45Now, the beauty of this, right-- and I'm just going to draw some appealing visuals here because you'll see all of this in more detail once we actually get to creating and running an Angular project, looking at all the different parts of an Angular project, et cetera, but these represent folders here and basic organization. The beauty of the organization, right, the project level organization that Angular provides is that you can take any Angular developer that's worked on any Angular project in the world and have them take a look at your project and immediately they're going to know where everything is, right.

11:23And that's a pretty powerful thing. Having worked as a React developer for a number of years, I can tell you that is definitely not the case with React because everything is just kind of jumbled mess more often than not. And this can even be teams at the same company that have different organizations, right. So one team might organize their project like this, one team might organize their project in a completely different way, right. Again, these are just some appealing visuals here, you'll see what the actual project structure looks like. But the point is that Angular provides a very opinionated rigid structure that, as I said, makes it so that any Angular developer anywhere in the world can work on essentially any Angular project that you might need them to work on.

12:08OK. So that's the rigid predictable structure that Angular provides. I also mentioned predictable patterns in Angular. So again, with React-- I'm just going to use React as sort of the counterpoint here. With React, let's say that you have an application running on your user's browser and you need to load data from a server. OK. Pretty simple thing. Now, how many different ways would you think that there are to do this in React?

12:38Well, first of all, let me ask you this, how many different ways do you think there need to be to load data from a server? In my opinion, there just needs to be one way to do everything, right. This is sort of the catch phrase from Python. There'd be one right way to do everything. Now, in React, I don't know the exact number of ways to do this but there are many ways to make this happen. Angular however, actually provides some guidance. So Angular is a lot more similar to a language like Python, in that respect, in that there's basically one right way to do anything.

13:18So there's one right way to load data from a server, there's one right way to share data between components, there's one right way to prevent a component from re-rendering, this is all stuff that we'll talk about later on by the way so don't worry about it. The point is that there's, generally, one right way to do everything in Angular, which again, with some other frameworks and libraries is not the case. So that's what I'm talking about when I say predictable patterns in Angular.

13:48And that is a huge benefit as we'll see going forward. So anyway, those are be two main benefits. Just to review, we saw reusable components, which make it possible to basically have infinite pages on our site with different data but the same structure, and it allows us to edit those pages, all of them at the same time. And it's not just pages either by the way, we'll get to that a little later on. Reusable components can be any piece of the website from a very big piece, like a page or even down to little things like buttons can be reusable components.

14:25So anyway, we'll talk about that later. But anyway, reusable components was main benefit number one in Angular. And main benefit number two is that Angular provides a nice predictable project structure that makes it very easy to know where everything is going to be. And if you know that you need to make some kind of change to the site, chances are you know where look in that project before you even open up the IDE. So that is benefit number two.

14:57Anyway, I hope this has been informative for you, and I'd like to thank you for viewing.

0:08OK. So now that we know a little bit about the basic benefits of Angular, and this will be a good thing to keep in mind as we go on because it will help us make sense of a lot of the design decisions that Angular has made, You'll see what I mean in just a minute here. Now that we've done that, the next question is, how do we actually create and run an Angular project? So creating and running an Angular project is a fairly straightforward process. Basically, there's just a script that you use to generate a new Angular project for you, automatically.

0:39And once we've actually created that project, running the project is just another script that will automatically take care of hosting our app locally, and we'll be able to just open it up in a browser as you'll see. So first of all, before we jump in to actually creating and running an Angular app, you're going to want to check your node in NPM versions. Now, the reason that this is important is quite frankly, because you'll just get some very weird errors if the versions for these two things are off. I can't tell you how many times I've been giving a course or something and someone has a weird error that I've never seen before, because they're using a node version that's a versions behind.

1:20So the way that you can actually check your node and NPM versions on your local computer, is by opening up a terminal, and I'm just using Visual Studio codes built in terminal for this. You're just going to want to type node-v, and that'll show you the node version that you have. And you're going to want to type in npm-v, and that should show you the NPM version that you have. Now, if you typed both of those commands in and you have something higher than I have, that's perfectly fine, everything should still work.

1:55If you have something significantly lower than I have, you're probably going to want to install an updated version of these things. Now, you might be wondering where to get that. And the place where you actually can get that is at node.js.org. OK, you're going to want to download the long term support version here. If you're feeling adventurous, you can always download the current version which has a lot of the cutting edge features to it, but I'm going to recommend the long term support version here. And you're just going to want to download that, run the installer, and that should get your versions up to date.

2:30Now, you may have noticed that my versions are a little bit behind. So I'm actually going to walk through this process with you. I'm just going to download this now, and I'm going to run the installer once it finishes downloading. OK, it's just going to open up, we're going to click on Continue, Continue, of course, you'll want to read all of that legal jargon if you have about four years to spare. We're going to click on Agree. It's just going to tell us where everything is going to be installed. We're going to click on Install and it's going to ask me for my password here.

3:03And that should run for a few seconds here, it generally takes very little time. And when it's done, you should hear a little bell and you should be able to click Close, Move to Trash. And you may have to refresh your terminal now for that to take effect. Let me just check that here. Nope, it's already been updated it looks like. My node version is the most up to date version for me, yours might be something else. And the NPM version as well, we see that that's updated by one patch version there.

3:38Now that we have those up to date, we can safely start running some Angular scripts and generating some projects, running our projects, et cetera. Question number one: how do we generate an Angular project? Well, as I already mentioned, we generate a project using a script, and that script is contained inside a package called the Angular CLI package. Now, first of all, what you're going to want to do is create a folder to store all of your Angular projects in. You don't have to do this but I recommend it just to keep everything organized here.

4:10So I'm just going to create a new directory here, and I'll just call it Angular. Then I'm going to change directories into that Angular directory. And this is where I'm going to generate my first project. So first of all, let's install the Angular CLI package globally in our computer. And the way that we do that is by saying npm install-g, and the package here is at Angular slash CLI. OK. If you hit Enter here, you may have to input your password and I believe I might have to use sudo here in order to make this command work.

4:47But basically, that will install that npm package for you globally so that you'll be able to use the ng command, which you'll see in just a minute, to generate a project. So it looks like I need to run this with sudo. My profile here doesn't have the correct permissions, so we'll just run that Enter in the password. And we'll wait for it to finish. There we go. Now, if you see this thing that says "There's a new major version of npm available," feel free to install that. I'm just going to leave that because this is the current version that was packaged with the node version that we just installed.

5:25But if you wanted to update that, you just have to run this command here. Now that you've installed that, you should be able to run this command ng--version. And what you should see is this big, fancy ASCII art Angular CLI thing with the current versions that you have installed of the Angular CLI, which is the package that we just installed. You'll see your current version of node, you'll see your current version of NPM, et cetera.

5:57We've installed that now and this ng thing that we used to get the version of the Angular CLI that we're using is also the main command that we're going to use to do things, like generate projects, add components to our projects, add services to our projects, lots and lots of things like that. To create a project, here's the moment you've been waiting for. The command that you use is ng new, and then you type in, whatever you want the name of the project to be.

6:28So I'm going to use my first Angular app and hit Enter. And it's going to ask us a series of questions about the desired setup. Again, this fits into Angular's predictable structure and predictable preferences. Basically, it just gives us a few different options. And if we want those options, it will set them up for us automatically in our boilerplate code. If we don't want those options yet, we can always go back and add them later.

6:58So the first question here is whether or not we want to add Angular routing. So Angular routing basically allows us to display different pages of our site depending on the URL up in the browser. So if the URL up in the browser is products or something like that, then we can set it up so that Angular will display the products page to the user. This is a very important concept, but we're actually going to take a look at this a little bit later on. So we're going to answer no here for the time being.

7:31So I'm just going to say no. The next thing it's going to ask us is what style sheet format we want to use. Now, there's a lot of options out there, and all of them have their merits. But just to keep things simple and straightforward, we're going to select CSS. Because everybody is already familiar with CSS so I won't have to teach you how to do Las or Sas, or all those other options. OK. So once we've answered those questions, and I feel like I remember there being more, but I suppose not.

8:02Once we've answered all those questions, it's going to run for a little while while it generates all the boilerplate code for our project. Now, what Angular is doing behind the scenes, the Angular CLI that is. It's basically just creating all of the different files for our project, all the different folders, it's organizing everything for us, it's installing all of our NPM dependencies, et cetera. Basically, it's going to give us a ready-made project structure that we can then just start developing with immediately.

8:37There's very little extra boilerplate code that we have to write ourselves after the Angular CLI has generated a project for us. OK. The project was finished generating now so we're going to take a look at that. But before we do, there's one final question I want to address, two of them, actually. One question is, is it possible to generate an entire Angular project from scratch? OK, and the answer to that question is, in theory, yes, but you would never, ever want to do this - well, almost never.

9:12And the reason for this is that, as you'll see in a minute here, there are a lot of files and a lot of boilerplate code in an Angular project. The second question that I get a lot about Angular development is, what IDE do I recommend using for developing Angular applications? The one that I use and recommend is called Visual Studio Code. If you want to download that, you can do so for free from Visual Studio Code's website, which currently is just code.visualstudio.com/download.

9:44If you can't find it, if it's changed, or something, Google is going to be your friend there. But I highly recommend using Visual Studio Code, it's super nice to work with. But if you want to use sublime or some kind of jet brains creation, you can feel free to do that as well. So anyway, those are two other questions that I get about Angular. Now that we've generated our project, let's open it up and get started here. The way that I'm going to open the project, you can always just use Control-O or go up to File Open.

10:16And this is one of the things that I like about Visual Studio Code, I'm just going to change directories into that project we just created. So CD, my first Angular app. And once you're inside of there, you can just type code. if you're using Visual Studio code that is. And that should open up a new Visual Studio code window inside that directory that you were just in. OK. So taking a look over here at the files in our project, we can see that there's quite a lot of files that Angular has generated for us.

10:50This is why I do not recommend trying to set up an Angular project from scratch, just use the CLI it's a lot easier. Now, we're going to go through what this entire project structure is, and where to look for everything when you want to make changes. But first, let's actually run our project. Now, running an Angular project, there's a few different ways that you can do it but they all point at the same basic command. The first way to do it is just typing ng serve, and hitting Enter.

11:23And what that'll do is actually build all of the code behind the scenes. And it will host it locally so that we can actually access our site in a browser. So once you see that it's compiled successfully, you're also going to see this message saying, "Angular Live Development Server is listening on local host: 4200," open your browser on blah, blah, blah to see it.

11:54And if you click on that and open it up in a browser, what you'll see is this thing right here, which is the boilerplate app that Angular provides for you. So everything that you see inside of here essentially is code that you can actually edit in the Angular project, which is pretty cool. It's got a lot of useful links. If you want to learn more about Angular, it's got a link to the docs, it's got the blog, it's got a link to Angular devtools, which we'll talk about a little bit later. And it also tells you a few other instructions, like, it shows you how to create components, which is something that we'll take a look at shortly.

12:32So that's the first way to run Angular. And just before we move on here, I do want to show you that you can actually edit pieces of this site here and see those changes reflected immediately. So as an example here, if you open up source app and app.component.html, you're going to see that this is all boilerplate code if you go down. And this is just a long piece of boilerplate code here so I'm going to do find and replace.

13:03Let's search for My First Angular App here. We're going to find that piece of text inside this file by saying Control-F and pasting that string. Oops, OK. I don't want to do that so let's go back to where I said. Let's find, here are some links. All right, we're just going to search for that string there. OK, we're going to say, here are some links. And if we change this now, if we change this text to something like, Useful Links Here, something like that, and save our file, we're going to see that immediately that is updated in our browser.

13:43OK. Now, this is something called hot reloading. Basically, whenever we make changes to our code inside our Angular project, Angular will automatically detect that and update what's being displayed inside the user's browser. So now that we've done that, the next thing that we're going to do is, I'm going to show you a few other ways to run an Angular project. And at first glance, this might seem like it goes a little bit against Angular having one right way to do everything. But as I mentioned before, all of these different ways basically point back to the same command, which is that ng serve command.

14:20Another way to actually host your application or to run it locally that is, is by typing ng serve and then adding the dash o flag. Now adding the dash o flag that stands for open, and basically that will just run your application, and it will automatically open your application in the browser. So that can save you the extra step as you see it just did that for me automatically. It's just a handy thing if you're going to insert that into some scripts, or that kind of thing.

14:53Another way to run it if you're allergic to typing is by saying ng s, and then you can add the dash o flag, or just leave it. And NGS is actually just a shortcut command for ng serve so you can run it like that as well, and that will be exactly the same thing. Again, I've never really found a reason to abbreviate things to that degree. But if you geek out on that kind of stuff, be my guest and use NGS everywhere instead of ng serve.

15:24Now, the last way to run an Angular app is by saying NPM run start, you can also just shorten that to NPM start. And what this will do is, it'll actually run the ng serve command behind the scenes, which you can see right here, through the package.json of the project. So if we just take a look at that right now, we'll go into more detail on this shortly. But the package.json file basically contains a script section which allows you to reference these commands by commands that you're used to.

16:01A lot of NPM or node or React developers are just used to saying NPM run start. So the fact that we have a smart script here, it allows developers to just run NPM run start, and have the project just automatically work. And this will also come in handy later on if we ever have to lengthen this command. If we ever have to do things like add a proxy to our application, or, if there's basically additional add-ons that we want to run our application with in development, we can just add those to this script, and the NPM run start command will remain the same instead of having to type out ng serve dash, dash proxy config equals blah, blah, blah, blah, blah.

16:50Don't worry about what that just was there. But the point is that, adding things to this package.json file to these scripts basically makes it so that we don't have to remember any complex commands once we get beyond the basic ng serve command. Anyway, those are the main ways to run an Angular app. I tend to just use NPM run start because it's consistent across the entire node.js NPM web development world pretty much. But you can use whichever one you're comfortable with.

17:22And in fact, if we want to have this automatically open a window every time, we can actually just add ng serve dash o to this start script. And now as you can see. When we say NPM run start, it will automatically open it up for us in a browser without us having to add any extra flags in the actual command that we're running. Let's just let that happen here and there we go, we see that it opens up automatically. And that's how you create and run a basic Angular app. I hope this has been informative for you and I'd like to thank you for viewing.

0:10Now that we've seen how to create and run an Angular project, the next thing that we're going to do is take a look at the actual structure that's provided for us by the Angular CLI. We saw, already, that Angular has generated quite a few basic, boilerplate files for us. And understanding what those files are and what they contain is a very important part of becoming an effective Angular developer. Because, as I said, the organization that you're going to see over here is pretty consistent throughout every Angular project that you'll find, pretty much, in the world.

0:47What we're going to do here is, just take a look at what all of these files and folders are, how they're organized, where everything is, et cetera. Outside, in the outermost directory of our Angular project, what you're going to see is that this is pretty much just a lot of configuration files for different pieces of technology that are involved in making an Angular project run. So, first and foremost, we have this package.json file, which contains a lot of information about the NPM project that this project represents.

1:26It's got things like, it's got the project name, that's the name that we gave our project when we first generated it. It's got the version. This is very useful for when we actually want to do releases and if we want to do things like continuous integration, continuous deployment, et cetera, keeping track of versions is very important. That's one thing you'll find in the package.json. We already saw scripts. These are, basically, just shortcuts for terminal commands that we can run. And you can literally add commands for anything you might want.

1:59We'll see how to do that later on. And besides that, don't worry too much about each and every little property. The main things to keep an eye on here are the dependencies and the dev dependencies. These are basically all of the NPM code, all of the NPM packages, which are just code that other people have written that our project relies on. Now, the difference between dependencies and dev dependencies is that dev dependencies are not installed when we do a production build.

2:31So essentially, all of the stuff that we have in here will not actually make its way into the production application when we build it. Now, this is important because it allows us to reduce the final bundle size of our application, so that it will load faster when users actually visit our website. That's the package.json file. Packagelock.json is, basically, just a much more in-depth version of the package.json file.

3:03You'll almost never edit this thing manually. All it does is, it helps NPM keep very accurate records of what dependencies our project uses and what dependencies those dependencies have. It's basically a detailed map of all of the different versions of those dependencies to make sure that our application runs the same across development environments. In addition to that, we have the typescriptconfig.app.json file and some of the other typescriptconfig files.

3:37Basically, these files allow us to modify the TypeScript settings for our project. Now, I probably haven't mentioned this yet. In fact, I don't think I have. But, Angular projects use TypeScript by default. Now, we're going to take a closer look at TypeScript and its relevant syntax a little bit later on. But, just know that TypeScript is JavaScript with static types added on top of it. Instead of declaring a variable like let x equals five, TypeScript actually allows us to add static typing.

4:12To the point where, we can say things like, let X number equals five. And then, X is now statically typed as a number. So again, this is something that's built into Angular, uses TypeScript instead of JavaScript. And this actually makes projects, in my experience, a lot more scalable and it makes it a lot easier to bring new developers on-board because, frankly, it makes it a lot easier to understand what all of the data is supposed to be, how components work.

4:45You'll see, when we get there, how it makes things easier. These three files, these tsconfig files, basically allow us to change the settings of TypeScript. So let's say that we don't want TypeScript to be as strict as the default or let's say we want it to be stricter than the default. What we can do is we can come in here and make those changes, just by changing some of these properties. There's obviously a lot more here and that's more something for a TypeScript course.

5:19What all of these files are and what each of these properties is. But, just know that this is where you come to actually change the TypeScript settings for your project. All right. So, besides those things, this karma dot config dot js file, this is for tests. This allows us to change how our karma tests are run. Karma is just one of the test libraries that Angular projects use by default. If you need to make some changes to that, this is the file where you'll do that.

5:53Angular dot JSON, this is sort of like what a package.json is to a node JS project, this is to an Angular project. It contains some very specific settings and quite a few of them as you can see that we can basically change in our Angular project, if we ever need to make some changes to how the Angular project itself does things. And the concerns that are represented inside this file are different than what you'll find in package.json.

6:30Besides that, we have just a few other things this just contains some configuration settings for whatever editor you're using that, so your editor can pick up on that. Get ignored, this just tells our project what files and not to commit. You'll see and hear things like node modules, so that we don't end up committing those and waiting several minutes while we push and pull code to and from GitHub. And, besides that, what other ones haven't I covered?

7:00The README.md file, this basically just contains some nice instructions in markdown syntax that describe the project. It tells you things like how the NG serve command works, tells you how to generate components here, tells you how to do a production build for your project, how to run tests, how to-- there's a lot of different things in here. Feel free to just read through this. They're very basic instructions, but they can be helpful if you are just getting started.

7:35And besides that, we have this .browserslistrc. This basically just contains a list of the different versions that our application supports of different browsers. So if you have specific browser needs, you're going to want to come in here and make some changes to this. Besides that, I personally don't find myself making too many changes here. All right. So those are all of the basic files inside the root directory of our project. Again, they're just mostly configuration files.

8:07I'll just write, "CONFIG FILES." You also have the node modules folder that just contains all the code for the dependencies. We generally won't ever touch this thing, so just pretend like it's not there. And next up is this source directory here. The source directory is where we'll make the vast majority of changes to our project and, more specifically, inside this app directory. The app directory is going to contain all of the code for our components all of the code for something called services, which we'll talk about later on.

8:42Basically it contains the core logic for our Angular application. The core business logic, if you will, that runs our site. We'll get back to that. We'll talk about what all of these strangely named files are shortly. But first, let's look at some of the other files. We have this assets directory. Basically, this contains any special assets our project needs. Images will go in here, as we'll see later on. That's pretty much the main thing that you'll usually put inside this assets folder as images-- SVGs too, I suppose.

9:19Environments-- this contains the environment variables for different environments that our project might run in. So when we're running our project just locally when we're developing our project, we're going to want to have a different set of environment variables than when we're running in production. And the main thing right now is that it just has this variable that says production true or production false. We'll see some instances later on where we'll want to add new environment variables to our project. But, for now, we'll just leave that alone.

9:53Underneath that, we have our favicon. That's, basically, just the little thing that displays on the tab in our browser. If you have the name of your app here, you'll have that little angular shield thing, unless you replace this with something else. So if you wanted to replace this with your own icon, all you have to do is just delete this file, replace it with another one called favicon.ico and that will automatically display in your browser when you're developing.

10:23Next up, we have index.html. This index.html file is where our Angular application will actually get rendered into and, a little bit more specifically, it will get rendered into this app route section. So essentially, what happens when a user visits our Angular app-- and we'll talk about this in more detail later on. But, what happens when we publish our app and a user tries to visit our site, is that the user's computer will make a request to whatever server or service our application is hosted on.

11:01I'm just going to draw a server here, for now, since that's easier to draw. It's just a big cube. All right. So the user's computer is going to make a request to our server. And this index.html file is going to be the first file that the server ends up sending back to the client side. OK. Now, what happens when it reaches the client is that the client will actually render this, the client's browser, that is, will actually render this HTML.

11:32And this HTML will contain some scripts where our actual Angular code will be. Now you don't see scripts inside of here anywhere. And that's because those are dynamically generated and inserted later on, when we actually build our app or when we run our development server, when we're just running our application in development, as we've seen. But the index.html file that the user's browser gets back will contain some script tags, each of which will force the user's browser to load that corresponding script from the server.

12:12And that, as I've said, is where the Angular code is. Basically, what this code will do, it'll find the app-root element in the page, and it will, basically, render all of our Angular application in its place. OK, so there's kind of a 2-step process here, as we've seen. The first one is the actual index.html file, which is what we see here. And the second one is the scripts.

12:43That's often more than one file that gets sent back to the client and that actually takes care of rendering all of our application based on the Angular code that we've written. All right. Now, if this confuses you, don't worry too much about it. A lot of this is something that, as an Angular developer, you won't have to worry about. But I just thought that would help explain the purpose of this index.html file and what it's doing in an Angular app in the first place.

13:13So that's the index.html file. The next file in this source directory is the main .ts file. What this file does, this is called the entry point of an Angular application. Basically, what it does is, this line of code, right here, is where all of the magic happens and where Angular actually starts to render all of the elements into the user's browser. So essentially, what this does is it kicks off all of the other code that we're going to write inside app and it'll basically just take care of rendering all of the components in our application, depending on the application data, depending on the URL, et cetera.

13:57So this is the entry point for our application. Generally, we won't make any changes here. There are a few situations where you will, but more often than not, this file will remain unchanged in most Angular projects. So next up, we have polyfills.ts. This is, basically, where you come to add polyfill packages. Basically, polyfill packages just allow you to support older browsers without having to incorporate those browsers needs into your codes.

14:28So if you need to do something like install fetch polyfill, if you're making network requests using fetch, you would just say, "import." And then, you would have a fetch polyfill package, which I think is, I think, "whatwg-fetch," or something like that, you could just add that here. Any other fills that you need, generally, if your boss tells you that you need to support Internet Explorer 6, polyfills.ts is going to be your friend there. But in most cases, you won't make very many changes to that file.

15:01Next up, we have styles.css. This just contains any global styles that you want for your application. So if you want all of the buttons in your application to look a certain way, by default or inputs or headings or paragraphs or divs, et cetera, this is where you're going to add those. OK. We'll see how that works a little bit later on. And last, but not least, we have test.ts. Now, test.ts, this basically just takes care of setting up the tests for our application. And we're not going to take a look at testing and Angular for a little while.

15:34But, when we do, this is one of the central places where we're going to do so. OK. So those are the main files and folders inside our source directory. The last thing we're going to take a look at here is what's inside our app directory. This is, as I said, the most important code that developers are going to have to work on. It basically contains all of our components, all of our business logic, et cetera. So first of all, one of the main important things that this app folder contains is what's called the app component.

16:08The app component-- I've been drawing Angular applications as a series of nested squares here, the idea being that each of these squares is a component. The app component is the outermost component that takes care of rendering all the other components in our application. So the app component would be this one here. In other words, it's the component that contains all other components in our Angular application.

16:42Now you may notice that there are not one, not two, not three, but four different app.component dot-something files here. And the reason for that comes back to the predictable structure benefit that I talked about at the beginning of this section. Basically, each of these files allows us to define a different aspect of our component. So we see that we have a CSS file. This is where we define the specific styles for our component.

17:14Now the styles in here will apply only to the component that they're in. | go into more detail on that later on, but this is basically the styles for the component. We have an HTML file and this one you're going to notice first of all, that it has a style tag, which might be a little confusing at first. Really, the reason that it has styles in it to begin with is just because Angular wanted to have their little advertisement boilerplate website, as soon as you generate the project, and they wanted to make it easy for you to delete when you actually wanted to start writing your own code.

17:51So that's the reason the styles are in here, but they usually won't be. The styles will usually be inside the CSS file for a component. Now, if you scroll down past the styles, you're going to see some HTML. And this points at what the HTML file does for our components. Basically, it allows us to define the "dom" structure of our components. It basically allows us to define what our components are going to look like, or how they're going to be organized on the page.

18:25Again, it generally doesn't contain any styles, since those are in the CSS file. But it does contain things, like, there's going to be a div, there's going to be an image here. There's going to be a span here with this text. And this is also where we're going to be doing things like inserting data into the user's browser. Now one thing you're going to notice about HTML, and we're going to go into more detail on this later. but one thing you'll notice about the HTML files in Angular projects is that they have these weird little double, curly brace things.

18:56These are basically how we insert data from the component's TypeScript file-- I'm using this as a segue into this file-- into our HTML. So if we go over to our TypeScript file, you're going to see that, first of all, our component is defined as a TypeScript class and that this class has member variables of some sort. You can add whatever member variables you want. Now, the point of this TypeScript file is to contain the data of each component and to also contain any logic that component needs to execute.

19:36Things like loading data. Things like processing data, basic pieces of data, such as the title. And all of this is generally displayed through the HTML of our components. So if you take a look at this title member variable here, you're going to see that that's being displayed inside our inside our HTML span here, just using those double curly braces. Again, we're going to go into a lot more detail on how that relationship works.

20:08But just know, for now, that the CSS file is the styles, the HTML file is the structure, and the TypeScript file is the logic. If any of you are familiar with the MVC setup, Angular follows that a lot more closely than some of the other libraries out there, such as React. The last thing here is this spec.ts file. Basically, this contains all of the tests for an individual component.

20:39And we're not going to be talking too much about tests, for the time being, but just know that when you start testing, the spec.ts file is going to be your friend. Those are the four main files of an Angular component and, as you'll see, every component that we're going to generate in Angular has those four files. It has the HTML file, has the CSS file, has the TypeScript file, and it has the test file, which is called spec.

21:12Anyway, that is most of the files. The last file that we haven't looked at is the app module file. It's called app.module.ts. The app.module.ts file has a number of responsibilities. Now, the first responsibility is that, which you can see inside this Ng module. We'll talk a little bit more about what this weird-looking syntax is shortly. But first of all, we have this declaration's thing basically the declarations property inside an app module that's file is all of the components that we've created inside our application.

21:48As you'll see when we generate new components they'll appear inside of here. Now the reason we need this thing has to do mainly with how Angular works behind the scenes and how it ends up processing things and running our applications. So don't worry too much about it right now, but, that's basically what it is. Just all of the components that we've created in our application. The next thing that we have here is this imports property. And what this imports property does is it allows us to add extra functionality to our Angular apps.

22:20So Angular apps, as a whole, or the Angular framework as a whole, follows the sort of plug-in architecture. So as you'll see, when we want to start doing things, like adding network requests to our application, we're going to import what's called a module that will basically contain all the functionality that we need to make network requests. And we won't really have to write much of the code for that ourselves. And once we've imported that, all we have to do is add that to imports and, automatically, that plug-in functionality will be added to our Angular project Again, there's lots of situations where we're going to need to do this.

22:59For now, just know that that's the purpose of this imports property. Bootstrap just tells Angular what the main entry point of our application is, what the top-level component is. We're almost always going to leave this on app component, so I'm not too worried about this. And, providers, this is something that we'll talk about when we get into something called services in Angular. But it's sort of like the declarations thing up here for components, except, as I said, for services. So we'll talk about that a little bit later on, but that's the app module file.

23:31We will be coming back here, from time to time, to add extra plug-ins and functionality to our app. It's a very important file. And that should be all of the files. So, hopefully, this little tour has given you a better sense of how an Angular project fits together and how everything is organized. And as I mentioned before, a knowledge of how this thing is organized allows you to work on pretty much any Angular application in the world, which is one of the big strengths of Angular projects is that organization.

24:02I hope this has been informative for you and I'd like to thank you for viewing.