Basic Angular Concepts and Syntax

0:00[MUSIC PLAYING]

0:06Hi, everyone.

0:06Shaun Wassell here.

0:08Over the past decade or so, a number

0:09of very popular frameworks and libraries

0:12have come about for frontend development.

0:14And among those is Angular, which

0:15is an incredibly useful and structured tool that

0:19can be used to build websites.

0:20So what we're going to be taking a look at here today,

0:23we're going to start off by looking

0:24at what are some of the main benefits that Angular provides.

0:27And perhaps, a little more specifically,

0:29what benefits does Angular provide

0:32that you won't find in other tools such as the slightly more

0:35popular React?

0:37Additionally, we're also going to be creating and running

0:39our first Angular app.

0:41And we're going to take a look at the basic structure

0:44of an Angular project so that when you want to actually work

0:48on a website that's written in Angular,

0:49you'll know where to find everything.

0:51So that's our basic plan of attack for today.

0:53Let's jump right in.

0:00[AUDIO LOGO]

0:09OK, so before we jump into seeing how exactly Angular

0:12works, what its syntax is, how to create and run

0:15a project, et cetera, let's start off by talking about two

0:18of the main benefits of Angular.

0:21Now, these are just two of many possible benefits,

0:24but I chose these two because what

0:26I would consider to be the most important things that we

0:29get out of Angular.

0:30So the first main benefit of Angular

0:33is something called reusable components.

0:36Now, we're going to go into more detail on this shortly.

0:39But basically, reusable components

0:41form the backbone of most of modern web development.

0:45It's something that you'll see in React,

0:48it's something that you'll see in View, it's something

0:51that you'll see in pretty much every modern library

0:54or framework for web development.

0:57So we'll talk about what that is in just a minute

1:00but for now, just know that it's important.

1:02And the second main benefit of Angular

1:04is its predictable structure and patterns.

1:08Now, the first one, as I said, is

1:10something that's pretty common among most libraries

1:13these days.

1:13The second one here, however, is something

1:16that's a little bit more common to Angular.

1:19So again, we're going to go into more detail on what

1:22this predictable structure and patterns means for Angular, how

1:24it compares to other frameworks and libraries, et cetera

1:27but for now, just know that this is one of the main benefits

1:31that Angular provides.

1:33OK, so let's start talking, in a little bit more detail,

1:36about reusable components.

1:38So first of all, what are reusable components exactly?

1:41Well, to go into detail on this, let's

1:44imagine that we're building a fairly simple site, right.

1:47Maybe we're building a blog site.

1:49And on that site, we have a Home page, right.

1:53This would just be the site that says, welcome to my blog

1:56or something like that.

1:57We might have an About page.

2:02OK.

2:02And in addition to these, we probably

2:05will have many, many blog pages, right.

2:07I'm just going to draw them like this

2:09but chances are that we'd have hundreds, thousands, maybe

2:13even hundreds of thousands or millions

2:15of these blog pages, each of which

2:18is going to have a similar structure, right.

2:22So it'll have the title up here, probably,

2:25and it might have a cool photo to grab the user's attention,

2:30and then it might have the text of the article,

2:33complete with headings and text and code samples, et cetera.

2:38OK.

2:38So each of these blog pages has the same basic structure

2:42but different data, and that is where reusable components

2:46are especially useful, right.

2:49So essentially, what reusable components allow us to do

2:52is have a single component, a single layout if you will,

2:59where basically, we only define the important logic,

3:03and as I said, layout of some piece

3:07of our application and we're able to pass in the data later.

3:11So for the layout that I discussed up here,

3:15all we would define in this blog page component, if that was

3:19what we were going to do, is we would just define,

3:22basically a space where you could pass in the title,

3:26we'll see how to do that later on.

3:28We would allow ourselves to specify different URLs

3:30for this image here, right.

3:31So if we want to display mountains or something,

3:33we could do that.

3:34And obviously, for the text of the article,

3:37we would be able to pass that in as data as well.

3:41So what reusable components allow us to do

3:43is minimize the effort required to build and maintain sites.

3:48And here's what I mean by that, right.

3:50Again, let's imagine our blog site--

3:51and let's imagine that we have a lot of different blog pages,

3:55each with the same layout.

3:57Now, let's imagine that we were to build

3:59each of these blog pages just using static HTML and CSS.

4:05Well, essentially, what that would mean

4:07is we would actually have to write out the entire DOM

4:11structure for each of these, right.

4:12So we would have the title, we might have the picture,

4:15we might have the text with all of its headings, et cetera.

4:19And this would all be written out in actual HTML,

4:23stored in separate files, one for each different blog page.

4:28OK.

4:28So in other words, if we have a million blog pages,

4:32we would also have a million HTML files.

4:35Now, the problem with this kind of thing

4:37comes in when we want to make some kind of change

4:40across all of our files.

4:43OK.

4:43So let's say that, I don't know, let's say

4:46that we wanted to add a signup form to each of our pages,

4:50right.

4:51A signup form that allows users to sign up for our email list.

4:54Well, if we wrote this in static HTML and CSS,

4:58what we would have to do is actually copy and paste

5:02that form, right.

5:03I'm just going to assume it'll look something like this.

5:06We would have to actually copy and paste

5:08the HTML structure for that form into each

5:11and every page in our site.

5:14And if there's a million pages then,

5:16we would probably at that point use

5:18something like Perl or something that would automate

5:21it a little bit for us.

5:22But the point is that is a pain to do

5:25and it's also very error prone, right.

5:28Because we might-- all of our pages

5:31might have little differences, and so we might end up

5:33missing several pages because the structure that we're

5:36trying to insert this form into, automatically,

5:39might be a little bit different, right.

5:40There might be a typo or something.

5:42So the point here is that with static files--

5:45if we wrote this site in static HTML and CSS,

5:48that would be a very tedious task.

5:51However, with reusable components,

5:53which again is one of the main benefits of Angular, what

5:56we can do, right-- we would just have

5:58a single component, which would represent our page, right.

6:02Again, that's going to have like the title, the image,

6:06the content, et cetera, we would only

6:09have to add this signup form to that component.

6:13OK.

6:13So basically, if we were to just add this to this component,

6:18that would automatically be reflected

6:20in all of the pages that actually end up

6:23using this component.

6:25So we went from having to make a million changes

6:29for a million blog pages to one change for a million blog

6:32pages.

6:33OK.

6:34So those changes would automatically

6:36be reflected in all of the pages that

6:38actually use this component.

6:41So hopefully, you're seeing by now

6:43why reusable components are such a critical concept

6:47to understand in modern web development.

6:49Basically, what they allow us to do

6:51is instead of having to write our site as our users see

6:56it, as a collection of different pages,

7:00each with different content and different structure

7:03and different data, different functionality, et cetera,

7:07what we can do is just come up with some reusable components,

7:12like a form here, right.

7:14We might have a-- we might even go so far

7:16as to have a nice jumbotron image

7:20component that's capable of displaying

7:22different images, et cetera.

7:24We might have a comment form component

7:29that looks something like this, right.

7:31It allows users to enter in a comment,

7:34and then the comments are down below, right.

7:38And then what we can do is when we

7:41have these components, these reusable components, all

7:44we have to do to create the different pages

7:46in our application is assemble them, sort of like LEGO blocks,

7:50right.

7:51We could just have, let's say, our blog page again.

7:55And our blog page just has this image, right.

8:00This signup form and then, of course, we'd

8:05have the actual title and content of the article

8:08but then we could put this comment form at the bottom

8:10and really all we've had to do to create

8:13this page is insert the title and the content of each article

8:18into the page.

8:19So basically, it reduces the amount of code

8:21that we have to write by many orders of magnitude

8:24in some cases.

8:25And the beauty of this too is that if we wanted

8:28to then create an About page or a Home page or something,

8:31and we wanted to include the signup form on that,

8:35it would be really easy to just include the signup form

8:38in that page as well, right.

8:40All we have to do, right, as you'll see in Angular,

8:43is just say, we want to display the signup form component

8:46right here in this page.

8:50OK.

8:50And if we wanted to have comments on our About page

8:52as well, we could do that.

8:54It would be very easy to do.

8:56All we do is tell Angular we want

8:58to display this component here and it takes care of it for us.

9:01All right.

9:02So that's the basic concept of reusable components.

9:05And it's an incredibly useful topic.

9:08We're going to learn a lot more about it as we go on.

9:10But let's move on next to the second main benefit of Angular,

9:14which is predictable structure and patterns.

9:18OK.

9:19So as I mentioned before, this benefit

9:22is fairly unique to Angular because if you

9:26look at a library like React, for example,

9:29it doesn't really provide a whole lot of guidance

9:33with how you're supposed to organize your application.

9:37So if you want to have a folder that contains

9:40all of your components--

9:42this is supposed to be a folder here.

9:44If you want have a folder that contains all of your components

9:47and each of your components are arranged by feature,

9:50let's say, right.

9:51So blog, products, shopping cart, et cetera,

10:04you can do it that way, right.

10:06This is in libraries like React as I said.

10:09OK.

10:09Now, the problem with this, this might sound like a good thing

10:12and in some cases it is, but my experience

10:14the end result of complete freedom with how you organize

10:18your project is a mess, right.

10:20That's the end result you get.

10:22Your code base just turns into one big mess

10:24that nobody knows where to find different components,

10:28different functions, et cetera, inside of.

10:31So what Angular does is it provides a very rigid folder

10:34structure, right.

10:36I'm just going to draw it like this.

10:37It provides a very rigid opinionated folder structure

10:41for how everything is supposed to be arranged.

10:45Now, the beauty of this, right-- and I'm

10:47just going to draw some appealing visuals here

10:50because you'll see all of this in more detail once we actually

10:54get to creating and running an Angular project,

10:57looking at all the different parts of an Angular

10:59project, et cetera, but these represent folders here

11:02and basic organization.

11:04The beauty of the organization, right, the project level

11:08organization that Angular provides

11:10is that you can take any Angular developer that's

11:14worked on any Angular project in the world

11:17and have them take a look at your project

11:19and immediately they're going to know

11:20where everything is, right.

11:23And that's a pretty powerful thing.

11:24Having worked as a React developer

11:26for a number of years, I can tell you

11:27that is definitely not the case with React

11:31because everything is just kind of jumbled mess

11:34more often than not.

11:35And this can even be teams at the same company that have

11:38different organizations, right.

11:40So one team might organize their project like this,

11:43one team might organize their project

11:45in a completely different way, right.

11:47Again, these are just some appealing visuals here,

11:49you'll see what the actual project structure looks like.

11:52But the point is that Angular provides a very opinionated

11:57rigid structure that, as I said, makes it so that any Angular

12:01developer anywhere in the world can work on essentially

12:04any Angular project that you might need them to work on.

12:08OK.

12:08So that's the rigid predictable structure

12:12that Angular provides.

12:13I also mentioned predictable patterns in Angular.

12:17So again, with React--

12:18I'm just going to use React as sort of the counterpoint here.

12:21With React, let's say that you have an application running

12:25on your user's browser and you need

12:28to load data from a server.

12:32OK.

12:33Pretty simple thing.

12:34Now, how many different ways would

12:36you think that there are to do this in React?

12:38Well, first of all, let me ask you

12:40this, how many different ways do you

12:41think there need to be to load data from a server?

12:45In my opinion, there just needs to be one way to do everything,

12:49right.

12:50This is sort of the catch phrase from Python.

12:55There'd be one right way to do everything.

12:58Now, in React, I don't know the exact number of ways to do this

13:01but there are many ways to make this happen.

13:05Angular however, actually provides some guidance.

13:08So Angular is a lot more similar to a language like Python,

13:13in that respect, in that there's basically one

13:17right way to do anything.

13:18So there's one right way to load data from a server,

13:21there's one right way to share data between components,

13:25there's one right way to prevent a component from re-rendering,

13:28this is all stuff that we'll talk about later on by the way

13:30so don't worry about it.

13:32The point is that there's, generally, one right

13:35way to do everything in Angular, which

13:38again, with some other frameworks and libraries

13:41is not the case.

13:42So that's what I'm talking about when

13:44I say predictable patterns in Angular.

13:48And that is a huge benefit as we'll see going forward.

13:51So anyway, those are be two main benefits.

13:54Just to review, we saw reusable components,

13:57which make it possible to basically

14:00have infinite pages on our site with different data

14:05but the same structure, and it allows

14:06us to edit those pages, all of them at the same time.

14:10And it's not just pages either by the way,

14:12we'll get to that a little later on.

14:14Reusable components can be any piece

14:15of the website from a very big piece, like a page

14:20or even down to little things like buttons

14:23can be reusable components.

14:25So anyway, we'll talk about that later.

14:27But anyway, reusable components was main benefit number one

14:31in Angular.

14:33And main benefit number two is that Angular provides

14:36a nice predictable project structure that

14:40makes it very easy to know where everything is going to be.

14:44And if you know that you need to make some kind of change

14:47to the site, chances are you know where look in that project

14:52before you even open up the IDE.

14:54So that is benefit number two.

14:57Anyway, I hope this has been informative for you,

14:59and I'd like to thank you for viewing.

0:08OK.

0:08So now that we know a little bit about the basic benefits

0:11of Angular, and this will be a good thing

0:13to keep in mind as we go on because it will help us make

0:15sense of a lot of the design decisions

0:17that Angular has made, You'll see what

0:19I mean in just a minute here.

0:21Now that we've done that, the next question is,

0:23how do we actually create and run an Angular project?

0:28So creating and running an Angular project

0:30is a fairly straightforward process.

0:32Basically, there's just a script that you

0:35use to generate a new Angular project for you, automatically.

0:39And once we've actually created that project,

0:41running the project is just another script

0:44that will automatically take care

0:46of hosting our app locally, and we'll

0:48be able to just open it up in a browser as you'll see.

0:51So first of all, before we jump in to actually creating

0:55and running an Angular app, you're

0:56going to want to check your node in NPM versions.

1:00Now, the reason that this is important

1:03is quite frankly, because you'll just

1:04get some very weird errors if the versions for these two

1:08things are off.

1:09I can't tell you how many times I've been giving a course

1:12or something and someone has a weird error that I've never

1:15seen before, because they're using a node version that's

1:18a versions behind.

1:20So the way that you can actually check your node and NPM

1:24versions on your local computer, is by opening up a terminal,

1:28and I'm just using Visual Studio codes built in terminal

1:32for this.

1:33You're just going to want to type node-v,

1:36and that'll show you the node version that you have.

1:39And you're going to want to type in npm-v,

1:43and that should show you the NPM version that you have.

1:47Now, if you typed both of those commands in

1:49and you have something higher than I have,

1:51that's perfectly fine, everything should still work.

1:55If you have something significantly lower than I

1:57have, you're probably going to want to install an updated

2:01version of these things.

2:03Now, you might be wondering where to get that.

2:06And the place where you actually can get that is at node.js.org.

2:10OK, you're going to want to download the long term support

2:13version here.

2:13If you're feeling adventurous, you

2:15can always download the current version which

2:17has a lot of the cutting edge features to it,

2:20but I'm going to recommend the long term support version here.

2:22And you're just going to want to download that,

2:25run the installer, and that should get your versions up

2:29to date.

2:30Now, you may have noticed that my versions are a little bit

2:32behind.

2:33So I'm actually going to walk through this process with you.

2:36I'm just going to download this now,

2:38and I'm going to run the installer

2:41once it finishes downloading.

2:43OK, it's just going to open up, we're

2:45going to click on Continue, Continue, of course,

2:48you'll want to read all of that legal jargon

2:50if you have about four years to spare.

2:53We're going to click on Agree.

2:55It's just going to tell us where everything

2:57is going to be installed.

2:58We're going to click on Install and it's going

3:00to ask me for my password here.

3:03And that should run for a few seconds here,

3:06it generally takes very little time.

3:09And when it's done, you should hear a little bell

3:11and you should be able to click Close, Move to Trash.

3:15And you may have to refresh your terminal now

3:18for that to take effect.

3:20Let me just check that here.

3:21Nope, it's already been updated it looks like.

3:24My node version is the most up to date version for me,

3:29yours might be something else.

3:30And the NPM version as well, we see

3:33that that's updated by one patch version there.

3:38Now that we have those up to date,

3:39we can safely start running some Angular scripts

3:43and generating some projects, running

3:45our projects, et cetera.

3:47Question number one: how do we generate an Angular project?

3:51Well, as I already mentioned, we generate a project

3:53using a script, and that script is

3:56contained inside a package called the Angular CLI package.

4:00Now, first of all, what you're going to want to do

4:02is create a folder to store all of your Angular projects in.

4:06You don't have to do this but I recommend it just

4:08to keep everything organized here.

4:10So I'm just going to create a new directory here,

4:13and I'll just call it Angular.

4:15Then I'm going to change directories

4:17into that Angular directory.

4:19And this is where I'm going to generate my first project.

4:23So first of all, let's install the Angular CLI package

4:27globally in our computer.

4:29And the way that we do that is by saying npm install-g,

4:33and the package here is at Angular slash CLI.

4:40OK.

4:40If you hit Enter here, you may have to input your password

4:43and I believe I might have to use sudo here in order

4:46to make this command work.

4:47But basically, that will install that npm package for you

4:51globally so that you'll be able to use the ng command, which

4:55you'll see in just a minute, to generate a project.

4:58So it looks like I need to run this with sudo.

5:01My profile here doesn't have the correct permissions,

5:04so we'll just run that Enter in the password.

5:08And we'll wait for it to finish.

5:10There we go.

5:12Now, if you see this thing that says "There's

5:14a new major version of npm available,"

5:16feel free to install that.

5:17I'm just going to leave that because this

5:19is the current version that was packaged with the node version

5:23that we just installed.

5:25But if you wanted to update that,

5:26you just have to run this command here.

5:30Now that you've installed that, you should be able to run this

5:34command ng--version.

5:38And what you should see is this big, fancy ASCII art Angular

5:43CLI thing with the current versions

5:46that you have installed of the Angular

5:48CLI, which is the package that we just installed.

5:51You'll see your current version of node,

5:53you'll see your current version of NPM, et cetera.

5:57We've installed that now and this ng thing that we used

6:01to get the version of the Angular CLI that we're using

6:04is also the main command that we're

6:07going to use to do things, like generate projects,

6:09add components to our projects, add services to our projects,

6:14lots and lots of things like that.

6:17To create a project, here's the moment you've been waiting for.

6:20The command that you use is ng new,

6:24and then you type in, whatever you want

6:26the name of the project to be.

6:28So I'm going to use my first Angular app and hit Enter.

6:34And it's going to ask us a series of questions

6:38about the desired setup.

6:40Again, this fits into Angular's predictable structure

6:44and predictable preferences.

6:46Basically, it just gives us a few different options.

6:49And if we want those options, it will set them

6:51up for us automatically in our boilerplate code.

6:54If we don't want those options yet,

6:56we can always go back and add them later.

6:58So the first question here is whether or not

7:01we want to add Angular routing.

7:03So Angular routing basically allows

7:05us to display different pages of our site

7:09depending on the URL up in the browser.

7:12So if the URL up in the browser is products or something

7:16like that, then we can set it up so that Angular will display

7:21the products page to the user.

7:23This is a very important concept,

7:25but we're actually going to take a look at this a little bit

7:27later on.

7:28So we're going to answer no here for the time being.

7:31So I'm just going to say no.

7:33The next thing it's going to ask us

7:35is what style sheet format we want to use.

7:38Now, there's a lot of options out there, and all of them

7:42have their merits.

7:42But just to keep things simple and straightforward,

7:45we're going to select CSS.

7:48Because everybody is already familiar with CSS so

7:51I won't have to teach you how to do Las or Sas, or all

7:54those other options.

7:56OK.

7:57So once we've answered those questions,

8:00and I feel like I remember there being more, but I suppose not.

8:02Once we've answered all those questions,

8:04it's going to run for a little while

8:06while it generates all the boilerplate

8:08code for our project.

8:10Now, what Angular is doing behind the scenes,

8:13the Angular CLI that is.

8:15It's basically just creating all of the different files

8:19for our project, all the different folders,

8:21it's organizing everything for us,

8:23it's installing all of our NPM dependencies, et cetera.

8:29Basically, it's going to give us a ready-made project structure

8:33that we can then just start developing with immediately.

8:37There's very little extra boilerplate code

8:40that we have to write ourselves after the Angular CLI has

8:45generated a project for us.

8:47OK.

8:47The project was finished generating now

8:49so we're going to take a look at that.

8:50But before we do, there's one final question

8:53I want to address, two of them, actually.

8:56One question is, is it possible to generate an entire Angular

9:01project from scratch?

9:03OK, and the answer to that question is, in theory, yes,

9:07but you would never, ever want to do this - well,

9:11almost never.

9:12And the reason for this is that, as you'll see in a minute here,

9:15there are a lot of files and a lot of boilerplate

9:19code in an Angular project.

9:21The second question that I get a lot about Angular development

9:24is, what IDE do I recommend using for developing Angular

9:29applications?

9:31The one that I use and recommend is called Visual Studio Code.

9:34If you want to download that, you can do so for free from

9:37Visual Studio Code's website, which currently is just

9:40code.visualstudio.com/download.

9:44If you can't find it, if it's changed, or something,

9:47Google is going to be your friend there.

9:49But I highly recommend using Visual Studio Code,

9:52it's super nice to work with.

9:54But if you want to use sublime or some kind of jet brains

9:59creation, you can feel free to do that as well.

10:02So anyway, those are two other questions

10:03that I get about Angular.

10:05Now that we've generated our project,

10:06let's open it up and get started here.

10:09The way that I'm going to open the project,

10:11you can always just use Control-O

10:14or go up to File Open.

10:16And this is one of the things that I like about Visual Studio

10:19Code, I'm just going to change directories

10:21into that project we just created.

10:23So CD, my first Angular app.

10:26And once you're inside of there, you can just type code.

10:30if you're using Visual Studio code that is.

10:33And that should open up a new Visual Studio code

10:36window inside that directory that you were just in.

10:39OK.

10:40So taking a look over here at the files in our project,

10:43we can see that there's quite a lot of files

10:46that Angular has generated for us.

10:50This is why I do not recommend trying

10:52to set up an Angular project from scratch,

10:55just use the CLI it's a lot easier.

10:58Now, we're going to go through what this entire project

11:01structure is, and where to look for everything when

11:06you want to make changes.

11:07But first, let's actually run our project.

11:11Now, running an Angular project, there's a few different ways

11:13that you can do it but they all point

11:15at the same basic command.

11:18The first way to do it is just typing ng serve,

11:22and hitting Enter.

11:23And what that'll do is actually build all of the code

11:26behind the scenes.

11:28And it will host it locally so that we can actually

11:31access our site in a browser.

11:41So once you see that it's compiled successfully,

11:43you're also going to see this message saying,

11:45"Angular Live Development Server is

11:47listening on local host: 4200," open your browser on blah,

11:52blah, blah to see it.

11:54And if you click on that and open it up

11:56in a browser, what you'll see is this thing right here,

11:59which is the boilerplate app that Angular provides for you.

12:03So everything that you see inside of here essentially

12:06is code that you can actually edit in the Angular

12:10project, which is pretty cool.

12:13It's got a lot of useful links.

12:14If you want to learn more about Angular,

12:16it's got a link to the docs, it's

12:18got the blog, it's got a link to Angular devtools,

12:21which we'll talk about a little bit later.

12:23And it also tells you a few other instructions,

12:27like, it shows you how to create components, which is something

12:30that we'll take a look at shortly.

12:32So that's the first way to run Angular.

12:35And just before we move on here, I

12:38do want to show you that you can actually

12:39edit pieces of this site here and see those changes reflected

12:43immediately.

12:44So as an example here, if you open up

12:47source app and app.component.html,

12:52you're going to see that this is all boilerplate

12:54code if you go down.

12:56And this is just a long piece of boilerplate code

13:00here so I'm going to do find and replace.

13:03Let's search for My First Angular App here.

13:07We're going to find that piece of text inside this file

13:09by saying Control-F and pasting that string.

13:14Oops, OK.

13:15I don't want to do that so let's go back to where I said.

13:19Let's find, here are some links.

13:21All right, we're just going to search for that string there.

13:25OK, we're going to say, here are some links.

13:27And if we change this now, if we change this text to something

13:31like, Useful Links Here, something like that,

13:38and save our file, we're going to see that immediately that

13:41is updated in our browser.

13:43OK.

13:44Now, this is something called hot reloading.

13:46Basically, whenever we make changes

13:48to our code inside our Angular project,

13:51Angular will automatically detect that

13:53and update what's being displayed

13:55inside the user's browser.

13:56So now that we've done that, the next thing that we're

13:59going to do is, I'm going to show you a few other ways

14:02to run an Angular project.

14:04And at first glance, this might seem

14:05like it goes a little bit against Angular having

14:08one right way to do everything.

14:10But as I mentioned before, all of these different ways

14:12basically point back to the same command,

14:16which is that ng serve command.

14:20Another way to actually host your application

14:23or to run it locally that is, is by typing ng serve

14:27and then adding the dash o flag.

14:30Now adding the dash o flag that stands for open,

14:32and basically that will just run your application,

14:36and it will automatically open your application

14:39in the browser.

14:40So that can save you the extra step

14:41as you see it just did that for me automatically.

14:45It's just a handy thing if you're

14:47going to insert that into some scripts, or that kind of thing.

14:53Another way to run it if you're allergic to typing

14:56is by saying ng s, and then you can add the dash o flag,

15:01or just leave it.

15:03And NGS is actually just a shortcut command for ng

15:06serve so you can run it like that as well,

15:08and that will be exactly the same thing.

15:11Again, I've never really found a reason

15:13to abbreviate things to that degree.

15:17But if you geek out on that kind of stuff, be my guest

15:20and use NGS everywhere instead of ng serve.

15:24Now, the last way to run an Angular app

15:26is by saying NPM run start, you can also

15:31just shorten that to NPM start.

15:33And what this will do is, it'll actually

15:36run the ng serve command behind the scenes, which

15:39you can see right here, through the package.json

15:43of the project.

15:44So if we just take a look at that right now,

15:46we'll go into more detail on this shortly.

15:49But the package.json file basically

15:51contains a script section which allows

15:54you to reference these commands by commands that you're

16:00used to.

16:01A lot of NPM or node or React developers

16:04are just used to saying NPM run start.

16:07So the fact that we have a smart script here, it

16:09allows developers to just run NPM run start, and have

16:16the project just automatically work.

16:18And this will also come in handy later on if we ever

16:21have to lengthen this command.

16:23If we ever have to do things like add

16:26a proxy to our application, or, if there's basically

16:31additional add-ons that we want to run

16:33our application with in development,

16:35we can just add those to this script,

16:37and the NPM run start command will remain the same instead

16:41of having to type out ng serve dash,

16:45dash proxy config equals blah, blah, blah, blah, blah.

16:50Don't worry about what that just was there.

16:51But the point is that, adding things to this package.json

16:55file to these scripts basically makes it

16:59so that we don't have to remember

17:00any complex commands once we get beyond the basic ng

17:04serve command.

17:06Anyway, those are the main ways to run an Angular app.

17:10I tend to just use NPM run start because it's

17:13consistent across the entire node.js NPM web development

17:18world pretty much.

17:19But you can use whichever one you're comfortable with.

17:22And in fact, if we want to have this automatically

17:25open a window every time, we can actually

17:27just add ng serve dash o to this start script.

17:31And now as you can see.

17:32When we say NPM run start, it will automatically open it up

17:37for us in a browser without us having

17:38to add any extra flags in the actual command

17:42that we're running.

17:44Let's just let that happen here and there we go,

17:46we see that it opens up automatically.

17:49And that's how you create and run a basic Angular app.

17:52I hope this has been informative for you

17:54and I'd like to thank you for viewing.

0:10Now that we've seen how to create and run an Angular

0:14project, the next thing that we're going to do

0:16is take a look at the actual structure that's provided

0:19for us by the Angular CLI.

0:23We saw, already, that Angular has

0:25generated quite a few basic, boilerplate files for us.

0:29And understanding what those files are and what they contain

0:33is a very important part of becoming an effective Angular

0:36developer.

0:36Because, as I said, the organization

0:39that you're going to see over here

0:40is pretty consistent throughout every Angular project

0:44that you'll find, pretty much, in the world.

0:47What we're going to do here is, just

0:49take a look at what all of these files and folders are,

0:52how they're organized, where everything is, et cetera.

0:57Outside, in the outermost directory of our Angular

1:01project, what you're going to see

1:03is that this is pretty much just a lot of configuration files

1:08for different pieces of technology

1:10that are involved in making an Angular project run.

1:14So, first and foremost, we have this package.json file,

1:18which contains a lot of information about the NPM

1:21project that this project represents.

1:26It's got things like, it's got the project name,

1:28that's the name that we gave our project when we first

1:30generated it.

1:31It's got the version.

1:33This is very useful for when we actually want to do releases

1:36and if we want to do things like continuous integration,

1:41continuous deployment, et cetera, keeping track

1:44of versions is very important.

1:46That's one thing you'll find in the package.json.

1:48We already saw scripts.

1:50These are, basically, just shortcuts for terminal commands

1:53that we can run.

1:54And you can literally add commands for anything

1:58you might want.

1:59We'll see how to do that later on.

2:01And besides that, don't worry too much

2:03about each and every little property.

2:05The main things to keep an eye on here

2:08are the dependencies and the dev dependencies.

2:11These are basically all of the NPM code, all of the NPM

2:16packages, which are just code that other people have written

2:21that our project relies on.

2:23Now, the difference between dependencies and dev

2:25dependencies is that dev dependencies are not installed

2:29when we do a production build.

2:31So essentially, all of the stuff that we have in here

2:34will not actually make its way into the production application

2:39when we build it.

2:40Now, this is important because it

2:43allows us to reduce the final bundle size of our application,

2:47so that it will load faster when users actually

2:50visit our website.

2:53That's the package.json file.

2:55Packagelock.json is, basically, just a much more

2:59in-depth version of the package.json file.

3:03You'll almost never edit this thing manually.

3:05All it does is, it helps NPM keep very accurate records

3:09of what dependencies our project uses

3:12and what dependencies those dependencies have.

3:17It's basically a detailed map of all of the different versions

3:21of those dependencies to make sure

3:23that our application runs the same across development

3:27environments.

3:29In addition to that, we have the typescriptconfig.app.json file

3:34and some of the other typescriptconfig files.

3:37Basically, these files allow us to modify the TypeScript

3:41settings for our project.

3:42Now, I probably haven't mentioned this yet.

3:44In fact, I don't think I have.

3:46But, Angular projects use TypeScript by default. Now,

3:51we're going to take a closer look at TypeScript

3:53and its relevant syntax a little bit later on.

3:56But, just know that TypeScript is

3:59JavaScript with static types added on top of it.

4:04Instead of declaring a variable like let x equals five,

4:10TypeScript actually allows us to add static typing.

4:12To the point where, we can say things like,

4:14let X number equals five.

4:20And then, X is now statically typed as a number.

4:24So again, this is something that's built into Angular,

4:28uses TypeScript instead of JavaScript.

4:30And this actually makes projects, in my experience,

4:33a lot more scalable and it makes it a lot easier

4:36to bring new developers on-board because, frankly, it

4:40makes it a lot easier to understand what all of the data

4:43is supposed to be, how components work.

4:45You'll see, when we get there, how it makes things easier.

4:50These three files, these tsconfig files,

4:53basically allow us to change the settings of TypeScript.

4:57So let's say that we don't want TypeScript

4:59to be as strict as the default or let's say

5:02we want it to be stricter than the default.

5:04What we can do is we can come in here and make those changes,

5:09just by changing some of these properties.

5:13There's obviously a lot more here

5:16and that's more something for a TypeScript course.

5:19What all of these files are and what each of these properties

5:22is.

5:22But, just know that this is where

5:24you come to actually change the TypeScript

5:27settings for your project.

5:30All right.

5:31So, besides those things, this karma

5:34dot config dot js file, this is for tests.

5:38This allows us to change how our karma tests are run.

5:42Karma is just one of the test libraries

5:45that Angular projects use by default.

5:48If you need to make some changes to that,

5:51this is the file where you'll do that.

5:53Angular dot JSON, this is sort of like what a package.json is

5:59to a node JS project, this is to an Angular project.

6:05It contains some very specific settings and quite a few

6:08of them as you can see that we can basically

6:11change in our Angular project, if we ever

6:13need to make some changes to how the Angular project

6:17itself does things.

6:20And the concerns that are represented inside this file

6:22are different than what you'll find in package.json.

6:30Besides that, we have just a few other things

6:32this just contains some configuration

6:35settings for whatever editor you're using that,

6:39so your editor can pick up on that.

6:41Get ignored, this just tells our project

6:44what files and not to commit.

6:48You'll see and hear things like node modules,

6:50so that we don't end up committing those and waiting

6:53several minutes while we push and pull code

6:56to and from GitHub.

6:58And, besides that, what other ones haven't I covered?

7:00The README.md file, this basically

7:03just contains some nice instructions in markdown syntax

7:09that describe the project.

7:13It tells you things like how the NG serve command works,

7:16tells you how to generate components here,

7:19tells you how to do a production build for your project,

7:22how to run tests, how to--

7:24there's a lot of different things in here.

7:26Feel free to just read through this.

7:30They're very basic instructions, but they

7:31can be helpful if you are just getting started.

7:35And besides that, we have this .browserslistrc.

7:38This basically just contains a list of the different versions

7:42that our application supports of different browsers.

7:45So if you have specific browser needs,

7:47you're going to want to come in here

7:48and make some changes to this.

7:52Besides that, I personally don't find myself

7:54making too many changes here.

7:56All right.

7:57So those are all of the basic files inside the root

8:01directory of our project.

8:03Again, they're just mostly configuration files.

8:07I'll just write, "CONFIG FILES."

8:11You also have the node modules folder

8:14that just contains all the code for the dependencies.

8:16We generally won't ever touch this thing,

8:19so just pretend like it's not there.

8:22And next up is this source directory here.

8:26The source directory is where we'll

8:28make the vast majority of changes to our project

8:31and, more specifically, inside this app directory.

8:35The app directory is going to contain

8:36all of the code for our components

8:38all of the code for something called services, which

8:40we'll talk about later on.

8:42Basically it contains the core logic

8:45for our Angular application.

8:48The core business logic, if you will, that runs our site.

8:54We'll get back to that.

8:55We'll talk about what all of these strangely named files

8:58are shortly.

8:59But first, let's look at some of the other files.

9:02We have this assets directory.

9:03Basically, this contains any special assets

9:07our project needs.

9:08Images will go in here, as we'll see later on.

9:12That's pretty much the main thing

9:13that you'll usually put inside this assets folder as images--

9:17SVGs too, I suppose.

9:19Environments-- this contains the environment variables

9:22for different environments that our project might run in.

9:25So when we're running our project just locally

9:29when we're developing our project,

9:32we're going to want to have a different set of environment

9:34variables than when we're running in production.

9:37And the main thing right now is that it just

9:39has this variable that says production true or production

9:42false.

9:43We'll see some instances later on where

9:46we'll want to add new environment

9:48variables to our project.

9:49But, for now, we'll just leave that alone.

9:53Underneath that, we have our favicon.

9:56That's, basically, just the little thing that displays

9:59on the tab in our browser.

10:02If you have the name of your app here,

10:04you'll have that little angular shield thing,

10:07unless you replace this with something else.

10:10So if you wanted to replace this with your own icon,

10:13all you have to do is just delete

10:14this file, replace it with another one called favicon.ico

10:18and that will automatically display in your browser

10:22when you're developing.

10:23Next up, we have index.html.

10:27This index.html file is where our Angular application will

10:31actually get rendered into and, a little bit more specifically,

10:35it will get rendered into this app route section.

10:39So essentially, what happens when

10:40a user visits our Angular app-- and we'll

10:43talk about this in more detail later on.

10:45But, what happens when we publish our app

10:48and a user tries to visit our site,

10:51is that the user's computer will make

10:55a request to whatever server or service

10:59our application is hosted on.

11:01I'm just going to draw a server here, for now,

11:04since that's easier to draw.

11:05It's just a big cube.

11:08All right.

11:09So the user's computer is going to make a request

11:12to our server.

11:13And this index.html file is going

11:16to be the first file that the server ends up sending back

11:21to the client side.

11:23OK.

11:24Now, what happens when it reaches

11:26the client is that the client will actually render this,

11:29the client's browser, that is, will actually render this HTML.

11:32And this HTML will contain some scripts

11:36where our actual Angular code will be.

11:40Now you don't see scripts inside of here anywhere.

11:42And that's because those are dynamically

11:45generated and inserted later on, when we actually build our app

11:50or when we run our development server,

11:52when we're just running our application in development,

11:55as we've seen.

11:56But the index.html file that the user's browser gets back

12:02will contain some script tags, each of which

12:06will force the user's browser to load that corresponding script

12:11from the server.

12:12And that, as I've said, is where the Angular code is.

12:18Basically, what this code will do,

12:19it'll find the app-root element in the page,

12:23and it will, basically, render all of our Angular application

12:27in its place.

12:29OK, so there's kind of a 2-step process here, as we've seen.

12:34The first one is the actual index.html file,

12:38which is what we see here.

12:39And the second one is the scripts.

12:43That's often more than one file that

12:47gets sent back to the client and that actually takes care

12:49of rendering all of our application based

12:52on the Angular code that we've written.

12:56All right.

12:57Now, if this confuses you, don't worry too much about it.

13:00A lot of this is something that, as an Angular developer,

13:03you won't have to worry about.

13:05But I just thought that would help explain

13:07the purpose of this index.html file

13:09and what it's doing in an Angular app in the first place.

13:13So that's the index.html file.

13:16The next file in this source directory is the main .ts file.

13:20What this file does, this is called the entry point

13:25of an Angular application.

13:26Basically, what it does is, this line of code,

13:30right here, is where all of the magic happens

13:34and where Angular actually starts

13:36to render all of the elements into the user's browser.

13:40So essentially, what this does is

13:41it kicks off all of the other code

13:43that we're going to write inside app

13:46and it'll basically just take care

13:48of rendering all of the components in our application,

13:51depending on the application data,

13:55depending on the URL, et cetera.

13:57So this is the entry point for our application.

14:00Generally, we won't make any changes here.

14:03There are a few situations where you will,

14:05but more often than not, this file

14:08will remain unchanged in most Angular projects.

14:11So next up, we have polyfills.ts.

14:15This is, basically, where you come to add polyfill packages.

14:18Basically, polyfill packages just

14:20allow you to support older browsers

14:23without having to incorporate those browsers needs

14:27into your codes.

14:28So if you need to do something like install fetch polyfill,

14:33if you're making network requests using fetch,

14:36you would just say, "import."

14:38And then, you would have a fetch polyfill package,

14:40which I think is, I think, "whatwg-fetch,"

14:43or something like that, you could just add that here.

14:46Any other fills that you need, generally,

14:49if your boss tells you that you need

14:51to support Internet Explorer 6, polyfills.ts

14:55is going to be your friend there.

14:56But in most cases, you won't make very many changes

15:00to that file.

15:01Next up, we have styles.css.

15:03This just contains any global styles

15:06that you want for your application.

15:08So if you want all of the buttons

15:10in your application to look a certain way, by default

15:13or inputs or headings or paragraphs or divs, et cetera,

15:18this is where you're going to add those.

15:20OK.

15:20We'll see how that works a little bit later on.

15:23And last, but not least, we have test.ts.

15:25Now, test.ts, this basically just takes

15:28care of setting up the tests for our application.

15:30And we're not going to take a look at testing and Angular

15:33for a little while.

15:34But, when we do, this is one of the central places

15:38where we're going to do so.

15:40OK.

15:41So those are the main files and folders

15:43inside our source directory.

15:45The last thing we're going to take a look at here

15:47is what's inside our app directory.

15:50This is, as I said, the most important code

15:54that developers are going to have to work on.

15:56It basically contains all of our components, all of our business

15:59logic, et cetera.

16:01So first of all, one of the main important things

16:04that this app folder contains is what's

16:06called the app component.

16:08The app component--

16:10I've been drawing Angular applications

16:13as a series of nested squares here,

16:18the idea being that each of these squares is a component.

16:20The app component is the outermost component

16:24that takes care of rendering all the other components

16:28in our application.

16:29So the app component would be this one here.

16:37In other words, it's the component

16:38that contains all other components in our Angular

16:41application.

16:42Now you may notice that there are not one,

16:45not two, not three, but four different app.component

16:49dot-something files here.

16:52And the reason for that comes back

16:53to the predictable structure benefit

16:56that I talked about at the beginning of this section.

17:00Basically, each of these files allows

17:03us to define a different aspect of our component.

17:07So we see that we have a CSS file.

17:10This is where we define the specific styles

17:13for our component.

17:14Now the styles in here will apply only to the component

17:18that they're in.

17:20| go into more detail on that later on,

17:23but this is basically the styles for the component.

17:26We have an HTML file and this one

17:29you're going to notice first of all,

17:31that it has a style tag, which might

17:33be a little confusing at first.

17:34Really, the reason that it has styles in it to begin with

17:38is just because Angular wanted to have

17:40their little advertisement boilerplate

17:43website, as soon as you generate the project,

17:46and they wanted to make it easy for you

17:48to delete when you actually wanted

17:49to start writing your own code.

17:51So that's the reason the styles are in here,

17:53but they usually won't be.

17:55The styles will usually be inside the CSS file

17:59for a component.

18:00Now, if you scroll down past the styles,

18:02you're going to see some HTML.

18:05And this points at what the HTML file does for our components.

18:09Basically, it allows us to define the "dom"

18:13structure of our components.

18:16It basically allows us to define what our components are going

18:21to look like, or how they're going

18:22to be organized on the page.

18:25Again, it generally doesn't contain any styles,

18:28since those are in the CSS file.

18:31But it does contain things, like, there's

18:34going to be a div, there's going to be an image here.

18:36There's going to be a span here with this text.

18:39And this is also where we're going

18:41to be doing things like inserting data

18:42into the user's browser.

18:43Now one thing you're going to notice about HTML,

18:46and we're going to go into more detail on this later.

18:49but one thing you'll notice about the HTML files in Angular

18:52projects is that they have these weird little double,

18:55curly brace things.

18:56These are basically how we insert data

19:00from the component's TypeScript file--

19:03I'm using this as a segue into this file--

19:05into our HTML.

19:07So if we go over to our TypeScript file,

19:10you're going to see that, first of all,

19:12our component is defined as a TypeScript class

19:17and that this class has member variables of some sort.

19:22You can add whatever member variables you want.

19:25Now, the point of this TypeScript file

19:27is to contain the data of each component

19:32and to also contain any logic that component

19:35needs to execute.

19:36Things like loading data.

19:38Things like processing data, basic pieces of data,

19:43such as the title.

19:45And all of this is generally displayed through the HTML

19:49of our components.

19:50So if you take a look at this title member variable here,

19:53you're going to see that that's being displayed

19:56inside our inside our HTML span here, just using

20:02those double curly braces.

20:03Again, we're going to go into a lot more detail on how

20:06that relationship works.

20:08But just know, for now, that the CSS file is the styles,

20:11the HTML file is the structure, and the TypeScript file

20:16is the logic.

20:18If any of you are familiar with the MVC setup,

20:23Angular follows that a lot more closely

20:24than some of the other libraries out there, such as React.

20:30The last thing here is this spec.ts file.

20:34Basically, this contains all of the tests

20:37for an individual component.

20:39And we're not going to be talking too much about tests,

20:42for the time being, but just know

20:44that when you start testing, the spec.ts file is

20:47going to be your friend.

20:49Those are the four main files of an Angular component

20:52and, as you'll see, every component

20:54that we're going to generate in Angular has those four files.

20:59It has the HTML file, has the CSS file,

21:04has the TypeScript file, and it has the test file,

21:08which is called spec.

21:12Anyway, that is most of the files.

21:14The last file that we haven't looked at

21:16is the app module file.

21:18It's called app.module.ts.

21:21The app.module.ts file has a number of responsibilities.

21:25Now, the first responsibility is that, which you

21:28can see inside this Ng module.

21:30We'll talk a little bit more about what

21:32this weird-looking syntax is shortly.

21:35But first of all, we have this declaration's thing

21:38basically the declarations property inside an app module

21:42that's file is all of the components

21:45that we've created inside our application.

21:48As you'll see when we generate new components

21:50they'll appear inside of here.

21:52Now the reason we need this thing

21:53has to do mainly with how Angular works behind the scenes

21:57and how it ends up processing things and running

22:00our applications.

22:01So don't worry too much about it right now,

22:03but, that's basically what it is.

22:06Just all of the components that we've

22:08created in our application.

22:10The next thing that we have here is this imports property.

22:13And what this imports property does

22:15is it allows us to add extra functionality to our Angular

22:19apps.

22:20So Angular apps, as a whole, or the Angular framework

22:23as a whole, follows the sort of plug-in architecture.

22:27So as you'll see, when we want to start doing things,

22:29like adding network requests to our application,

22:32we're going to import what's called a module that

22:34will basically contain all the functionality that we

22:37need to make network requests.

22:39And we won't really have to write much of the code for that

22:42ourselves.

22:45And once we've imported that, all we have to do

22:47is add that to imports and, automatically,

22:50that plug-in functionality will be added to our Angular project

22:55Again, there's lots of situations where

22:57we're going to need to do this.

22:59For now, just know that that's the purpose of this imports

23:02property.

23:02Bootstrap just tells Angular what the main entry

23:05point of our application is, what

23:08the top-level component is.

23:11We're almost always going to leave this on app component,

23:13so I'm not too worried about this.

23:14And, providers, this is something

23:16that we'll talk about when we get into something

23:19called services in Angular.

23:21But it's sort of like the declarations thing up here

23:23for components, except, as I said, for services.

23:27So we'll talk about that a little bit later on,

23:29but that's the app module file.

23:31We will be coming back here, from time to time,

23:33to add extra plug-ins and functionality to our app.

23:37It's a very important file.

23:38And that should be all of the files.

23:41So, hopefully, this little tour has given you

23:44a better sense of how an Angular project fits together

23:48and how everything is organized.

23:49And as I mentioned before, a knowledge of how this thing is

23:52organized allows you to work on pretty much any Angular

23:55application in the world, which is

23:58one of the big strengths of Angular projects

24:00is that organization.

24:02I hope this has been informative for you

24:03and I'd like to thank you for viewing.