Learn the basics of Angular 8 🚀 by building a tic-tac-toe game 🕹️ from scratch...Then deploy it as an installable progressive web app (PWA). Go beyond the basics 👉https://fireship.io/courses/angular/

Full Source Code: https://github.com/fireship-io/angular-tic-tac-toe
Angular Docs: https://angular.io/

#angular #pwa #tutorial

Take Angular quizzes 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:34:43.384Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ff91503e-c232-45d8-9dbc-ba61d08967e9
b8dc949ba244d50ce703289a81e0f9c8c79c74d0fce0815a4e8ad102c8fd5532
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Welcome to my first ever Angular tutorial for beginners.
If you've learned a little bit about JavaScript, HTML, and CSS, the next step is to make the world a better place by building an app that people can use.
Today, we'll build a tic tac toe game from scratch, deploy it, and make it installable on desktop and mobile applications as a PWA.
And, despite Angular's reputation as an enterprise grade framework, you might be very surprised at how easy it is to start being productive with Angular, even as a beginner.
And you'll especially love it when you start building complex products in real life.
If you're new here, like and subscribe, and if you want to get really deep into Angular, check out my new Angular course on FireShip.
I build.
First of all, what is Angular?
Because the word Angular refers to so many different things.
It's a declarative UI framework, a code bundler, a tool for building progressive web apps.
It handles server side rendering, provides libraries for forms, testing, animation, and so much more.
And it's all wrapped up in a highly performant package that will help reduce decision fatigue.
Web developers especially have a huge number of open source libraries to choose from when building a product, and the status quo is always changing.
Wait a minute.
No.
Wait a minute.
Wait a minute.
I know.
Angular ships with a ton of features out of the box, many of which anticipate the complexity that you'll face as your app grows.
But almost all of its features are optional and can be adopted as needed.
So what does Angular really do at its core then?
The short answer is that it helps you build complex, cross platform applications using web technology, like JavaScript, HTML, and CSS.
But I think the best way to answer that question is to just show you by building something from scratch.
So over the next 15 minutes or so, we'll build a tic tac toe game, we'll add a design system to it, we'll make it a progressive web app, we'll deploy it, and finally install it on our local system, as if it were a native desktop or mobile app.
That might sound like a lot to do in 15 minutes, but don't worry, we have a superpower known as the Angular Command Line Interface.
And this is not your typical CLI.
This thing is really powerful because of Angular's conventions, we can generate a lot of code automatically.
At this point, I'm assuming you have Node.
Js installed on your system, and we'll run npm install global at angular cli.
This will give you access to the ng command in your terminal.
And the first thing we'll wanna do is generate a new Angular app.
We can do that by running ng new with the name of the app, Then it will ask us if we want to add routing, we'll go ahead and say yes, and we'll choose SCSS for our styles.
And then we'll go ahead and open up our app in Versus Code.
There's a couple of extensions you'll want to have.
1st is the Angular language service, which will give you syntax highlighting in your HTML templates.
And then I'm also installing the Angular console, which is a tool that allows us to simply point and click on CLI commands as opposed to typing them out manually in the terminal.
Go ahead and find the serve command, then hit run.
What happens is that our code is now bundled with webpack using LiveReload.
So every time we make a change to our code.
It will be reflected in the browser, and you can see that on localhost 4200.
Now, if you're new to web development, you may have not experienced this yet, but one of the most painful aspects of the job can be bundling your code.
When building a web application, you need to target multiple browsers, And on top of that, you want to keep the JavaScript bundle size as small as possible.
Doing this from scratch in a complex application is a major pain, but not with Angular.
Click the build command and see what happens.
Angular will automatically minify and bundle your code, and will also generate multiple bundles for differential loading.
This means the browser will always load the smallest JavaScript bundle possible based on the features available in that browser.
And we can see all that raw JavaScript code by going into the dist folder.
And this is the folder that we would actually deploy to a production hosting account or server.
Now let's take a look at some of the files in this initial application.
We have a few TS config files here, which were automatically generated and set up for this project.
Angular was really the first major framework to encourage the use of TypeScript, and you now see it as almost a standard on large complex projects.
Open your eyes.
Now, the default Angular app also comes with testing using Karma and Jasmine, but there are other schematics or other extensions for the CLI you can use for other testing frameworks place like Jest and Cypress.
And that's just another thing that Angular does out of the box.
It sets up your testing utilities so you don't have to think about configuring them.
But what good is any of this if the framework doesn't actually help us build a front end UI?
Because Angular at its core is very similar to other UI frameworks place like React, Svelte, and Vue, just to name a few.
You'll find these same concepts in Angular that you find in these frameworks.
Component based UI architecture, where you can pass properties or data from one component to another.
The place where we write our actual UI code is in the source app directory.
By default, Angular generates an App component, which is essentially the entry point into the app.
We can see how this works by opening up the index HTML file, which is just plain HTML.
The special thing is that we have this app root element in the body.
This element will be replaced with our actual Angular JavaScript application.
And that initial parsing of the JavaScript is called bootstrapping.
But the main thing you'll be doing in Angular is creating a UI by building and composing components together.
And there are 3 main pieces to any component.
The component TypeScript is where you define your custom JavaScript logic, and also define the internal state of the component.
Then you have your HTML, which contains the actual visual UI and allows you to bind data from the TypeScript to that template.
And lastly, you have a stylesheet, which is scoped to that component, meaning these styles won't bleed out to other components.
Let's go into the app component HTML first, and delete all of the boilerplate code in there, leaving only the router outlet.
Angular provides a very powerful router out of the box, which allows you to map components to URLs in the browser.
And the router can even help you do something called code splitting with Webpack to lazy load certain parts of your JavaScript bundle.
We're not going to cover it in this video, but just know that it's a relatively complex thing that Angular makes trivial.
Now from this point, I want to build something meaningful.
So let's build a little game of tic tac toe.
The idea itself is inspired by the React tutorial, and it provides a good baseline for understanding the mechanics of the framework.
We'll start by building a bare bones game, then we'll add a design system, and lastly, we will deploy it as a PWA.
So the first thing we'll do is generate a component to represent an individual square.
We'll find the generate command with the Angular console.
We'll generate a component and give it a name of Square.
And a lot of times in Angular, you might not need to have your component separated into 3 different files.
So when running this command from the Angular console, we'll actually select the options for inline template and inline styles.
You'll see this created a Square directory along with a Square component inside.
If we open up the component, you'll see that we're importing component and OnInit from Angular core.
On init is what's known as a life cycle hook, which allows you to run some code when the component is first initialized.
It's not required for this component, so I'm going to go ahead and delete the references to it, and what we're left with here is just a plain Angular component.
Every component starts with a component decorator, and decorators are these things that start with an at symbol.
And you can watch my full video on TypeScript decorators if you're curious to learn how they work.
P but in the case of Angular, they allow us to pass in an object that configures the way this component behaves.
First, you'll notice the selector option.
One.
This is the name of the component as it will be declared or used in the HTML.
Let's go ahead and open the app component to see how that works.
If we start typing App Square, it should autocomplete in Versus Code, and then we can hit tab to complete it.
And then if we're still serving the app, We should see the content of that component in the web page.
The next thing you'll notice is the template.
Angular provides a special templating language that empowers your HTML with JavaScript like logic.
You can use conditional expressions, loops, and bind data directly to the HTML to write templates that are expressive and easy to understand, and also highly performant when it comes to reacting to data changes within the app.
And that's why declarative UI frameworks like React, Angular, etcetera are so popular.
And make it easy for you as a developer to keep your app data in sync with the actual UI how it appears visually for the end user.
In Angular, we can bind data to a template by simply adding it as a property to the component class.
Just to demonstrate this, I'll add a random number, and then I can interpolate it in the template by using double braces.
And now we should see the random number in the screen.
Under the hood, Angular is doing a thing called change detection, where where it's looking for changes to these properties and then updating the UI in a highly performant way.
And all we have to do from a development perspective is change the value of the property.
For For example, if we set up an interval here and change the random number to a different random number, you'll see it's updated in the screen every 500 milliseconds.
So when you set a property on a component class, that's like setting its internal state.
But in many cases, you want to pass in the property from a parent component, and that's exactly what we want for the square.
We can allow properties to be input into this component by using the input decorator.
If we start typing input and then tab, it will automatically import this decorator for us.
And then we can set the property name to value, and we could even use TypeScript here to limit this value to a certain subset of string values or some other type if we wanted to.
And now we can go back up to our component declaration in the App component, and now we can input this value from the parent component, which can be just a string value.
Or if we wrap value in brackets, it will take an actual expression or dynamic value from this parent component.
And that means you can pass a complex object from parent to child.
Now if we look at our Square component, it only has a single input.
There's nothing in this component that allows it to modify its own state.
It all comes from the parent.
So we generally call this a UI component or a dump component.
Dump components are a good thing.
They're easy to test and they're only concerned about the UI, so there's not much to worry about in terms of bugs and things like that.
But in order to build a tic tac toe game, we'll need some kind of smart component to manage the state or the data between the various for Squares.
Let's go ahead and generate that component.
We'll call it Board and just stick with the default options.
Now our Board component will be our Smart component, meaning it has internal state that can change.
We have the Squares property which represents the 9 moves on the game board which will be an array of Strings.
And then we have a property called x is next which is a boolean to help us determine the current player.
And then we have the winner which will either be x or o.
Now every component has a constructor and also life cycle hooks.
The constructor runs immediately when this class is created, but you don't generally do anything in the constructor better aside from inject your dependencies, which we'll look at in a future video.
If you have initial setup work that needs to be done in a component, You'll use the NG on init lifecycle hook in most cases.
In our case, we'll write a method on this component called newGame and its responsibility is to set up the initial values when starting a brand new game.
For our squares property, we'll create an array with 9 elements in it, and then we'll fill them with null values initially.
When a user clicks on a square, these values will be spliced with either an x or an o.
We'll set the winner to null and x is next to true.
Now when working with data on a component, you may want to compute a property based on one of the main pieces of data that changes.
In our case, x is next determines which player is currently using the game board.
That's a boolean value, but we'd also like to show the name of the player as a string, which would be x or o.
So we can create a computed property by using a TypeScript getter.
We'll go ahead and call this property player.
And if x is next is true, then the next player will be x.
Otherwise, it will be o.
Now anytime the x's next value changes, this computed property will be changed and reflected in the UI as well.
Now the next thing we'll do in this component is define a method which will serve as an event handler for when the user clicks on one of the buttons to make a move.
When that click event happens, we'll check the index in the array that they clicked on.
If that square has already been clicked, then we won't do anything.
But if it's empty or null, and we'll splice in the index of the square the user clicked on with the current player that we've computed in this component.
And then we'll also toggle the x's next boolean to its bit value by using an exclamation mark.
Then the last thing I'll do is write a method called calculate winner.
This code mostly comes from the React tutorial and it's basically just an algorithm that determines if the user has won the tic tac toe game.
I'm not going to spend time explaining the exact implementation details, but feel free to copy the source code from the GitHub link in the video description.
So now let's head into the HTML template to see how we can bind the data properties we define on component class to our actual UI.
We'll want to show the name of the current player, show the winner if the winner exists, and then also loop over the array of for squares so the user has something to click on.
The player property that we defined with a getter behaves just like any other property.
We can simply use it with the handlebar syntax to interpolate it in the template.
Now the other thing that you'll commonly do in a web application is handle events.
And in Angular, we can bind to events by using parentheses.
And you'll notice that when we do that, Angular's tooling will automatically give us a list of all the possible events to add here.
And then we bind a handler to this event, which Versus Code will also autocomplete.
So in Angular, you get amazing tooling both in the TypeScript and also in your templates.
Now, for this tic tac toe game, if we have a winner, we want to display a conditional template only when that winner exists and we can make that happen with what's called a structural directive.
If you type in star, you'll see the different structural directives at your disposal.
But the most common one is n g f, and it allows you to only render the HTML that it's bound to if the value on the right side evaluates to true, or it can be coerced to a truthy value to be more precise.
And so when the winner is present, then this h two element will be rendered in the DOM.
Now the final step is to put together the actual squares that represent the game board.
Another common structural directive in Angular is ng 4.
So first, we'll declare our App Square component, then we'll add ng 4 to render this component multiple times based on the array of squares.
Inside of ng 4, we say let val, which creates a template variable named file that we can now use in this template.
And if we also want access to the index, we can set a template variable of I equal to the index.
And now we can put these variables to use.
The first thing we'll want to do is pass the value down to the child App Square component and it can use that value to render an x or an o in the button.
And we'll also bind to the click event to make a move on that index when the user clicks on the square.
Now that takes care of our template logic, but there's one thing that's missing and that is our CSS styling to give us a 3 by 3 grid.
CSS Grid makes this very easy.
We just set up our main element to display grid and then we'll display the columns at 200 pixels each.
At this point, you can serve the application, and you should now be able to play a game of tic tac toe.
But we have one major problem at this point.
The app looks horrible.
So So what we'd like to do is add some global styling, like a design system, to give us a consistent UI that looks great.
But usually setting up something like that is pretty involved.
But fortunately, the Angular ecosystem has a variety of third party component libraries that we can easily add to this project with a single command.
And that means our app can look great right out of the gate without any decision making or configuration on our part.
There are plenty of great options to choose from like Angular Material, Ionic, and others, but today we're going to go with Nebula.
Not only do the default components look great, but they also just released a new feature called UIBakery, and it's a tool that allows you to visually create components and then download Angular code.
Expect a video on this topic in the near future.
For right now, we'll go pet and add Nebula to this project by using the ng add command.
If we run ng add at nebulartheme, it will automatically install and configure Nebula in our project.
I'm gonna go ahead and choose the Cosmic theme because that sounds cool and we'll also say yes to customization and animation.
You'll notice a few key changes to the project.
We now have a Themes.
Scss file which we can use to customize the variables used in the theme.
And then we can go into the app module and we'll see that we have a few ng modules ported here.
We're not going to talk about ng modules in this video, but they are discussed in detail in the full course.
Basically, they're just a mechanism that makes it possible to use Angular in a progressive way, or in other words, only use the parts of the framework that you actually need.
In our case, we'll go ahead and import the nebularButton module because that's the only Nebula component that we want to use so we don't have to package the entire thing which would increase our bundle size and decrease performance.
And also, if we go into the App component, you'll see that we now have a bunch of components that are prefixed by nb for nebular.
And already the UI is looking a lot more interesting.
But one obvious way we can improve this is to change the styling of an individual square based on its state.
If we go back into our Square component, we now have access to the n b button directive.
With this directive, you can apply the nebular button theme and behaviors to any HTML element.
Using the directive as is will give you the default nebular button, which we'll go ahead and do when the value is null or when the square has not been selected.
Then Then we'll go ahead and set up a couple of additional buttons as well, and these buttons will take additional properties on the n b button directive.
And the design system provides a lot of different ways to customize the button right out of the box.
For example, we'll use this hero button which gives it a nice little gradient, but check out the component library in the docs for a full set of examples.
P.
Then we'll conditionally render each button depending on whether or not the value is x or o using the ng if directive.
Now I realize I'm going through this code very fast, but again make sure to reference the link to GitHub in the video description to find the full project source code.
And one last thing I'll do is also go into the Board component, and for the Start New Game button, we'll go ahead and display an outline button there.
And with just a few minor changes, we now have a much better looking game of tic tac toe.
So this kind of highlights my favorite thing about Angular and that is getting things done quickly.
The tooling truly is amazing and there's a lot less configuration required to get to something meaningful.
But there's still one more thing I promised you and that's to make this a progressive web app that can be installed as a native app.
And believe it or not, that's actually the easiest part of this entire video.
Let's head over to the Angular console, click on Add, and then you'll see a full list of the different schematics that are available to you.
The one we're interested in is at angular/pwa.
When you run this command, it does several important things related to PWAs.
The first thing it does is add the JavaScript code needed to load a service worker in the Angular app, and and then it gives you a configuration file that you can use to customize the behavior of the service worker.
And the worker is there primarily to make your app work offline, so you can customize the behavior of how those pages are cached and stored offline.
And then you'll also notice that it adds a manifest file and some icons for the actual install button for the app.
Now in order to determine if we have a valid progressive web app, we need to run this app in a production environment.
So the first step in that process is to run ng build, which we can do with the Angular console.
And that will compile all of our TypeScript code down to JavaScript in the dist folder.
There's just one thing missing and that's an actual place to deploy our code.
My personal favorite place is Firebase, and we can easily add Firebase to an Angular project by running ng add at AngularFire.
This is going to ask you for a Firebase project, so you'll need to have signed up for a Firebase account if you don't have one already.
And Firebase Hosting can be used on the free tier, by the way.
The only thing left to do at this point is run ng deploy.
That's going to automatically deploy our production app to the Firebase Hosting account.
That will give you the hosting URL when it's finished, and now we can play tic tac toe on the web.
But, here's the coolest thing about this.
If we go to the Audits tab in Chrome Dev Tools, we can analyze our app as a PWA, and you can see we hit the green check marks on everything.
And what this means for the end user is that the app is now installable on their device and PWAs are supported pretty much everywhere now.
In fact, we can even install it on Windows Desktop.
By hitting the install button in Chrome, it will add a shortcut to the desktop and it will open up the app in an actual Windows window.
And now people can use your web app as if it were a traditional desktop app.
And the same goes for mobile apps as well.
So I'll just finish up by saying that Angular is a really awesome tool when you know how to use it.
And if you want to go beyond the basics and learn how to build a real world progressive web app, consider becoming a Pro Member at Fireship IO.
You'll get access to the brand new Angular 8 course and a whole bunch of other pro content.
Thanks for watching and I will talk to you soon.

Speaker 0: Welcome to my first ever Angular tutorial for beginners. If you've learned a little bit about JavaScript, HTML, and CSS, the next step is to make the world a better place by building an app that people can use. Today, we'll build a tic tac toe game from scratch, deploy it, and make it installable on desktop and mobile applications as a PWA. And, despite Angular's reputation as an enterprise grade framework, you might be very surprised at how easy it is to start being productive with Angular, even as a beginner. And you'll especially love it when you start building complex products in real life.

If you're new here, like and subscribe, and if you want to get really deep into Angular, check out my new Angular course on FireShip. I build. First of all, what is Angular? Because the word Angular refers to so many different things. It's a declarative UI framework, a code bundler, a tool for building progressive web apps.

It handles server side rendering, provides libraries for forms, testing, animation, and so much more. And it's all wrapped up in a highly performant package that will help reduce decision fatigue. Web developers especially have a huge number of open source libraries to choose from when building a product, and the status quo is always changing. Wait a minute. No.

Wait a minute. Wait a minute. I know. Angular ships with a ton of features out of the box, many of which anticipate the complexity that you'll face as your app grows. But almost all of its features are optional and can be adopted as needed.

So what does Angular really do at its core then? The short answer is that it helps you build complex, cross platform applications using web technology, like JavaScript, HTML, and CSS. But I think the best way to answer that question is to just show you by building something from scratch. So over the next 15 minutes or so, we'll build a tic tac toe game, we'll add a design system to it, we'll make it a progressive web app, we'll deploy it, and finally install it on our local system, as if it were a native desktop or mobile app. That might sound like a lot to do in 15 minutes, but don't worry, we have a superpower known as the Angular Command Line Interface.

And this is not your typical CLI. This thing is really powerful because of Angular's conventions, we can generate a lot of code automatically. At this point, I'm assuming you have Node. Js installed on your system, and we'll run npm install global at angular cli. This will give you access to the ng command in your terminal.

And the first thing we'll wanna do is generate a new Angular app. We can do that by running ng new with the name of the app, Then it will ask us if we want to add routing, we'll go ahead and say yes, and we'll choose SCSS for our styles. And then we'll go ahead and open up our app in Versus Code. There's a couple of extensions you'll want to have. 1st is the Angular language service, which will give you syntax highlighting in your HTML templates.

And then I'm also installing the Angular console, which is a tool that allows us to simply point and click on CLI commands as opposed to typing them out manually in the terminal. Go ahead and find the serve command, then hit run. What happens is that our code is now bundled with webpack using LiveReload. So every time we make a change to our code. It will be reflected in the browser, and you can see that on localhost 4200.

Now, if you're new to web development, you may have not experienced this yet, but one of the most painful aspects of the job can be bundling your code. When building a web application, you need to target multiple browsers, And on top of that, you want to keep the JavaScript bundle size as small as possible. Doing this from scratch in a complex application is a major pain, but not with Angular. Click the build command and see what happens. Angular will automatically minify and bundle your code, and will also generate multiple bundles for differential loading.

This means the browser will always load the smallest JavaScript bundle possible based on the features available in that browser. And we can see all that raw JavaScript code by going into the dist folder. And this is the folder that we would actually deploy to a production hosting account or server. Now let's take a look at some of the files in this initial application. We have a few TS config files here, which were automatically generated and set up for this project.

Angular was really the first major framework to encourage the use of TypeScript, and you now see it as almost a standard on large complex projects. Open your eyes. Now, the default Angular app also comes with testing using Karma and Jasmine, but there are other schematics or other extensions for the CLI you can use for other testing frameworks place like Jest and Cypress. And that's just another thing that Angular does out of the box. It sets up your testing utilities so you don't have to think about configuring them.

But what good is any of this if the framework doesn't actually help us build a front end UI? Because Angular at its core is very similar to other UI frameworks place like React, Svelte, and Vue, just to name a few. You'll find these same concepts in Angular that you find in these frameworks. Component based UI architecture, where you can pass properties or data from one component to another. The place where we write our actual UI code is in the source app directory.

By default, Angular generates an App component, which is essentially the entry point into the app. We can see how this works by opening up the index HTML file, which is just plain HTML. The special thing is that we have this app root element in the body. This element will be replaced with our actual Angular JavaScript application. And that initial parsing of the JavaScript is called bootstrapping.

But the main thing you'll be doing in Angular is creating a UI by building and composing components together. And there are 3 main pieces to any component. The component TypeScript is where you define your custom JavaScript logic, and also define the internal state of the component. Then you have your HTML, which contains the actual visual UI and allows you to bind data from the TypeScript to that template. And lastly, you have a stylesheet, which is scoped to that component, meaning these styles won't bleed out to other components.

Let's go into the app component HTML first, and delete all of the boilerplate code in there, leaving only the router outlet. Angular provides a very powerful router out of the box, which allows you to map components to URLs in the browser. And the router can even help you do something called code splitting with Webpack to lazy load certain parts of your JavaScript bundle. We're not going to cover it in this video, but just know that it's a relatively complex thing that Angular makes trivial. Now from this point, I want to build something meaningful.

So let's build a little game of tic tac toe. The idea itself is inspired by the React tutorial, and it provides a good baseline for understanding the mechanics of the framework. We'll start by building a bare bones game, then we'll add a design system, and lastly, we will deploy it as a PWA. So the first thing we'll do is generate a component to represent an individual square. We'll find the generate command with the Angular console.

We'll generate a component and give it a name of Square. And a lot of times in Angular, you might not need to have your component separated into 3 different files. So when running this command from the Angular console, we'll actually select the options for inline template and inline styles. You'll see this created a Square directory along with a Square component inside. If we open up the component, you'll see that we're importing component and OnInit from Angular core.

On init is what's known as a life cycle hook, which allows you to run some code when the component is first initialized. It's not required for this component, so I'm going to go ahead and delete the references to it, and what we're left with here is just a plain Angular component. Every component starts with a component decorator, and decorators are these things that start with an at symbol. And you can watch my full video on TypeScript decorators if you're curious to learn how they work. P but in the case of Angular, they allow us to pass in an object that configures the way this component behaves.

First, you'll notice the selector option. One. This is the name of the component as it will be declared or used in the HTML. Let's go ahead and open the app component to see how that works. If we start typing App Square, it should autocomplete in Versus Code, and then we can hit tab to complete it.

And then if we're still serving the app, We should see the content of that component in the web page. The next thing you'll notice is the template. Angular provides a special templating language that empowers your HTML with JavaScript like logic. You can use conditional expressions, loops, and bind data directly to the HTML to write templates that are expressive and easy to understand, and also highly performant when it comes to reacting to data changes within the app. And that's why declarative UI frameworks like React, Angular, etcetera are so popular.

And make it easy for you as a developer to keep your app data in sync with the actual UI how it appears visually for the end user. In Angular, we can bind data to a template by simply adding it as a property to the component class. Just to demonstrate this, I'll add a random number, and then I can interpolate it in the template by using double braces. And now we should see the random number in the screen. Under the hood, Angular is doing a thing called change detection, where where it's looking for changes to these properties and then updating the UI in a highly performant way.

And all we have to do from a development perspective is change the value of the property. For For example, if we set up an interval here and change the random number to a different random number, you'll see it's updated in the screen every 500 milliseconds. So when you set a property on a component class, that's like setting its internal state. But in many cases, you want to pass in the property from a parent component, and that's exactly what we want for the square. We can allow properties to be input into this component by using the input decorator.

If we start typing input and then tab, it will automatically import this decorator for us. And then we can set the property name to value, and we could even use TypeScript here to limit this value to a certain subset of string values or some other type if we wanted to. And now we can go back up to our component declaration in the App component, and now we can input this value from the parent component, which can be just a string value. Or if we wrap value in brackets, it will take an actual expression or dynamic value from this parent component. And that means you can pass a complex object from parent to child.

Now if we look at our Square component, it only has a single input. There's nothing in this component that allows it to modify its own state. It all comes from the parent. So we generally call this a UI component or a dump component. Dump components are a good thing.

They're easy to test and they're only concerned about the UI, so there's not much to worry about in terms of bugs and things like that. But in order to build a tic tac toe game, we'll need some kind of smart component to manage the state or the data between the various for Squares. Let's go ahead and generate that component. We'll call it Board and just stick with the default options. Now our Board component will be our Smart component, meaning it has internal state that can change.

We have the Squares property which represents the 9 moves on the game board which will be an array of Strings. And then we have a property called x is next which is a boolean to help us determine the current player. And then we have the winner which will either be x or o. Now every component has a constructor and also life cycle hooks. The constructor runs immediately when this class is created, but you don't generally do anything in the constructor better aside from inject your dependencies, which we'll look at in a future video.

If you have initial setup work that needs to be done in a component, You'll use the NG on init lifecycle hook in most cases. In our case, we'll write a method on this component called newGame and its responsibility is to set up the initial values when starting a brand new game. For our squares property, we'll create an array with 9 elements in it, and then we'll fill them with null values initially. When a user clicks on a square, these values will be spliced with either an x or an o. We'll set the winner to null and x is next to true.

Now when working with data on a component, you may want to compute a property based on one of the main pieces of data that changes. In our case, x is next determines which player is currently using the game board. That's a boolean value, but we'd also like to show the name of the player as a string, which would be x or o. So we can create a computed property by using a TypeScript getter. We'll go ahead and call this property player.

And if x is next is true, then the next player will be x. Otherwise, it will be o. Now anytime the x's next value changes, this computed property will be changed and reflected in the UI as well. Now the next thing we'll do in this component is define a method which will serve as an event handler for when the user clicks on one of the buttons to make a move. When that click event happens, we'll check the index in the array that they clicked on.

If that square has already been clicked, then we won't do anything. But if it's empty or null, and we'll splice in the index of the square the user clicked on with the current player that we've computed in this component. And then we'll also toggle the x's next boolean to its bit value by using an exclamation mark. Then the last thing I'll do is write a method called calculate winner. This code mostly comes from the React tutorial and it's basically just an algorithm that determines if the user has won the tic tac toe game.

I'm not going to spend time explaining the exact implementation details, but feel free to copy the source code from the GitHub link in the video description. So now let's head into the HTML template to see how we can bind the data properties we define on component class to our actual UI. We'll want to show the name of the current player, show the winner if the winner exists, and then also loop over the array of for squares so the user has something to click on. The player property that we defined with a getter behaves just like any other property. We can simply use it with the handlebar syntax to interpolate it in the template.

Now the other thing that you'll commonly do in a web application is handle events. And in Angular, we can bind to events by using parentheses. And you'll notice that when we do that, Angular's tooling will automatically give us a list of all the possible events to add here. And then we bind a handler to this event, which Versus Code will also autocomplete. So in Angular, you get amazing tooling both in the TypeScript and also in your templates.

Now, for this tic tac toe game, if we have a winner, we want to display a conditional template only when that winner exists and we can make that happen with what's called a structural directive. If you type in star, you'll see the different structural directives at your disposal. But the most common one is n g f, and it allows you to only render the HTML that it's bound to if the value on the right side evaluates to true, or it can be coerced to a truthy value to be more precise. And so when the winner is present, then this h two element will be rendered in the DOM. Now the final step is to put together the actual squares that represent the game board.

Another common structural directive in Angular is ng 4. So first, we'll declare our App Square component, then we'll add ng 4 to render this component multiple times based on the array of squares. Inside of ng 4, we say let val, which creates a template variable named file that we can now use in this template. And if we also want access to the index, we can set a template variable of I equal to the index. And now we can put these variables to use.

The first thing we'll want to do is pass the value down to the child App Square component and it can use that value to render an x or an o in the button. And we'll also bind to the click event to make a move on that index when the user clicks on the square. Now that takes care of our template logic, but there's one thing that's missing and that is our CSS styling to give us a 3 by 3 grid. CSS Grid makes this very easy. We just set up our main element to display grid and then we'll display the columns at 200 pixels each.

At this point, you can serve the application, and you should now be able to play a game of tic tac toe. But we have one major problem at this point. The app looks horrible. So So what we'd like to do is add some global styling, like a design system, to give us a consistent UI that looks great. But usually setting up something like that is pretty involved.

But fortunately, the Angular ecosystem has a variety of third party component libraries that we can easily add to this project with a single command. And that means our app can look great right out of the gate without any decision making or configuration on our part. There are plenty of great options to choose from like Angular Material, Ionic, and others, but today we're going to go with Nebula. Not only do the default components look great, but they also just released a new feature called UIBakery, and it's a tool that allows you to visually create components and then download Angular code. Expect a video on this topic in the near future.

For right now, we'll go pet and add Nebula to this project by using the ng add command. If we run ng add at nebulartheme, it will automatically install and configure Nebula in our project. I'm gonna go ahead and choose the Cosmic theme because that sounds cool and we'll also say yes to customization and animation. You'll notice a few key changes to the project. We now have a Themes.

Scss file which we can use to customize the variables used in the theme. And then we can go into the app module and we'll see that we have a few ng modules ported here. We're not going to talk about ng modules in this video, but they are discussed in detail in the full course. Basically, they're just a mechanism that makes it possible to use Angular in a progressive way, or in other words, only use the parts of the framework that you actually need. In our case, we'll go ahead and import the nebularButton module because that's the only Nebula component that we want to use so we don't have to package the entire thing which would increase our bundle size and decrease performance.

And also, if we go into the App component, you'll see that we now have a bunch of components that are prefixed by nb for nebular. And already the UI is looking a lot more interesting. But one obvious way we can improve this is to change the styling of an individual square based on its state. If we go back into our Square component, we now have access to the n b button directive. With this directive, you can apply the nebular button theme and behaviors to any HTML element.

Using the directive as is will give you the default nebular button, which we'll go ahead and do when the value is null or when the square has not been selected. Then Then we'll go ahead and set up a couple of additional buttons as well, and these buttons will take additional properties on the n b button directive. And the design system provides a lot of different ways to customize the button right out of the box. For example, we'll use this hero button which gives it a nice little gradient, but check out the component library in the docs for a full set of examples. P.

Then we'll conditionally render each button depending on whether or not the value is x or o using the ng if directive. Now I realize I'm going through this code very fast, but again make sure to reference the link to GitHub in the video description to find the full project source code. And one last thing I'll do is also go into the Board component, and for the Start New Game button, we'll go ahead and display an outline button there. And with just a few minor changes, we now have a much better looking game of tic tac toe. So this kind of highlights my favorite thing about Angular and that is getting things done quickly.

The tooling truly is amazing and there's a lot less configuration required to get to something meaningful. But there's still one more thing I promised you and that's to make this a progressive web app that can be installed as a native app. And believe it or not, that's actually the easiest part of this entire video. Let's head over to the Angular console, click on Add, and then you'll see a full list of the different schematics that are available to you. The one we're interested in is at angular/pwa.

When you run this command, it does several important things related to PWAs. The first thing it does is add the JavaScript code needed to load a service worker in the Angular app, and and then it gives you a configuration file that you can use to customize the behavior of the service worker. And the worker is there primarily to make your app work offline, so you can customize the behavior of how those pages are cached and stored offline. And then you'll also notice that it adds a manifest file and some icons for the actual install button for the app. Now in order to determine if we have a valid progressive web app, we need to run this app in a production environment.

So the first step in that process is to run ng build, which we can do with the Angular console. And that will compile all of our TypeScript code down to JavaScript in the dist folder. There's just one thing missing and that's an actual place to deploy our code. My personal favorite place is Firebase, and we can easily add Firebase to an Angular project by running ng add at AngularFire. This is going to ask you for a Firebase project, so you'll need to have signed up for a Firebase account if you don't have one already.

And Firebase Hosting can be used on the free tier, by the way. The only thing left to do at this point is run ng deploy. That's going to automatically deploy our production app to the Firebase Hosting account. That will give you the hosting URL when it's finished, and now we can play tic tac toe on the web. But, here's the coolest thing about this.

If we go to the Audits tab in Chrome Dev Tools, we can analyze our app as a PWA, and you can see we hit the green check marks on everything. And what this means for the end user is that the app is now installable on their device and PWAs are supported pretty much everywhere now. In fact, we can even install it on Windows Desktop. By hitting the install button in Chrome, it will add a shortcut to the desktop and it will open up the app in an actual Windows window. And now people can use your web app as if it were a traditional desktop app.

And the same goes for mobile apps as well. So I'll just finish up by saying that Angular is a really awesome tool when you know how to use it. And if you want to go beyond the basics and learn how to build a real world progressive web app, consider becoming a Pro Member at Fireship IO. You'll get access to the brand new Angular 8 course and a whole bunch of other pro content. Thanks for watching and I will talk to you soon.
Welcome to my first ever Angular tutorial for beginners. If you've learned a little bit about JavaScript, HTML, and CSS, the next step is to make the world a better place by building an app that people can use. Today, we'll build a tic tac toe game from scratch, deploy it, and make it installable on desktop and mobile applications as a PWA.
animation
And, despite Angular's reputation as an enterprise grade framework, you might be very surprised at how easy it is to start being productive with Angular, even as a beginner. And you'll especially love it when you start building complex products in real life. If you're new here, like and subscribe, and if you want to get really deep into Angular, check out my new Angular course on FireShip. I build. First of all, what is Angular? Because the word Angular refers to so many different things. It's a declarative UI framework, a code bundler, a tool for building progressive web apps.
It handles server side rendering, provides libraries for forms, testing, animation, and so much more. And it's all wrapped up in a highly performant package that will help reduce decision fatigue. Web developers especially have a huge number of open source libraries to choose from when building a product, and the status quo is always changing. Wait a minute. No. Wait a minute. Wait a minute. I know. Angular ships with a ton of features out of the box, many of which anticipate the complexity that you'll face as your app grows.
software
software development
computer science
technology
But almost all of its features are optional and can be adopted as needed. So what does Angular really do at its core then? The short answer is that it helps you build complex, cross platform applications using web technology, like JavaScript, HTML, and CSS.
But I think the best way to answer that question is to just show you by building something from scratch. So over the next 15 minutes or so, we'll build a tic tac toe game, we'll add a design system to it, we'll make it a progressive web app, we'll deploy it, and finally install it on our local system, as if it were a native desktop or mobile app.
tiktok
graphic design
technology
That might sound like a lot to do in 15 minutes, but don't worry, we have a superpower known as the Angular Command Line Interface. And this is not your typical CLI. This thing is really powerful because of Angular's conventions, we can generate a lot of code automatically. At this point, I'm assuming you have Node. Js installed on your system, and we'll run npm install global at angular cli. This will give you access to the ng command in your terminal. And the first thing we'll wanna do is generate a new Angular app. We can do that by running ng new with the name of the app, Then it will ask us if we want to add routing, we'll go ahead and say yes, and we'll choose SCSS for our styles.
And then we'll go ahead and open up our app in Versus Code. There's a couple of extensions you'll want to have. 1st is the Angular language service, which will give you syntax highlighting in your HTML templates. And then I'm also installing the Angular console, which is a tool that allows us to simply point and click on CLI commands as opposed to typing them out manually in the terminal.
software
Go ahead and find the serve command, then hit run. What happens is that our code is now bundled with webpack using LiveReload. So every time we make a change to our code. It will be reflected in the browser, and you can see that on localhost 4200. Now, if you're new to web development, you may have not experienced this yet, but one of the most painful aspects of the job can be bundling your code. When building a web application, you need to target multiple browsers, And on top of that, you want to keep the JavaScript bundle size as small as possible. Doing this from scratch in a complex application is a major pain, but not with Angular. Click the build command and see what happens. Angular will automatically minify and bundle your code, and will also generate multiple bundles for differential loading. This means the browser will always load the smallest JavaScript bundle possible based on the features available in that browser. And we can see all that raw JavaScript code by going into the dist folder.
And this is the folder that we would actually deploy to a production hosting account or server. Now let's take a look at some of the files in this initial application. We have a few TS config files here, which were automatically generated and set up for this project. Angular was really the first major framework to encourage the use of TypeScript, and you now see it as almost a standard on large complex projects. Open your eyes. Now, the default Angular app also comes with testing using Karma and Jasmine, but there are other schematics or other extensions for the CLI you can use for other testing frameworks place like Jest and Cypress.
databases
software development
software
And that's just another thing that Angular does out of the box. It sets up your testing utilities so you don't have to think about configuring them. But what good is any of this if the framework doesn't actually help us build a front end UI? Because Angular at its core is very similar to other UI frameworks place like React, Svelte, and Vue, just to name a few. You'll find these same concepts in Angular that you find in these frameworks. Component based UI architecture, where you can pass properties or data from one component to another. The place where we write our actual UI code is in the source app directory. By default, Angular generates an App component, which is essentially the entry point into the app. We can see how this works by opening up the index HTML file, which is just plain HTML. The special thing is that we have this app root element in the body. This element will be replaced with our actual Angular JavaScript application. And that initial parsing of the JavaScript is called bootstrapping. But the main thing you'll be doing in Angular is creating a UI by building and composing components together. And there are 3 main pieces to any component. The component TypeScript is where you define your custom JavaScript logic, and also define the internal state of the component. Then you have your HTML, which contains the actual visual UI and allows you to bind data from the TypeScript to that template. And lastly, you have a stylesheet, which is scoped to that component, meaning these styles won't bleed out to other components. Let's go into the app component HTML first, and delete all of the boilerplate code in there, leaving only the router outlet. Angular provides a very powerful router out of the box, which allows you to map components to URLs in the browser. And the router can even help you do something called code splitting with Webpack to lazy load certain parts of your JavaScript bundle. We're not going to cover it in this video, but just know that it's a relatively complex thing that Angular makes trivial.
Now from this point, I want to build something meaningful. So let's build a little game of tic tac toe. The idea itself is inspired by the React tutorial, and it provides a good baseline for understanding the mechanics of the framework. We'll start by building a bare bones game, then we'll add a design system, and lastly, we will deploy it as a PWA.
graphic design
So the first thing we'll do is generate a component to represent an individual square. We'll find the generate command with the Angular console. We'll generate a component and give it a name of Square. And a lot of times in Angular, you might not need to have your component separated into 3 different files. So when running this command from the Angular console, we'll actually select the options for inline template and inline styles. You'll see this created a Square directory along with a Square component inside. If we open up the component, you'll see that we're importing component and OnInit from Angular core. On init is what's known as a life cycle hook, which allows you to run some code when the component is first initialized.
It's not required for this component, so I'm going to go ahead and delete the references to it, and what we're left with here is just a plain Angular component. Every component starts with a component decorator, and decorators are these things that start with an at symbol. And you can watch my full video on TypeScript decorators if you're curious to learn how they work. P but in the case of Angular, they allow us to pass in an object that configures the way this component behaves.
graphic design
First, you'll notice the selector option. One. This is the name of the component as it will be declared or used in the HTML. Let's go ahead and open the app component to see how that works. If we start typing App Square, it should autocomplete in Versus Code, and then we can hit tab to complete it. And then if we're still serving the app, We should see the content of that component in the web page. The next thing you'll notice is the template. Angular provides a special templating language that empowers your HTML with JavaScript like logic. You can use conditional expressions, loops, and bind data directly to the HTML to write templates that are expressive and easy to understand, and also highly performant when it comes to reacting to data changes within the app. And that's why declarative UI frameworks like React, Angular, etcetera are so popular. And make it easy for you as a developer to keep your app data in sync with the actual UI how it appears visually for the end user. In Angular, we can bind data to a template by simply adding it as a property to the component class. Just to demonstrate this, I'll add a random number, and then I can interpolate it in the template by using double braces. And now we should see the random number in the screen. Under the hood, Angular is doing a thing called change detection, where where it's looking for changes to these properties and then updating the UI in a highly performant way. And all we have to do from a development perspective is change the value of the property. For For example, if we set up an interval here and change the random number to a different random number, you'll see it's updated in the screen every 500 milliseconds. So when you set a property on a component class, that's like setting its internal state. But in many cases, you want to pass in the property from a parent component, and that's exactly what we want for the square. We can allow properties to be input into this component by using the input decorator. If we start typing input and then tab, it will automatically import this decorator for us. And then we can set the property name to value, and we could even use TypeScript here to limit this value to a certain subset of string values or some other type if we wanted to. And now we can go back up to our component declaration in the App component, and now we can input this value from the parent component, which can be just a string value. Or if we wrap value in brackets, it will take an actual expression or dynamic value from this parent component. And that means you can pass a complex object from parent to child. Now if we look at our Square component, it only has a single input. There's nothing in this component that allows it to modify its own state. It all comes from the parent. So we generally call this a UI component or a dump component. Dump components are a good thing. They're easy to test and they're only concerned about the UI, so there's not much to worry about in terms of bugs and things like that.
But in order to build a tic tac toe game, we'll need some kind of smart component to manage the state or the data between the various for Squares. Let's go ahead and generate that component. We'll call it Board and just stick with the default options. Now our Board component will be our Smart component, meaning it has internal state that can change. We have the Squares property which represents the 9 moves on the game board which will be an array of Strings. And then we have a property called x is next which is a boolean to help us determine the current player. And then we have the winner which will either be x or o.
games
graphic design
systems
gambling
Now every component has a constructor and also life cycle hooks. The constructor runs immediately when this class is created, but you don't generally do anything in the constructor better aside from inject your dependencies, which we'll look at in a future video. If you have initial setup work that needs to be done in a component, You'll use the NG on init lifecycle hook in most cases.
In our case, we'll write a method on this component called newGame and its responsibility is to set up the initial values when starting a brand new game. For our squares property, we'll create an array with 9 elements in it, and then we'll fill them with null values initially.
games
When a user clicks on a square, these values will be spliced with either an x or an o.
We'll set the winner to null and x is next to true. Now when working with data on a component, you may want to compute a property based on one of the main pieces of data that changes. In our case, x is next determines which player is currently using the game board. That's a boolean value, but we'd also like to show the name of the player as a string, which would be x or o. So we can create a computed property by using a TypeScript getter.
data
games
We'll go ahead and call this property player. And if x is next is true, then the next player will be x.
Otherwise, it will be o. Now anytime the x's next value changes, this computed property will be changed and reflected in the UI as well. Now the next thing we'll do in this component is define a method which will serve as an event handler for when the user clicks on one of the buttons to make a move. When that click event happens, we'll check the index in the array that they clicked on.
operations
If that square has already been clicked, then we won't do anything.
But if it's empty or null, and we'll splice in the index of the square the user clicked on with the current player that we've computed in this component. And then we'll also toggle the x's next boolean to its bit value by using an exclamation mark. Then the last thing I'll do is write a method called calculate winner. This code mostly comes from the React tutorial and it's basically just an algorithm that determines if the user has won the tic tac toe game. I'm not going to spend time explaining the exact implementation details, but feel free to copy the source code from the GitHub link in the video description.
programming
logic
animation
So now let's head into the HTML template to see how we can bind the data properties we define on component class to our actual UI. We'll want to show the name of the current player, show the winner if the winner exists, and then also loop over the array of for squares so the user has something to click on. The player property that we defined with a getter behaves just like any other property. We can simply use it with the handlebar syntax to interpolate it in the template. Now the other thing that you'll commonly do in a web application is handle events. And in Angular, we can bind to events by using parentheses. And you'll notice that when we do that, Angular's tooling will automatically give us a list of all the possible events to add here. And then we bind a handler to this event, which Versus Code will also autocomplete. So in Angular, you get amazing tooling both in the TypeScript and also in your templates. Now, for this tic tac toe game, if we have a winner, we want to display a conditional template only when that winner exists and we can make that happen with what's called a structural directive. If you type in star, you'll see the different structural directives at your disposal. But the most common one is n g f, and it allows you to only render the HTML that it's bound to if the value on the right side evaluates to true, or it can be coerced to a truthy value to be more precise. And so when the winner is present, then this h two element will be rendered in the DOM. Now the final step is to put together the actual squares that represent the game board. Another common structural directive in Angular is ng 4. So first, we'll declare our App Square component, then we'll add ng 4 to render this component multiple times based on the array of squares. Inside of ng 4, we say let val, which creates a template variable named file that we can now use in this template. And if we also want access to the index, we can set a template variable of I equal to the index. And now we can put these variables to use. The first thing we'll want to do is pass the value down to the child App Square component and it can use that value to render an x or an o in the button. And we'll also bind to the click event to make a move on that index when the user clicks on the square. Now that takes care of our template logic, but there's one thing that's missing and that is our CSS styling to give us a 3 by 3 grid. CSS Grid makes this very easy. We just set up our main element to display grid and then we'll display the columns at 200 pixels each.
At this point, you can serve the application, and you should now be able to play a game of tic tac toe. But we have one major problem at this point. The app looks horrible. So So what we'd like to do is add some global styling, like a design system, to give us a consistent UI that looks great. But usually setting up something like that is pretty involved. But fortunately, the Angular ecosystem has a variety of third party component libraries that we can easily add to this project with a single command. And that means our app can look great right out of the gate without any decision making or configuration on our part.
graphic design
animation
databases
There are plenty of great options to choose from like Angular Material, Ionic, and others, but today we're going to go with Nebula.
Not only do the default components look great, but they also just released a new feature called UIBakery, and it's a tool that allows you to visually create components and then download Angular code. Expect a video on this topic in the near future. For right now, we'll go pet and add Nebula to this project by using the ng add command.
animation
If we run ng add at nebulartheme, it will automatically install and configure Nebula in our project. I'm gonna go ahead and choose the Cosmic theme because that sounds cool and we'll also say yes to customization and animation. You'll notice a few key changes to the project. We now have a Themes. Scss file which we can use to customize the variables used in the theme. And then we can go into the app module and we'll see that we have a few ng modules ported here. We're not going to talk about ng modules in this video, but they are discussed in detail in the full course. Basically, they're just a mechanism that makes it possible to use Angular in a progressive way, or in other words, only use the parts of the framework that you actually need. In our case, we'll go ahead and import the nebularButton module because that's the only Nebula component that we want to use so we don't have to package the entire thing which would increase our bundle size and decrease performance. And also, if we go into the App component, you'll see that we now have a bunch of components that are prefixed by nb for nebular. And already the UI is looking a lot more interesting. But one obvious way we can improve this is to change the styling of an individual square based on its state. If we go back into our Square component, we now have access to the n b button directive. With this directive, you can apply the nebular button theme and behaviors to any HTML element. Using the directive as is will give you the default nebular button, which we'll go ahead and do when the value is null or when the square has not been selected. Then Then we'll go ahead and set up a couple of additional buttons as well, and these buttons will take additional properties on the n b button directive. And the design system provides a lot of different ways to customize the button right out of the box. For example, we'll use this hero button which gives it a nice little gradient, but check out the component library in the docs for a full set of examples. P. Then we'll conditionally render each button depending on whether or not the value is x or o using the ng if directive. Now I realize I'm going through this code very fast, but again make sure to reference the link to GitHub in the video description to find the full project source code.
And one last thing I'll do is also go into the Board component, and for the Start New Game button, we'll go ahead and display an outline button there. And with just a few minor changes, we now have a much better looking game of tic tac toe. So this kind of highlights my favorite thing about Angular and that is getting things done quickly.
animation
The tooling truly is amazing and there's a lot less configuration required to get to something meaningful. But there's still one more thing I promised you and that's to make this a progressive web app that can be installed as a native app. And believe it or not, that's actually the easiest part of this entire video. Let's head over to the Angular console, click on Add, and then you'll see a full list of the different schematics that are available to you. The one we're interested in is at angular/pwa. When you run this command, it does several important things related to PWAs.
software
software development
multimedia
youtube
video gaming
technology
The first thing it does is add the JavaScript code needed to load a service worker in the Angular app, and and then it gives you a configuration file that you can use to customize the behavior of the service worker. And the worker is there primarily to make your app work offline, so you can customize the behavior of how those pages are cached and stored offline.
And then you'll also notice that it adds a manifest file and some icons for the actual install button for the app. Now in order to determine if we have a valid progressive web app, we need to run this app in a production environment. So the first step in that process is to run ng build, which we can do with the Angular console.
software development
And that will compile all of our TypeScript code down to JavaScript in the dist folder. There's just one thing missing and that's an actual place to deploy our code. My personal favorite place is Firebase, and we can easily add Firebase to an Angular project by running ng add at AngularFire. This is going to ask you for a Firebase project, so you'll need to have signed up for a Firebase account if you don't have one already. And Firebase Hosting can be used on the free tier, by the way. The only thing left to do at this point is run ng deploy.
That's going to automatically deploy our production app to the Firebase Hosting account. That will give you the hosting URL when it's finished, and now we can play tic tac toe on the web. But, here's the coolest thing about this. If we go to the Audits tab in Chrome Dev Tools, we can analyze our app as a PWA, and you can see we hit the green check marks on everything. And what this means for the end user is that the app is now installable on their device and PWAs are supported pretty much everywhere now.
software
internet
In fact, we can even install it on Windows Desktop. By hitting the install button in Chrome, it will add a shortcut to the desktop and it will open up the app in an actual Windows window. And now people can use your web app as if it were a traditional desktop app. And the same goes for mobile apps as well. So I'll just finish up by saying that Angular is a really awesome tool when you know how to use it. And if you want to go beyond the basics and learn how to build a real world progressive web app, consider becoming a Pro Member at Fireship IO. You'll get access to the brand new Angular 8 course and a whole bunch of other pro content. Thanks for watching and I will talk to you soon.
Welcome to my first ever Angular tutorial for beginners. If you've learned a little bit about JavaScript, HTML, and CSS, the next step is to make the world a better place by building an app that people can use. Today, we'll build a tic tac toe game from scratch, deploy it, and make it installable on desktop and mobile applications as a PWA. And, despite Angular's reputation as an enterprise grade framework, you might be very surprised at how easy it is to start being productive with Angular, even as a beginner. And you'll especially love it when you start building complex products in real life. If you're new here, like and subscribe, and if you want to get really deep into Angular, check out my new Angular course on FireShip. I build. First of all, what is Angular? Because the word Angular refers to so many different things. It's a declarative UI framework, a code bundler, a tool for building progressive web apps. It handles server side rendering, provides libraries for forms, testing, animation, and so much more. And it's all wrapped up in a highly performant package that will help reduce decision fatigue. Web developers especially have a huge number of open source libraries to choose from when building a product, and the status quo is always changing. Wait a minute. No. Wait a minute. Wait a minute. I know. Angular ships with a ton of features out of the box, many of which anticipate the complexity that you'll face as your app grows. But almost all of its features are optional and can be adopted as needed. So what does Angular really do at its core then? The short answer is that it helps you build complex, cross platform applications using web technology, like JavaScript, HTML, and CSS. But I think the best way to answer that question is to just show you by building something from scratch. So over the next 15 minutes or so, we'll build a tic tac toe game, we'll add a design system to it, we'll make it a progressive web app, we'll deploy it, and finally install it on our local system, as if it were a native desktop or mobile app. That might sound like a lot to do in 15 minutes, but don't worry, we have a superpower known as the Angular Command Line Interface. And this is not your typical CLI. This thing is really powerful because of Angular's conventions, we can generate a lot of code automatically. At this point, I'm assuming you have Node. Js installed on your system, and we'll run npm install global at angular cli. This will give you access to the ng command in your terminal. And the first thing we'll wanna do is generate a new Angular app. We can do that by running ng new with the name of the app, Then it will ask us if we want to add routing, we'll go ahead and say yes, and we'll choose SCSS for our styles. And then we'll go ahead and open up our app in Versus Code. There's a couple of extensions you'll want to have. 1st is the Angular language service, which will give you syntax highlighting in your HTML templates. And then I'm also installing the Angular console, which is a tool that allows us to simply point and click on CLI commands as opposed to typing them out manually in the terminal. Go ahead and find the serve command, then hit run. What happens is that our code is now bundled with webpack using LiveReload. So every time we make a change to our code. It will be reflected in the browser, and you can see that on localhost 4200. Now, if you're new to web development, you may have not experienced this yet, but one of the most painful aspects of the job can be bundling your code. When building a web application, you need to target multiple browsers, And on top of that, you want to keep the JavaScript bundle size as small as possible. Doing this from scratch in a complex application is a major pain, but not with Angular. Click the build command and see what happens. Angular will automatically minify and bundle your code, and will also generate multiple bundles for differential loading. This means the browser will always load the smallest JavaScript bundle possible based on the features available in that browser. And we can see all that raw JavaScript code by going into the dist folder. And this is the folder that we would actually deploy to a production hosting account or server. Now let's take a look at some of the files in this initial application. We have a few TS config files here, which were automatically generated and set up for this project. Angular was really the first major framework to encourage the use of TypeScript, and you now see it as almost a standard on large complex projects. Open your eyes. Now, the default Angular app also comes with testing using Karma and Jasmine, but there are other schematics or other extensions for the CLI you can use for other testing frameworks place like Jest and Cypress. And that's just another thing that Angular does out of the box. It sets up your testing utilities so you don't have to think about configuring them. But what good is any of this if the framework doesn't actually help us build a front end UI? Because Angular at its core is very similar to other UI frameworks place like React, Svelte, and Vue, just to name a few. You'll find these same concepts in Angular that you find in these frameworks. Component based UI architecture, where you can pass properties or data from one component to another. The place where we write our actual UI code is in the source app directory. By default, Angular generates an App component, which is essentially the entry point into the app. We can see how this works by opening up the index HTML file, which is just plain HTML. The special thing is that we have this app root element in the body. This element will be replaced with our actual Angular JavaScript application. And that initial parsing of the JavaScript is called bootstrapping. But the main thing you'll be doing in Angular is creating a UI by building and composing components together. And there are 3 main pieces to any component. The component TypeScript is where you define your custom JavaScript logic, and also define the internal state of the component. Then you have your HTML, which contains the actual visual UI and allows you to bind data from the TypeScript to that template. And lastly, you have a stylesheet, which is scoped to that component, meaning these styles won't bleed out to other components. Let's go into the app component HTML first, and delete all of the boilerplate code in there, leaving only the router outlet. Angular provides a very powerful router out of the box, which allows you to map components to URLs in the browser. And the router can even help you do something called code splitting with Webpack to lazy load certain parts of your JavaScript bundle. We're not going to cover it in this video, but just know that it's a relatively complex thing that Angular makes trivial. Now from this point, I want to build something meaningful. So let's build a little game of tic tac toe. The idea itself is inspired by the React tutorial, and it provides a good baseline for understanding the mechanics of the framework. We'll start by building a bare bones game, then we'll add a design system, and lastly, we will deploy it as a PWA. So the first thing we'll do is generate a component to represent an individual square. We'll find the generate command with the Angular console. We'll generate a component and give it a name of Square. And a lot of times in Angular, you might not need to have your component separated into 3 different files. So when running this command from the Angular console, we'll actually select the options for inline template and inline styles. You'll see this created a Square directory along with a Square component inside. If we open up the component, you'll see that we're importing component and OnInit from Angular core. On init is what's known as a life cycle hook, which allows you to run some code when the component is first initialized. It's not required for this component, so I'm going to go ahead and delete the references to it, and what we're left with here is just a plain Angular component. Every component starts with a component decorator, and decorators are these things that start with an at symbol. And you can watch my full video on TypeScript decorators if you're curious to learn how they work. P but in the case of Angular, they allow us to pass in an object that configures the way this component behaves. First, you'll notice the selector option. One. This is the name of the component as it will be declared or used in the HTML. Let's go ahead and open the app component to see how that works. If we start typing App Square, it should autocomplete in Versus Code, and then we can hit tab to complete it. And then if we're still serving the app, We should see the content of that component in the web page. The next thing you'll notice is the template. Angular provides a special templating language that empowers your HTML with JavaScript like logic. You can use conditional expressions, loops, and bind data directly to the HTML to write templates that are expressive and easy to understand, and also highly performant when it comes to reacting to data changes within the app. And that's why declarative UI frameworks like React, Angular, etcetera are so popular. And make it easy for you as a developer to keep your app data in sync with the actual UI how it appears visually for the end user. In Angular, we can bind data to a template by simply adding it as a property to the component class. Just to demonstrate this, I'll add a random number, and then I can interpolate it in the template by using double braces. And now we should see the random number in the screen. Under the hood, Angular is doing a thing called change detection, where where it's looking for changes to these properties and then updating the UI in a highly performant way. And all we have to do from a development perspective is change the value of the property. For For example, if we set up an interval here and change the random number to a different random number, you'll see it's updated in the screen every 500 milliseconds. So when you set a property on a component class, that's like setting its internal state. But in many cases, you want to pass in the property from a parent component, and that's exactly what we want for the square. We can allow properties to be input into this component by using the input decorator. If we start typing input and then tab, it will automatically import this decorator for us. And then we can set the property name to value, and we could even use TypeScript here to limit this value to a certain subset of string values or some other type if we wanted to. And now we can go back up to our component declaration in the App component, and now we can input this value from the parent component, which can be just a string value. Or if we wrap value in brackets, it will take an actual expression or dynamic value from this parent component. And that means you can pass a complex object from parent to child. Now if we look at our Square component, it only has a single input. There's nothing in this component that allows it to modify its own state. It all comes from the parent. So we generally call this a UI component or a dump component. Dump components are a good thing. They're easy to test and they're only concerned about the UI, so there's not much to worry about in terms of bugs and things like that. But in order to build a tic tac toe game, we'll need some kind of smart component to manage the state or the data between the various for Squares. Let's go ahead and generate that component. We'll call it Board and just stick with the default options. Now our Board component will be our Smart component, meaning it has internal state that can change. We have the Squares property which represents the 9 moves on the game board which will be an array of Strings. And then we have a property called x is next which is a boolean to help us determine the current player. And then we have the winner which will either be x or o. Now every component has a constructor and also life cycle hooks. The constructor runs immediately when this class is created, but you don't generally do anything in the constructor better aside from inject your dependencies, which we'll look at in a future video. If you have initial setup work that needs to be done in a component, You'll use the NG on init lifecycle hook in most cases. In our case, we'll write a method on this component called newGame and its responsibility is to set up the initial values when starting a brand new game. For our squares property, we'll create an array with 9 elements in it, and then we'll fill them with null values initially. When a user clicks on a square, these values will be spliced with either an x or an o. We'll set the winner to null and x is next to true. Now when working with data on a component, you may want to compute a property based on one of the main pieces of data that changes. In our case, x is next determines which player is currently using the game board. That's a boolean value, but we'd also like to show the name of the player as a string, which would be x or o. So we can create a computed property by using a TypeScript getter. We'll go ahead and call this property player. And if x is next is true, then the next player will be x. Otherwise, it will be o. Now anytime the x's next value changes, this computed property will be changed and reflected in the UI as well. Now the next thing we'll do in this component is define a method which will serve as an event handler for when the user clicks on one of the buttons to make a move. When that click event happens, we'll check the index in the array that they clicked on. If that square has already been clicked, then we won't do anything. But if it's empty or null, and we'll splice in the index of the square the user clicked on with the current player that we've computed in this component. And then we'll also toggle the x's next boolean to its bit value by using an exclamation mark. Then the last thing I'll do is write a method called calculate winner. This code mostly comes from the React tutorial and it's basically just an algorithm that determines if the user has won the tic tac toe game. I'm not going to spend time explaining the exact implementation details, but feel free to copy the source code from the GitHub link in the video description. So now let's head into the HTML template to see how we can bind the data properties we define on component class to our actual UI. We'll want to show the name of the current player, show the winner if the winner exists, and then also loop over the array of for squares so the user has something to click on. The player property that we defined with a getter behaves just like any other property. We can simply use it with the handlebar syntax to interpolate it in the template. Now the other thing that you'll commonly do in a web application is handle events. And in Angular, we can bind to events by using parentheses. And you'll notice that when we do that, Angular's tooling will automatically give us a list of all the possible events to add here. And then we bind a handler to this event, which Versus Code will also autocomplete. So in Angular, you get amazing tooling both in the TypeScript and also in your templates. Now, for this tic tac toe game, if we have a winner, we want to display a conditional template only when that winner exists and we can make that happen with what's called a structural directive. If you type in star, you'll see the different structural directives at your disposal. But the most common one is n g f, and it allows you to only render the HTML that it's bound to if the value on the right side evaluates to true, or it can be coerced to a truthy value to be more precise. And so when the winner is present, then this h two element will be rendered in the DOM. Now the final step is to put together the actual squares that represent the game board. Another common structural directive in Angular is ng 4. So first, we'll declare our App Square component, then we'll add ng 4 to render this component multiple times based on the array of squares. Inside of ng 4, we say let val, which creates a template variable named file that we can now use in this template. And if we also want access to the index, we can set a template variable of I equal to the index. And now we can put these variables to use. The first thing we'll want to do is pass the value down to the child App Square component and it can use that value to render an x or an o in the button. And we'll also bind to the click event to make a move on that index when the user clicks on the square. Now that takes care of our template logic, but there's one thing that's missing and that is our CSS styling to give us a 3 by 3 grid. CSS Grid makes this very easy. We just set up our main element to display grid and then we'll display the columns at 200 pixels each. At this point, you can serve the application, and you should now be able to play a game of tic tac toe. But we have one major problem at this point. The app looks horrible. So So what we'd like to do is add some global styling, like a design system, to give us a consistent UI that looks great. But usually setting up something like that is pretty involved. But fortunately, the Angular ecosystem has a variety of third party component libraries that we can easily add to this project with a single command. And that means our app can look great right out of the gate without any decision making or configuration on our part. There are plenty of great options to choose from like Angular Material, Ionic, and others, but today we're going to go with Nebula. Not only do the default components look great, but they also just released a new feature called UIBakery, and it's a tool that allows you to visually create components and then download Angular code. Expect a video on this topic in the near future. For right now, we'll go pet and add Nebula to this project by using the ng add command. If we run ng add at nebulartheme, it will automatically install and configure Nebula in our project. I'm gonna go ahead and choose the Cosmic theme because that sounds cool and we'll also say yes to customization and animation. You'll notice a few key changes to the project. We now have a Themes. Scss file which we can use to customize the variables used in the theme. And then we can go into the app module and we'll see that we have a few ng modules ported here. We're not going to talk about ng modules in this video, but they are discussed in detail in the full course. Basically, they're just a mechanism that makes it possible to use Angular in a progressive way, or in other words, only use the parts of the framework that you actually need. In our case, we'll go ahead and import the nebularButton module because that's the only Nebula component that we want to use so we don't have to package the entire thing which would increase our bundle size and decrease performance. And also, if we go into the App component, you'll see that we now have a bunch of components that are prefixed by nb for nebular. And already the UI is looking a lot more interesting. But one obvious way we can improve this is to change the styling of an individual square based on its state. If we go back into our Square component, we now have access to the n b button directive. With this directive, you can apply the nebular button theme and behaviors to any HTML element. Using the directive as is will give you the default nebular button, which we'll go ahead and do when the value is null or when the square has not been selected. Then Then we'll go ahead and set up a couple of additional buttons as well, and these buttons will take additional properties on the n b button directive. And the design system provides a lot of different ways to customize the button right out of the box. For example, we'll use this hero button which gives it a nice little gradient, but check out the component library in the docs for a full set of examples. P. Then we'll conditionally render each button depending on whether or not the value is x or o using the ng if directive. Now I realize I'm going through this code very fast, but again make sure to reference the link to GitHub in the video description to find the full project source code. And one last thing I'll do is also go into the Board component, and for the Start New Game button, we'll go ahead and display an outline button there. And with just a few minor changes, we now have a much better looking game of tic tac toe. So this kind of highlights my favorite thing about Angular and that is getting things done quickly. The tooling truly is amazing and there's a lot less configuration required to get to something meaningful. But there's still one more thing I promised you and that's to make this a progressive web app that can be installed as a native app. And believe it or not, that's actually the easiest part of this entire video. Let's head over to the Angular console, click on Add, and then you'll see a full list of the different schematics that are available to you. The one we're interested in is at angular/pwa. When you run this command, it does several important things related to PWAs. The first thing it does is add the JavaScript code needed to load a service worker in the Angular app, and and then it gives you a configuration file that you can use to customize the behavior of the service worker. And the worker is there primarily to make your app work offline, so you can customize the behavior of how those pages are cached and stored offline. And then you'll also notice that it adds a manifest file and some icons for the actual install button for the app. Now in order to determine if we have a valid progressive web app, we need to run this app in a production environment. So the first step in that process is to run ng build, which we can do with the Angular console. And that will compile all of our TypeScript code down to JavaScript in the dist folder. There's just one thing missing and that's an actual place to deploy our code. My personal favorite place is Firebase, and we can easily add Firebase to an Angular project by running ng add at AngularFire. This is going to ask you for a Firebase project, so you'll need to have signed up for a Firebase account if you don't have one already. And Firebase Hosting can be used on the free tier, by the way. The only thing left to do at this point is run ng deploy. That's going to automatically deploy our production app to the Firebase Hosting account. That will give you the hosting URL when it's finished, and now we can play tic tac toe on the web. But, here's the coolest thing about this. If we go to the Audits tab in Chrome Dev Tools, we can analyze our app as a PWA, and you can see we hit the green check marks on everything. And what this means for the end user is that the app is now installable on their device and PWAs are supported pretty much everywhere now. In fact, we can even install it on Windows Desktop. By hitting the install button in Chrome, it will add a shortcut to the desktop and it will open up the app in an actual Windows window. And now people can use your web app as if it were a traditional desktop app. And the same goes for mobile apps as well. So I'll just finish up by saying that Angular is a really awesome tool when you know how to use it. And if you want to go beyond the basics and learn how to build a real world progressive web app, consider becoming a Pro Member at Fireship IO. You'll get access to the brand new Angular 8 course and a whole bunch of other pro content. Thanks for watching and I will talk to you soon.
Welcome
welcome
to
to
my
my
first
first
ever
ever
Angular
angular
tutorial
tutorial
for
for
beginners.
beginners
If
if
you've
you've
learned
learned
a
a
little
little
bit
bit
about
about
JavaScript,
javascript
HTML,
html
and
and
CSS,
css
the
the
next
next
step
step
is
is
to
to
make
make
the
the
world
world
a
a
better
better
place
place
by
by
building
building
an
an
app
app
that
that
people
people
can
can
use.
use
Today,
today
we'll
we'll
build
build
a
a
tic
tic
tac
tac
toe
toe
game
game
from
from
scratch,
scratch
deploy
deploy
it,
it
and
and
make
make
it
it
installable
installable
on
on
desktop
desktop
and
and
mobile
mobile
applications
applications
as
as
a
a
PWA.
pwa
And,
and
despite
despite
Angular's
angular's
reputation
reputation
as
as
an
an
enterprise
enterprise
grade
grade
framework,
framework
you
you
might
might
be
be
very
very
surprised
surprised
at
at
how
how
easy
easy
it
it
is
is
to
to
start
start
being
being
productive
productive
with
with
Angular,
angular
even
even
as
as
a
a
beginner.
beginner
And
and
you'll
you'll
especially
especially
love
love
it
it
when
when
you
you
start
start
building
building
complex
complex
products
products
in
in
real
real
life.
life
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
if
if
you
you
want
want
to
to
get
get
really
really
deep
deep
into
into
Angular,
angular
check
check
out
out
my
my
new
new
Angular
angular
course
course
on
on
FireShip.
fireship
I
i
build.
build
First
first
of
of
all,
all
what
what
is
is
Angular?
angular
Because
because
the
the
word
word
Angular
angular
refers
refers
to
to
so
so
many
many
different
different
things.
things
It's
it's
a
a
declarative
declarative
UI
ui
framework,
framework
a
a
code
code
bundler,
bundler
a
a
tool
tool
for
for
building
building
progressive
progressive
web
web
apps.
apps
It
it
handles
handles
server
server
side
side
rendering,
rendering
provides
provides
libraries
libraries
for
for
forms,
forms
testing,
testing
animation,
animation
and
and
so
so
much
much
more.
more
And
and
it's
it's
all
all
wrapped
wrapped
up
up
in
in
a
a
highly
highly
performant
performant
package
package
that
that
will
will
help
help
reduce
reduce
decision
decision
fatigue.
fatigue
Web
web
developers
developers
especially
especially
have
have
a
a
huge
huge
number
number
of
of
open
open
source
source
libraries
libraries
to
to
choose
choose
from
from
when
when
building
building
a
a
product,
product
and
and
the
the
status
status
quo
quo
is
is
always
always
changing.
changing
Wait
wait
a
a
minute.
minute
No.
no
Wait
wait
a
a
minute.
minute
Wait
wait
a
a
minute.
minute
I
i
know.
know
Angular
angular
ships
ships
with
with
a
a
ton
ton
of
of
features
features
out
out
of
of
the
the
box,
box
many
many
of
of
which
which
anticipate
anticipate
the
the
complexity
complexity
that
that
you'll
you'll
face
face
as
as
your
your
app
app
grows.
grows
But
but
almost
almost
all
all
of
of
its
its
features
features
are
are
optional
optional
and
and
can
can
be
be
adopted
adopted
as
as
needed.
needed
So
so
what
what
does
does
Angular
angular
really
really
do
do
at
at
its
its
core
core
then?
then
The
the
short
short
answer
answer
is
is
that
that
it
it
helps
helps
you
you
build
build
complex,
complex
cross
cross
platform
platform
applications
applications
using
using
web
web
technology,
technology
like
like
JavaScript,
javascript
HTML,
html
and
and
CSS.
css
But
but
I
i
think
think
the
the
best
best
way
way
to
to
answer
answer
that
that
question
question
is
is
to
to
just
just
show
show
you
you
by
by
building
building
something
something
from
from
scratch.
scratch
So
so
over
over
the
the
next
next
15
15
minutes
minutes
or
or
so,
so
we'll
we'll
build
build
a
a
tic
tic
tac
tac
toe
toe
game,
game
we'll
we'll
add
add
a
a
design
design
system
system
to
to
it,
it
we'll
we'll
make
make
it
it
a
a
progressive
progressive
web
web
app,
app
we'll
we'll
deploy
deploy
it,
it
and
and
finally
finally
install
install
it
it
on
on
our
our
local
local
system,
system
as
as
if
if
it
it
were
were
a
a
native
native
desktop
desktop
or
or
mobile
mobile
app.
app
That
that
might
might
sound
sound
like
like
a
a
lot
lot
to
to
do
do
in
in
15
15
minutes,
minutes
but
but
don't
don't
worry,
worry
we
we
have
have
a
a
superpower
superpower
known
known
as
as
the
the
Angular
angular
Command
command
Line
line
Interface.
interface
And
and
this
this
is
is
not
not
your
your
typical
typical
CLI.
cli
This
this
thing
thing
is
is
really
really
powerful
powerful
because
because
of
of
Angular's
angular's
conventions,
conventions
we
we
can
can
generate
generate
a
a
lot
lot
of
of
code
code
automatically.
automatically
At
at
this
this
point,
point
I'm
i'm
assuming
assuming
you
you
have
have
Node.
node
Js
js
installed
installed
on
on
your
your
system,
system
and
and
we'll
we'll
run
run
npm
npm
install
install
global
global
at
at
angular
angular
cli.
cli
This
this
will
will
give
give
you
you
access
access
to
to
the
the
ng
ng
command
command
in
in
your
your
terminal.
terminal
And
and
the
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
generate
generate
a
a
new
new
Angular
angular
app.
app
We
we
can
can
do
do
that
that
by
by
running
running
ng
ng
new
new
with
with
the
the
name
name
of
of
the
the
app,
app
Then
then
it
it
will
will
ask
ask
us
us
if
if
we
we
want
want
to
to
add
add
routing,
routing
we'll
we'll
go
go
ahead
ahead
and
and
say
say
yes,
yes
and
and
we'll
we'll
choose
choose
SCSS
scss
for
for
our
our
styles.
styles
And
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
open
open
up
up
our
our
app
app
in
in
Versus
versus
Code.
code
There's
there's
a
a
couple
couple
of
of
extensions
extensions
you'll
you'll
want
want
to
to
have.
have
1st
1st
is
is
the
the
Angular
angular
language
language
service,
service
which
which
will
will
give
give
you
you
syntax
syntax
highlighting
highlighting
in
in
your
your
HTML
html
templates.
templates
And
and
then
then
I'm
i'm
also
also
installing
installing
the
the
Angular
angular
console,
console
which
which
is
is
a
a
tool
tool
that
that
allows
allows
us
us
to
to
simply
simply
point
point
and
and
click
click
on
on
CLI
cli
commands
commands
as
as
opposed
opposed
to
to
typing
typing
them
them
out
out
manually
manually
in
in
the
the
terminal.
terminal
Go
go
ahead
ahead
and
and
find
find
the
the
serve
serve
command,
command
then
then
hit
hit
run.
run
What
what
happens
happens
is
is
that
that
our
our
code
code
is
is
now
now
bundled
bundled
with
with
webpack
webpack
using
using
LiveReload.
livereload
So
so
every
every
time
time
we
we
make
make
a
a
change
change
to
to
our
our
code.
code
It
it
will
will
be
be
reflected
reflected
in
in
the
the
browser,
browser
and
and
you
you
can
can
see
see
that
that
on
on
localhost
localhost
4200.
4200
Now,
now
if
if
you're
you're
new
new
to
to
web
web
development,
development
you
you
may
may
have
have
not
not
experienced
experienced
this
this
yet,
yet
but
but
one
one
of
of
the
the
most
most
painful
painful
aspects
aspects
of
of
the
the
job
job
can
can
be
be
bundling
bundling
your
your
code.
code
When
when
building
building
a
a
web
web
application,
application
you
you
need
need
to
to
target
target
multiple
multiple
browsers,
browsers
And
and
on
on
top
top
of
of
that,
that
you
you
want
want
to
to
keep
keep
the
the
JavaScript
javascript
bundle
bundle
size
size
as
as
small
small
as
as
possible.
possible
Doing
doing
this
this
from
from
scratch
scratch
in
in
a
a
complex
complex
application
application
is
is
a
a
major
major
pain,
pain
but
but
not
not
with
with
Angular.
angular
Click
click
the
the
build
build
command
command
and
and
see
see
what
what
happens.
happens
Angular
angular
will
will
automatically
automatically
minify
minify
and
and
bundle
bundle
your
your
code,
code
and
and
will
will
also
also
generate
generate
multiple
multiple
bundles
bundles
for
for
differential
differential
loading.
loading
This
this
means
means
the
the
browser
browser
will
will
always
always
load
load
the
the
smallest
smallest
JavaScript
javascript
bundle
bundle
possible
possible
based
based
on
on
the
the
features
features
available
available
in
in
that
that
browser.
browser
And
and
we
we
can
can
see
see
all
all
that
that
raw
raw
JavaScript
javascript
code
code
by
by
going
going
into
into
the
the
dist
dist
folder.
folder
And
and
this
this
is
is
the
the
folder
folder
that
that
we
we
would
would
actually
actually
deploy
deploy
to
to
a
a
production
production
hosting
hosting
account
account
or
or
server.
server
Now
now
let's
let's
take
take
a
a
look
look
at
at
some
some
of
of
the
the
files
files
in
in
this
this
initial
initial
application.
application
We
we
have
have
a
a
few
few
TS
ts
config
config
files
files
here,
here
which
which
were
were
automatically
automatically
generated
generated
and
and
set
set
up
up
for
for
this
this
project.
project
Angular
angular
was
was
really
really
the
the
first
first
major
major
framework
framework
to
to
encourage
encourage
the
the
use
use
of
of
TypeScript,
typescript
and
and
you
you
now
now
see
see
it
it
as
as
almost
almost
a
a
standard
standard
on
on
large
large
complex
complex
projects.
projects
Open
open
your
your
eyes.
eyes
Now,
now
the
the
default
default
Angular
angular
app
app
also
also
comes
comes
with
with
testing
testing
using
using
Karma
karma
and
and
Jasmine,
jasmine
but
but
there
there
are
are
other
other
schematics
schematics
or
or
other
other
extensions
extensions
for
for
the
the
CLI
cli
you
you
can
can
use
use
for
for
other
other
testing
testing
frameworks
frameworks
place
place
like
like
Jest
jest
and
and
Cypress.
cypress
And
and
that's
that's
just
just
another
another
thing
thing
that
that
Angular
angular
does
does
out
out
of
of
the
the
box.
box
It
it
sets
sets
up
up
your
your
testing
testing
utilities
utilities
so
so
you
you
don't
don't
have
have
to
to
think
think
about
about
configuring
configuring
them.
them
But
but
what
what
good
good
is
is
any
any
of
of
this
this
if
if
the
the
framework
framework
doesn't
doesn't
actually
actually
help
help
us
us
build
build
a
a
front
front
end
end
UI?
ui
Because
because
Angular
angular
at
at
its
its
core
core
is
is
very
very
similar
similar
to
to
other
other
UI
ui
frameworks
frameworks
place
place
like
like
React,
react
Svelte,
svelte
and
and
Vue,
vue
just
just
to
to
name
name
a
a
few.
few
You'll
you'll
find
find
these
these
same
same
concepts
concepts
in
in
Angular
angular
that
that
you
you
find
find
in
in
these
these
frameworks.
frameworks
Component
component
based
based
UI
ui
architecture,
architecture
where
where
you
you
can
can
pass
pass
properties
properties
or
or
data
data
from
from
one
one
component
component
to
to
another.
another
The
the
place
place
where
where
we
we
write
write
our
our
actual
actual
UI
ui
code
code
is
is
in
in
the
the
source
source
app
app
directory.
directory
By
by
default,
default
Angular
angular
generates
generates
an
an
App
app
component,
component
which
which
is
is
essentially
essentially
the
the
entry
entry
point
point
into
into
the
the
app.
app
We
we
can
can
see
see
how
how
this
this
works
works
by
by
opening
opening
up
up
the
the
index
index
HTML
html
file,
file
which
which
is
is
just
just
plain
plain
HTML.
html
The
the
special
special
thing
thing
is
is
that
that
we
we
have
have
this
this
app
app
root
root
element
element
in
in
the
the
body.
body
This
this
element
element
will
will
be
be
replaced
replaced
with
with
our
our
actual
actual
Angular
angular
JavaScript
javascript
application.
application
And
and
that
that
initial
initial
parsing
parsing
of
of
the
the
JavaScript
javascript
is
is
called
called
bootstrapping.
bootstrapping
But
but
the
the
main
main
thing
thing
you'll
you'll
be
be
doing
doing
in
in
Angular
angular
is
is
creating
creating
a
a
UI
ui
by
by
building
building
and
and
composing
composing
components
components
together.
together
And
and
there
there
are
are
3
3
main
main
pieces
pieces
to
to
any
any
component.
component
The
the
component
component
TypeScript
typescript
is
is
where
where
you
you
define
define
your
your
custom
custom
JavaScript
javascript
logic,
logic
and
and
also
also
define
define
the
the
internal
internal
state
state
of
of
the
the
component.
component
Then
then
you
you
have
have
your
your
HTML,
html
which
which
contains
contains
the
the
actual
actual
visual
visual
UI
ui
and
and
allows
allows
you
you
to
to
bind
bind
data
data
from
from
the
the
TypeScript
typescript
to
to
that
that
template.
template
And
and
lastly,
lastly
you
you
have
have
a
a
stylesheet,
stylesheet
which
which
is
is
scoped
scoped
to
to
that
that
component,
component
meaning
meaning
these
these
styles
styles
won't
won't
bleed
bleed
out
out
to
to
other
other
components.
components
Let's
let's
go
go
into
into
the
the
app
app
component
component
HTML
html
first,
first
and
and
delete
delete
all
all
of
of
the
the
boilerplate
boilerplate
code
code
in
in
there,
there
leaving
leaving
only
only
the
the
router
router
outlet.
outlet
Angular
angular
provides
provides
a
a
very
very
powerful
powerful
router
router
out
out
of
of
the
the
box,
box
which
which
allows
allows
you
you
to
to
map
map
components
components
to
to
URLs
urls
in
in
the
the
browser.
browser
And
and
the
the
router
router
can
can
even
even
help
help
you
you
do
do
something
something
called
called
code
code
splitting
splitting
with
with
Webpack
webpack
to
to
lazy
lazy
load
load
certain
certain
parts
parts
of
of
your
your
JavaScript
javascript
bundle.
bundle
We're
we're
not
not
going
going
to
to
cover
cover
it
it
in
in
this
this
video,
video
but
but
just
just
know
know
that
that
it's
it's
a
a
relatively
relatively
complex
complex
thing
thing
that
that
Angular
angular
makes
makes
trivial.
trivial
Now
now
from
from
this
this
point,
point
I
i
want
want
to
to
build
build
something
something
meaningful.
meaningful
So
so
let's
let's
build
build
a
a
little
little
game
game
of
of
tic
tic
tac
tac
toe.
toe
The
the
idea
idea
itself
itself
is
is
inspired
inspired
by
by
the
the
React
react
tutorial,
tutorial
and
and
it
it
provides
provides
a
a
good
good
baseline
baseline
for
for
understanding
understanding
the
the
mechanics
mechanics
of
of
the
the
framework.
framework
We'll
we'll
start
start
by
by
building
building
a
a
bare
bare
bones
bones
game,
game
then
then
we'll
we'll
add
add
a
a
design
design
system,
system
and
and
lastly,
lastly
we
we
will
will
deploy
deploy
it
it
as
as
a
a
PWA.
pwa
So
so
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
generate
generate
a
a
component
component
to
to
represent
represent
an
an
individual
individual
square.
square
We'll
we'll
find
find
the
the
generate
generate
command
command
with
with
the
the
Angular
angular
console.
console
We'll
we'll
generate
generate
a
a
component
component
and
and
give
give
it
it
a
a
name
name
of
of
Square.
square
And
and
a
a
lot
lot
of
of
times
times
in
in
Angular,
angular
you
you
might
might
not
not
need
need
to
to
have
have
your
your
component
component
separated
separated
into
into
3
3
different
different
files.
files
So
so
when
when
running
running
this
this
command
command
from
from
the
the
Angular
angular
console,
console
we'll
we'll
actually
actually
select
select
the
the
options
options
for
for
inline
inline
template
template
and
and
inline
inline
styles.
styles
You'll
you'll
see
see
this
this
created
created
a
a
Square
square
directory
directory
along
along
with
with
a
a
Square
square
component
component
inside.
inside
If
if
we
we
open
open
up
up
the
the
component,
component
you'll
you'll
see
see
that
that
we're
we're
importing
importing
component
component
and
and
OnInit
oninit
from
from
Angular
angular
core.
core
On
on
init
init
is
is
what's
what's
known
known
as
as
a
a
life
life
cycle
cycle
hook,
hook
which
which
allows
allows
you
you
to
to
run
run
some
some
code
code
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
It's
it's
not
not
required
required
for
for
this
this
component,
component
so
so
I'm
i'm
going
going
to
to
go
go
ahead
ahead
and
and
delete
delete
the
the
references
references
to
to
it,
it
and
and
what
what
we're
we're
left
left
with
with
here
here
is
is
just
just
a
a
plain
plain
Angular
angular
component.
component
Every
every
component
component
starts
starts
with
with
a
a
component
component
decorator,
decorator
and
and
decorators
decorators
are
are
these
these
things
things
that
that
start
start
with
with
an
an
at
at
symbol.
symbol
And
and
you
you
can
can
watch
watch
my
my
full
full
video
video
on
on
TypeScript
typescript
decorators
decorators
if
if
you're
you're
curious
curious
to
to
learn
learn
how
how
they
they
work.
work
P
p
but
but
in
in
the
the
case
case
of
of
Angular,
angular
they
they
allow
allow
us
us
to
to
pass
pass
in
in
an
an
object
object
that
that
configures
configures
the
the
way
way
this
this
component
component
behaves.
behaves
First,
first
you'll
you'll
notice
notice
the
the
selector
selector
option.
option
One.
one
This
this
is
is
the
the
name
name
of
of
the
the
component
component
as
as
it
it
will
will
be
be
declared
declared
or
or
used
used
in
in
the
the
HTML.
html
Let's
let's
go
go
ahead
ahead
and
and
open
open
the
the
app
app
component
component
to
to
see
see
how
how
that
that
works.
works
If
if
we
we
start
start
typing
typing
App
app
Square,
square
it
it
should
should
autocomplete
autocomplete
in
in
Versus
versus
Code,
code
and
and
then
then
we
we
can
can
hit
hit
tab
tab
to
to
complete
complete
it.
it
And
and
then
then
if
if
we're
we're
still
still
serving
serving
the
the
app,
app
We
we
should
should
see
see
the
the
content
content
of
of
that
that
component
component
in
in
the
the
web
web
page.
page
The
the
next
next
thing
thing
you'll
you'll
notice
notice
is
is
the
the
template.
template
Angular
angular
provides
provides
a
a
special
special
templating
templating
language
language
that
that
empowers
empowers
your
your
HTML
html
with
with
JavaScript
javascript
like
like
logic.
logic
You
you
can
can
use
use
conditional
conditional
expressions,
expressions
loops,
loops
and
and
bind
bind
data
data
directly
directly
to
to
the
the
HTML
html
to
to
write
write
templates
templates
that
that
are
are
expressive
expressive
and
and
easy
easy
to
to
understand,
understand
and
and
also
also
highly
highly
performant
performant
when
when
it
it
comes
comes
to
to
reacting
reacting
to
to
data
data
changes
changes
within
within
the
the
app.
app
And
and
that's
that's
why
why
declarative
declarative
UI
ui
frameworks
frameworks
like
like
React,
react
Angular,
angular
etcetera
etcetera
are
are
so
so
popular.
popular
And
and
make
make
it
it
easy
easy
for
for
you
you
as
as
a
a
developer
developer
to
to
keep
keep
your
your
app
app
data
data
in
in
sync
sync
with
with
the
the
actual
actual
UI
ui
how
how
it
it
appears
appears
visually
visually
for
for
the
the
end
end
user.
user
In
in
Angular,
angular
we
we
can
can
bind
bind
data
data
to
to
a
a
template
template
by
by
simply
simply
adding
adding
it
it
as
as
a
a
property
property
to
to
the
the
component
component
class.
class
Just
just
to
to
demonstrate
demonstrate
this,
this
I'll
i'll
add
add
a
a
random
random
number,
number
and
and
then
then
I
i
can
can
interpolate
interpolate
it
it
in
in
the
the
template
template
by
by
using
using
double
double
braces.
braces
And
and
now
now
we
we
should
should
see
see
the
the
random
random
number
number
in
in
the
the
screen.
screen
Under
under
the
the
hood,
hood
Angular
angular
is
is
doing
doing
a
a
thing
thing
called
called
change
change
detection,
detection
where
where
where
where
it's
it's
looking
looking
for
for
changes
changes
to
to
these
these
properties
properties
and
and
then
then
updating
updating
the
the
UI
ui
in
in
a
a
highly
highly
performant
performant
way.
way
And
and
all
all
we
we
have
have
to
to
do
do
from
from
a
a
development
development
perspective
perspective
is
is
change
change
the
the
value
value
of
of
the
the
property.
property
For
for
For
for
example,
example
if
if
we
we
set
set
up
up
an
an
interval
interval
here
here
and
and
change
change
the
the
random
random
number
number
to
to
a
a
different
different
random
random
number,
number
you'll
you'll
see
see
it's
it's
updated
updated
in
in
the
the
screen
screen
every
every
500
500
milliseconds.
milliseconds
So
so
when
when
you
you
set
set
a
a
property
property
on
on
a
a
component
component
class,
class
that's
that's
like
like
setting
setting
its
its
internal
internal
state.
state
But
but
in
in
many
many
cases,
cases
you
you
want
want
to
to
pass
pass
in
in
the
the
property
property
from
from
a
a
parent
parent
component,
component
and
and
that's
that's
exactly
exactly
what
what
we
we
want
want
for
for
the
the
square.
square
We
we
can
can
allow
allow
properties
properties
to
to
be
be
input
input
into
into
this
this
component
component
by
by
using
using
the
the
input
input
decorator.
decorator
If
if
we
we
start
start
typing
typing
input
input
and
and
then
then
tab,
tab
it
it
will
will
automatically
automatically
import
import
this
this
decorator
decorator
for
for
us.
us
And
and
then
then
we
we
can
can
set
set
the
the
property
property
name
name
to
to
value,
value
and
and
we
we
could
could
even
even
use
use
TypeScript
typescript
here
here
to
to
limit
limit
this
this
value
value
to
to
a
a
certain
certain
subset
subset
of
of
string
string
values
values
or
or
some
some
other
other
type
type
if
if
we
we
wanted
wanted
to.
to
And
and
now
now
we
we
can
can
go
go
back
back
up
up
to
to
our
our
component
component
declaration
declaration
in
in
the
the
App
app
component,
component
and
and
now
now
we
we
can
can
input
input
this
this
value
value
from
from
the
the
parent
parent
component,
component
which
which
can
can
be
be
just
just
a
a
string
string
value.
value
Or
or
if
if
we
we
wrap
wrap
value
value
in
in
brackets,
brackets
it
it
will
will
take
take
an
an
actual
actual
expression
expression
or
or
dynamic
dynamic
value
value
from
from
this
this
parent
parent
component.
component
And
and
that
that
means
means
you
you
can
can
pass
pass
a
a
complex
complex
object
object
from
from
parent
parent
to
to
child.
child
Now
now
if
if
we
we
look
look
at
at
our
our
Square
square
component,
component
it
it
only
only
has
has
a
a
single
single
input.
input
There's
there's
nothing
nothing
in
in
this
this
component
component
that
that
allows
allows
it
it
to
to
modify
modify
its
its
own
own
state.
state
It
it
all
all
comes
comes
from
from
the
the
parent.
parent
So
so
we
we
generally
generally
call
call
this
this
a
a
UI
ui
component
component
or
or
a
a
dump
dump
component.
component
Dump
dump
components
components
are
are
a
a
good
good
thing.
thing
They're
they're
easy
easy
to
to
test
test
and
and
they're
they're
only
only
concerned
concerned
about
about
the
the
UI,
ui
so
so
there's
there's
not
not
much
much
to
to
worry
worry
about
about
in
in
terms
terms
of
of
bugs
bugs
and
and
things
things
like
like
that.
that
But
but
in
in
order
order
to
to
build
build
a
a
tic
tic
tac
tac
toe
toe
game,
game
we'll
we'll
need
need
some
some
kind
kind
of
of
smart
smart
component
component
to
to
manage
manage
the
the
state
state
or
or
the
the
data
data
between
between
the
the
various
various
for
for
Squares.
squares
Let's
let's
go
go
ahead
ahead
and
and
generate
generate
that
that
component.
component
We'll
we'll
call
call
it
it
Board
board
and
and
just
just
stick
stick
with
with
the
the
default
default
options.
options
Now
now
our
our
Board
board
component
component
will
will
be
be
our
our
Smart
smart
component,
component
meaning
meaning
it
it
has
has
internal
internal
state
state
that
that
can
can
change.
change
We
we
have
have
the
the
Squares
squares
property
property
which
which
represents
represents
the
the
9
9
moves
moves
on
on
the
the
game
game
board
board
which
which
will
will
be
be
an
an
array
array
of
of
Strings.
strings
And
and
then
then
we
we
have
have
a
a
property
property
called
called
x
x
is
is
next
next
which
which
is
is
a
a
boolean
boolean
to
to
help
help
us
us
determine
determine
the
the
current
current
player.
player
And
and
then
then
we
we
have
have
the
the
winner
winner
which
which
will
will
either
either
be
be
x
x
or
or
o.
o
Now
now
every
every
component
component
has
has
a
a
constructor
constructor
and
and
also
also
life
life
cycle
cycle
hooks.
hooks
The
the
constructor
constructor
runs
runs
immediately
immediately
when
when
this
this
class
class
is
is
created,
created
but
but
you
you
don't
don't
generally
generally
do
do
anything
anything
in
in
the
the
constructor
constructor
better
better
aside
aside
from
from
inject
inject
your
your
dependencies,
dependencies
which
which
we'll
we'll
look
look
at
at
in
in
a
a
future
future
video.
video
If
if
you
you
have
have
initial
initial
setup
setup
work
work
that
that
needs
needs
to
to
be
be
done
done
in
in
a
a
component,
component
You'll
you'll
use
use
the
the
NG
ng
on
on
init
init
lifecycle
lifecycle
hook
hook
in
in
most
most
cases.
cases
In
in
our
our
case,
case
we'll
we'll
write
write
a
a
method
method
on
on
this
this
component
component
called
called
newGame
newgame
and
and
its
its
responsibility
responsibility
is
is
to
to
set
set
up
up
the
the
initial
initial
values
values
when
when
starting
starting
a
a
brand
brand
new
new
game.
game
For
for
our
our
squares
squares
property,
property
we'll
we'll
create
create
an
an
array
array
with
with
9
9
elements
elements
in
in
it,
it
and
and
then
then
we'll
we'll
fill
fill
them
them
with
with
null
null
values
values
initially.
initially
When
when
a
a
user
user
clicks
clicks
on
on
a
a
square,
square
these
these
values
values
will
will
be
be
spliced
spliced
with
with
either
either
an
an
x
x
or
or
an
an
o.
o
We'll
we'll
set
set
the
the
winner
winner
to
to
null
null
and
and
x
x
is
is
next
next
to
to
true.
true
Now
now
when
when
working
working
with
with
data
data
on
on
a
a
component,
component
you
you
may
may
want
want
to
to
compute
compute
a
a
property
property
based
based
on
on
one
one
of
of
the
the
main
main
pieces
pieces
of
of
data
data
that
that
changes.
changes
In
in
our
our
case,
case
x
x
is
is
next
next
determines
determines
which
which
player
player
is
is
currently
currently
using
using
the
the
game
game
board.
board
That's
that's
a
a
boolean
boolean
value,
value
but
but
we'd
we'd
also
also
like
like
to
to
show
show
the
the
name
name
of
of
the
the
player
player
as
as
a
a
string,
string
which
which
would
would
be
be
x
x
or
or
o.
o
So
so
we
we
can
can
create
create
a
a
computed
computed
property
property
by
by
using
using
a
a
TypeScript
typescript
getter.
getter
We'll
we'll
go
go
ahead
ahead
and
and
call
call
this
this
property
property
player.
player
And
and
if
if
x
x
is
is
next
next
is
is
true,
true
then
then
the
the
next
next
player
player
will
will
be
be
x.
x
Otherwise,
otherwise
it
it
will
will
be
be
o.
o
Now
now
anytime
anytime
the
the
x's
x's
next
next
value
value
changes,
changes
this
this
computed
computed
property
property
will
will
be
be
changed
changed
and
and
reflected
reflected
in
in
the
the
UI
ui
as
as
well.
well
Now
now
the
the
next
next
thing
thing
we'll
we'll
do
do
in
in
this
this
component
component
is
is
define
define
a
a
method
method
which
which
will
will
serve
serve
as
as
an
an
event
event
handler
handler
for
for
when
when
the
the
user
user
clicks
clicks
on
on
one
one
of
of
the
the
buttons
buttons
to
to
make
make
a
a
move.
move
When
when
that
that
click
click
event
event
happens,
happens
we'll
we'll
check
check
the
the
index
index
in
in
the
the
array
array
that
that
they
they
clicked
clicked
on.
on
If
if
that
that
square
square
has
has
already
already
been
been
clicked,
clicked
then
then
we
we
won't
won't
do
do
anything.
anything
But
but
if
if
it's
it's
empty
empty
or
or
null,
null
and
and
we'll
we'll
splice
splice
in
in
the
the
index
index
of
of
the
the
square
square
the
the
user
user
clicked
clicked
on
on
with
with
the
the
current
current
player
player
that
that
we've
we've
computed
computed
in
in
this
this
component.
component
And
and
then
then
we'll
we'll
also
also
toggle
toggle
the
the
x's
x's
next
next
boolean
boolean
to
to
its
its
bit
bit
value
value
by
by
using
using
an
an
exclamation
exclamation
mark.
mark
Then
then
the
the
last
last
thing
thing
I'll
i'll
do
do
is
is
write
write
a
a
method
method
called
called
calculate
calculate
winner.
winner
This
this
code
code
mostly
mostly
comes
comes
from
from
the
the
React
react
tutorial
tutorial
and
and
it's
it's
basically
basically
just
just
an
an
algorithm
algorithm
that
that
determines
determines
if
if
the
the
user
user
has
has
won
won
the
the
tic
tic
tac
tac
toe
toe
game.
game
I'm
i'm
not
not
going
going
to
to
spend
spend
time
time
explaining
explaining
the
the
exact
exact
implementation
implementation
details,
details
but
but
feel
feel
free
free
to
to
copy
copy
the
the
source
source
code
code
from
from
the
the
GitHub
github
link
link
in
in
the
the
video
video
description.
description
So
so
now
now
let's
let's
head
head
into
into
the
the
HTML
html
template
template
to
to
see
see
how
how
we
we
can
can
bind
bind
the
the
data
data
properties
properties
we
we
define
define
on
on
component
component
class
class
to
to
our
our
actual
actual
UI.
ui
We'll
we'll
want
want
to
to
show
show
the
the
name
name
of
of
the
the
current
current
player,
player
show
show
the
the
winner
winner
if
if
the
the
winner
winner
exists,
exists
and
and
then
then
also
also
loop
loop
over
over
the
the
array
array
of
of
for
for
squares
squares
so
so
the
the
user
user
has
has
something
something
to
to
click
click
on.
on
The
the
player
player
property
property
that
that
we
we
defined
defined
with
with
a
a
getter
getter
behaves
behaves
just
just
like
like
any
any
other
other
property.
property
We
we
can
can
simply
simply
use
use
it
it
with
with
the
the
handlebar
handlebar
syntax
syntax
to
to
interpolate
interpolate
it
it
in
in
the
the
template.
template
Now
now
the
the
other
other
thing
thing
that
that
you'll
you'll
commonly
commonly
do
do
in
in
a
a
web
web
application
application
is
is
handle
handle
events.
events
And
and
in
in
Angular,
angular
we
we
can
can
bind
bind
to
to
events
events
by
by
using
using
parentheses.
parentheses
And
and
you'll
you'll
notice
notice
that
that
when
when
we
we
do
do
that,
that
Angular's
angular's
tooling
tooling
will
will
automatically
automatically
give
give
us
us
a
a
list
list
of
of
all
all
the
the
possible
possible
events
events
to
to
add
add
here.
here
And
and
then
then
we
we
bind
bind
a
a
handler
handler
to
to
this
this
event,
event
which
which
Versus
versus
Code
code
will
will
also
also
autocomplete.
autocomplete
So
so
in
in
Angular,
angular
you
you
get
get
amazing
amazing
tooling
tooling
both
both
in
in
the
the
TypeScript
typescript
and
and
also
also
in
in
your
your
templates.
templates
Now,
now
for
for
this
this
tic
tic
tac
tac
toe
toe
game,
game
if
if
we
we
have
have
a
a
winner,
winner
we
we
want
want
to
to
display
display
a
a
conditional
conditional
template
template
only
only
when
when
that
that
winner
winner
exists
exists
and
and
we
we
can
can
make
make
that
that
happen
happen
with
with
what's
what's
called
called
a
a
structural
structural
directive.
directive
If
if
you
you
type
type
in
in
star,
star
you'll
you'll
see
see
the
the
different
different
structural
structural
directives
directives
at
at
your
your
disposal.
disposal
But
but
the
the
most
most
common
common
one
one
is
is
n
n
g
g
f,
f
and
and
it
it
allows
allows
you
you
to
to
only
only
render
render
the
the
HTML
html
that
that
it's
it's
bound
bound
to
to
if
if
the
the
value
value
on
on
the
the
right
right
side
side
evaluates
evaluates
to
to
true,
true
or
or
it
it
can
can
be
be
coerced
coerced
to
to
a
a
truthy
truthy
value
value
to
to
be
be
more
more
precise.
precise
And
and
so
so
when
when
the
the
winner
winner
is
is
present,
present
then
then
this
this
h
h
two
two
element
element
will
will
be
be
rendered
rendered
in
in
the
the
DOM.
dom
Now
now
the
the
final
final
step
step
is
is
to
to
put
put
together
together
the
the
actual
actual
squares
squares
that
that
represent
represent
the
the
game
game
board.
board
Another
another
common
common
structural
structural
directive
directive
in
in
Angular
angular
is
is
ng
ng
4.
4
So
so
first,
first
we'll
we'll
declare
declare
our
our
App
app
Square
square
component,
component
then
then
we'll
we'll
add
add
ng
ng
4
4
to
to
render
render
this
this
component
component
multiple
multiple
times
times
based
based
on
on
the
the
array
array
of
of
squares.
squares
Inside
inside
of
of
ng
ng
4,
4
we
we
say
say
let
let
val,
val
which
which
creates
creates
a
a
template
template
variable
variable
named
named
file
file
that
that
we
we
can
can
now
now
use
use
in
in
this
this
template.
template
And
and
if
if
we
we
also
also
want
want
access
access
to
to
the
the
index,
index
we
we
can
can
set
set
a
a
template
template
variable
variable
of
of
I
i
equal
equal
to
to
the
the
index.
index
And
and
now
now
we
we
can
can
put
put
these
these
variables
variables
to
to
use.
use
The
the
first
first
thing
thing
we'll
we'll
want
want
to
to
do
do
is
is
pass
pass
the
the
value
value
down
down
to
to
the
the
child
child
App
app
Square
square
component
component
and
and
it
it
can
can
use
use
that
that
value
value
to
to
render
render
an
an
x
x
or
or
an
an
o
o
in
in
the
the
button.
button
And
and
we'll
we'll
also
also
bind
bind
to
to
the
the
click
click
event
event
to
to
make
make
a
a
move
move
on
on
that
that
index
index
when
when
the
the
user
user
clicks
clicks
on
on
the
the
square.
square
Now
now
that
that
takes
takes
care
care
of
of
our
our
template
template
logic,
logic
but
but
there's
there's
one
one
thing
thing
that's
that's
missing
missing
and
and
that
that
is
is
our
our
CSS
css
styling
styling
to
to
give
give
us
us
a
a
3
3
by
by
3
3
grid.
grid
CSS
css
Grid
grid
makes
makes
this
this
very
very
easy.
easy
We
we
just
just
set
set
up
up
our
our
main
main
element
element
to
to
display
display
grid
grid
and
and
then
then
we'll
we'll
display
display
the
the
columns
columns
at
at
200
200
pixels
pixels
each.
each
At
at
this
this
point,
point
you
you
can
can
serve
serve
the
the
application,
application
and
and
you
you
should
should
now
now
be
be
able
able
to
to
play
play
a
a
game
game
of
of
tic
tic
tac
tac
toe.
toe
But
but
we
we
have
have
one
one
major
major
problem
problem
at
at
this
this
point.
point
The
the
app
app
looks
looks
horrible.
horrible
So
so
So
so
what
what
we'd
we'd
like
like
to
to
do
do
is
is
add
add
some
some
global
global
styling,
styling
like
like
a
a
design
design
system,
system
to
to
give
give
us
us
a
a
consistent
consistent
UI
ui
that
that
looks
looks
great.
great
But
but
usually
usually
setting
setting
up
up
something
something
like
like
that
that
is
is
pretty
pretty
involved.
involved
But
but
fortunately,
fortunately
the
the
Angular
angular
ecosystem
ecosystem
has
has
a
a
variety
variety
of
of
third
third
party
party
component
component
libraries
libraries
that
that
we
we
can
can
easily
easily
add
add
to
to
this
this
project
project
with
with
a
a
single
single
command.
command
And
and
that
that
means
means
our
our
app
app
can
can
look
look
great
great
right
right
out
out
of
of
the
the
gate
gate
without
without
any
any
decision
decision
making
making
or
or
configuration
configuration
on
on
our
our
part.
part
There
there
are
are
plenty
plenty
of
of
great
great
options
options
to
to
choose
choose
from
from
like
like
Angular
angular
Material,
material
Ionic,
ionic
and
and
others,
others
but
but
today
today
we're
we're
going
going
to
to
go
go
with
with
Nebula.
nebula
Not
not
only
only
do
do
the
the
default
default
components
components
look
look
great,
great
but
but
they
they
also
also
just
just
released
released
a
a
new
new
feature
feature
called
called
UIBakery,
uibakery
and
and
it's
it's
a
a
tool
tool
that
that
allows
allows
you
you
to
to
visually
visually
create
create
components
components
and
and
then
then
download
download
Angular
angular
code.
code
Expect
expect
a
a
video
video
on
on
this
this
topic
topic
in
in
the
the
near
near
future.
future
For
for
right
right
now,
now
we'll
we'll
go
go
pet
pet
and
and
add
add
Nebula
nebula
to
to
this
this
project
project
by
by
using
using
the
the
ng
ng
add
add
command.
command
If
if
we
we
run
run
ng
ng
add
add
at
at
nebulartheme,
nebulartheme
it
it
will
will
automatically
automatically
install
install
and
and
configure
configure
Nebula
nebula
in
in
our
our
project.
project
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
choose
choose
the
the
Cosmic
cosmic
theme
theme
because
because
that
that
sounds
sounds
cool
cool
and
and
we'll
we'll
also
also
say
say
yes
yes
to
to
customization
customization
and
and
animation.
animation
You'll
you'll
notice
notice
a
a
few
few
key
key
changes
changes
to
to
the
the
project.
project
We
we
now
now
have
have
a
a
Themes.
themes
Scss
scss
file
file
which
which
we
we
can
can
use
use
to
to
customize
customize
the
the
variables
variables
used
used
in
in
the
the
theme.
theme
And
and
then
then
we
we
can
can
go
go
into
into
the
the
app
app
module
module
and
and
we'll
we'll
see
see
that
that
we
we
have
have
a
a
few
few
ng
ng
modules
modules
ported
ported
here.
here
We're
we're
not
not
going
going
to
to
talk
talk
about
about
ng
ng
modules
modules
in
in
this
this
video,
video
but
but
they
they
are
are
discussed
discussed
in
in
detail
detail
in
in
the
the
full
full
course.
course
Basically,
basically
they're
they're
just
just
a
a
mechanism
mechanism
that
that
makes
makes
it
it
possible
possible
to
to
use
use
Angular
angular
in
in
a
a
progressive
progressive
way,
way
or
or
in
in
other
other
words,
words
only
only
use
use
the
the
parts
parts
of
of
the
the
framework
framework
that
that
you
you
actually
actually
need.
need
In
in
our
our
case,
case
we'll
we'll
go
go
ahead
ahead
and
and
import
import
the
the
nebularButton
nebularbutton
module
module
because
because
that's
that's
the
the
only
only
Nebula
nebula
component
component
that
that
we
we
want
want
to
to
use
use
so
so
we
we
don't
don't
have
have
to
to
package
package
the
the
entire
entire
thing
thing
which
which
would
would
increase
increase
our
our
bundle
bundle
size
size
and
and
decrease
decrease
performance.
performance
And
and
also,
also
if
if
we
we
go
go
into
into
the
the
App
app
component,
component
you'll
you'll
see
see
that
that
we
we
now
now
have
have
a
a
bunch
bunch
of
of
components
components
that
that
are
are
prefixed
prefixed
by
by
nb
nb
for
for
nebular.
nebular
And
and
already
already
the
the
UI
ui
is
is
looking
looking
a
a
lot
lot
more
more
interesting.
interesting
But
but
one
one
obvious
obvious
way
way
we
we
can
can
improve
improve
this
this
is
is
to
to
change
change
the
the
styling
styling
of
of
an
an
individual
individual
square
square
based
based
on
on
its
its
state.
state
If
if
we
we
go
go
back
back
into
into
our
our
Square
square
component,
component
we
we
now
now
have
have
access
access
to
to
the
the
n
n
b
b
button
button
directive.
directive
With
with
this
this
directive,
directive
you
you
can
can
apply
apply
the
the
nebular
nebular
button
button
theme
theme
and
and
behaviors
behaviors
to
to
any
any
HTML
html
element.
element
Using
using
the
the
directive
directive
as
as
is
is
will
will
give
give
you
you
the
the
default
default
nebular
nebular
button,
button
which
which
we'll
we'll
go
go
ahead
ahead
and
and
do
do
when
when
the
the
value
value
is
is
null
null
or
or
when
when
the
the
square
square
has
has
not
not
been
been
selected.
selected
Then
then
Then
then
we'll
we'll
go
go
ahead
ahead
and
and
set
set
up
up
a
a
couple
couple
of
of
additional
additional
buttons
buttons
as
as
well,
well
and
and
these
these
buttons
buttons
will
will
take
take
additional
additional
properties
properties
on
on
the
the
n
n
b
b
button
button
directive.
directive
And
and
the
the
design
design
system
system
provides
provides
a
a
lot
lot
of
of
different
different
ways
ways
to
to
customize
customize
the
the
button
button
right
right
out
out
of
of
the
the
box.
box
For
for
example,
example
we'll
we'll
use
use
this
this
hero
hero
button
button
which
which
gives
gives
it
it
a
a
nice
nice
little
little
gradient,
gradient
but
but
check
check
out
out
the
the
component
component
library
library
in
in
the
the
docs
docs
for
for
a
a
full
full
set
set
of
of
examples.
examples
P.
p
Then
then
we'll
we'll
conditionally
conditionally
render
render
each
each
button
button
depending
depending
on
on
whether
whether
or
or
not
not
the
the
value
value
is
is
x
x
or
or
o
o
using
using
the
the
ng
ng
if
if
directive.
directive
Now
now
I
i
realize
realize
I'm
i'm
going
going
through
through
this
this
code
code
very
very
fast,
fast
but
but
again
again
make
make
sure
sure
to
to
reference
reference
the
the
link
link
to
to
GitHub
github
in
in
the
the
video
video
description
description
to
to
find
find
the
the
full
full
project
project
source
source
code.
code
And
and
one
one
last
last
thing
thing
I'll
i'll
do
do
is
is
also
also
go
go
into
into
the
the
Board
board
component,
component
and
and
for
for
the
the
Start
start
New
new
Game
game
button,
button
we'll
we'll
go
go
ahead
ahead
and
and
display
display
an
an
outline
outline
button
button
there.
there
And
and
with
with
just
just
a
a
few
few
minor
minor
changes,
changes
we
we
now
now
have
have
a
a
much
much
better
better
looking
looking
game
game
of
of
tic
tic
tac
tac
toe.
toe
So
so
this
this
kind
kind
of
of
highlights
highlights
my
my
favorite
favorite
thing
thing
about
about
Angular
angular
and
and
that
that
is
is
getting
getting
things
things
done
done
quickly.
quickly
The
the
tooling
tooling
truly
truly
is
is
amazing
amazing
and
and
there's
there's
a
a
lot
lot
less
less
configuration
configuration
required
required
to
to
get
get
to
to
something
something
meaningful.
meaningful
But
but
there's
there's
still
still
one
one
more
more
thing
thing
I
i
promised
promised
you
you
and
and
that's
that's
to
to
make
make
this
this
a
a
progressive
progressive
web
web
app
app
that
that
can
can
be
be
installed
installed
as
as
a
a
native
native
app.
app
And
and
believe
believe
it
it
or
or
not,
not
that's
that's
actually
actually
the
the
easiest
easiest
part
part
of
of
this
this
entire
entire
video.
video
Let's
let's
head
head
over
over
to
to
the
the
Angular
angular
console,
console
click
click
on
on
Add,
add
and
and
then
then
you'll
you'll
see
see
a
a
full
full
list
list
of
of
the
the
different
different
schematics
schematics
that
that
are
are
available
available
to
to
you.
you
The
the
one
one
we're
we're
interested
interested
in
in
is
is
at
at
angular/pwa.
angular/pwa
When
when
you
you
run
run
this
this
command,
command
it
it
does
does
several
several
important
important
things
things
related
related
to
to
PWAs.
pwas
The
the
first
first
thing
thing
it
it
does
does
is
is
add
add
the
the
JavaScript
javascript
code
code
needed
needed
to
to
load
load
a
a
service
service
worker
worker
in
in
the
the
Angular
angular
app,
app
and
and
and
and
then
then
it
it
gives
gives
you
you
a
a
configuration
configuration
file
file
that
that
you
you
can
can
use
use
to
to
customize
customize
the
the
behavior
behavior
of
of
the
the
service
service
worker.
worker
And
and
the
the
worker
worker
is
is
there
there
primarily
primarily
to
to
make
make
your
your
app
app
work
work
offline,
offline
so
so
you
you
can
can
customize
customize
the
the
behavior
behavior
of
of
how
how
those
those
pages
pages
are
are
cached
cached
and
and
stored
stored
offline.
offline
And
and
then
then
you'll
you'll
also
also
notice
notice
that
that
it
it
adds
adds
a
a
manifest
manifest
file
file
and
and
some
some
icons
icons
for
for
the
the
actual
actual
install
install
button
button
for
for
the
the
app.
app
Now
now
in
in
order
order
to
to
determine
determine
if
if
we
we
have
have
a
a
valid
valid
progressive
progressive
web
web
app,
app
we
we
need
need
to
to
run
run
this
this
app
app
in
in
a
a
production
production
environment.
environment
So
so
the
the
first
first
step
step
in
in
that
that
process
process
is
is
to
to
run
run
ng
ng
build,
build
which
which
we
we
can
can
do
do
with
with
the
the
Angular
angular
console.
console
And
and
that
that
will
will
compile
compile
all
all
of
of
our
our
TypeScript
typescript
code
code
down
down
to
to
JavaScript
javascript
in
in
the
the
dist
dist
folder.
folder
There's
there's
just
just
one
one
thing
thing
missing
missing
and
and
that's
that's
an
an
actual
actual
place
place
to
to
deploy
deploy
our
our
code.
code
My
my
personal
personal
favorite
favorite
place
place
is
is
Firebase,
firebase
and
and
we
we
can
can
easily
easily
add
add
Firebase
firebase
to
to
an
an
Angular
angular
project
project
by
by
running
running
ng
ng
add
add
at
at
AngularFire.
angularfire
This
this
is
is
going
going
to
to
ask
ask
you
you
for
for
a
a
Firebase
firebase
project,
project
so
so
you'll
you'll
need
need
to
to
have
have
signed
signed
up
up
for
for
a
a
Firebase
firebase
account
account
if
if
you
you
don't
don't
have
have
one
one
already.
already
And
and
Firebase
firebase
Hosting
hosting
can
can
be
be
used
used
on
on
the
the
free
free
tier,
tier
by
by
the
the
way.
way
The
the
only
only
thing
thing
left
left
to
to
do
do
at
at
this
this
point
point
is
is
run
run
ng
ng
deploy.
deploy
That's
that's
going
going
to
to
automatically
automatically
deploy
deploy
our
our
production
production
app
app
to
to
the
the
Firebase
firebase
Hosting
hosting
account.
account
That
that
will
will
give
give
you
you
the
the
hosting
hosting
URL
url
when
when
it's
it's
finished,
finished
and
and
now
now
we
we
can
can
play
play
tic
tic
tac
tac
toe
toe
on
on
the
the
web.
web
But,
but
here's
here's
the
the
coolest
coolest
thing
thing
about
about
this.
this
If
if
we
we
go
go
to
to
the
the
Audits
audits
tab
tab
in
in
Chrome
chrome
Dev
dev
Tools,
tools
we
we
can
can
analyze
analyze
our
our
app
app
as
as
a
a
PWA,
pwa
and
and
you
you
can
can
see
see
we
we
hit
hit
the
the
green
green
check
check
marks
marks
on
on
everything.
everything
And
and
what
what
this
this
means
means
for
for
the
the
end
end
user
user
is
is
that
that
the
the
app
app
is
is
now
now
installable
installable
on
on
their
their
device
device
and
and
PWAs
pwas
are
are
supported
supported
pretty
pretty
much
much
everywhere
everywhere
now.
now
In
in
fact,
fact
we
we
can
can
even
even
install
install
it
it
on
on
Windows
windows
Desktop.
desktop
By
by
hitting
hitting
the
the
install
install
button
button
in
in
Chrome,
chrome
it
it
will
will
add
add
a
a
shortcut
shortcut
to
to
the
the
desktop
desktop
and
and
it
it
will
will
open
open
up
up
the
the
app
app
in
in
an
an
actual
actual
Windows
windows
window.
window
And
and
now
now
people
people
can
can
use
use
your
your
web
web
app
app
as
as
if
if
it
it
were
were
a
a
traditional
traditional
desktop
desktop
app.
app
And
and
the
the
same
same
goes
goes
for
for
mobile
mobile
apps
apps
as
as
well.
well
So
so
I'll
i'll
just
just
finish
finish
up
up
by
by
saying
saying
that
that
Angular
angular
is
is
a
a
really
really
awesome
awesome
tool
tool
when
when
you
you
know
know
how
how
to
to
use
use
it.
it
And
and
if
if
you
you
want
want
to
to
go
go
beyond
beyond
the
the
basics
basics
and
and
learn
learn
how
how
to
to
build
build
a
a
real
real
world
world
progressive
progressive
web
web
app,
app
consider
consider
becoming
becoming
a
a
Pro
pro
Member
member
at
at
Fireship
fireship
IO.
io
You'll
you'll
get
get
access
access
to
to
the
the
brand
brand
new
new
Angular
angular
8
8
course
course
and
and
a
a
whole
whole
bunch
bunch
of
of
other
other
pro
pro
content.
content
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The concept of Angular is used to build websites and applications, with the framework flexible and collaborative. It allows for code generation and bundling, including dynamic ones, and the creation of a front-end UI. The speaker explains the process of building an app component, including installing the Angular console, using the Angular console, and creating a winner in a playful game. The use of Angular for development, including binding to events, creating a conditional template, and customization button and colors for the game. The speaker also discusses the use of a third-party component library and responsive component, and explains the process of building a web app using the Angular console and Audits tab. Viewers are encouraged to become a Pro Member at Fireship IO.
Angular for Beginners - Let's build a Tic-Tac-Toe PWA
Welcome to my first ever Angular tutorial for beginners. If you've learned a little bit about JavaScript, HTML, and CSS, the next step is to make the world a better place by building an app that people can use. Today, we'll build a tic tac toe game from scratch, deploy it, and make it installable on desktop and mobile applications as a PWA. And, despite Angular's reputation as an enterprise grade framework, you might be very surprised at how easy it is to start being productive with Angular, even as a beginner. And you'll especially love it when you start building complex products in real life. If you're new here, like and subscribe, and if you want to get really deep into Angular, check out my new Angular course on FireShip. I build. First of all, what is Angular? Because the word Angular refers to so many different things. It's a declarative UI framework, a code bundler, a tool for building progressive web apps. It handles server side rendering, provides libraries for forms, testing, animation, and so much more. And it's all wrapped up in a highly performant package that will help reduce decision fatigue. Web developers especially have a huge number of open source libraries to choose from when building a product, and the status quo is always changing. Wait a minute. No. Wait a minute. Wait a minute. I know. Angular ships with a ton of features out of the box, many of which anticipate the complexity that you'll face as your app grows. But almost all of its features are optional and can be adopted as needed. So what does Angular really do at its core then? The short answer is that it helps you build complex, cross platform applications using web technology, like JavaScript, HTML, and CSS. But I think the best way to answer that question is to just show you by building something from scratch. So over the next 15 minutes or so, we'll build a tic tac toe game, we'll add a design system to it, we'll make it a progressive web app, we'll deploy it, and finally install it on our local system, as if it were a native desktop or mobile app. That might sound like a lot to do in 15 minutes, but don't worry, we have a superpower known as the Angular Command Line Interface. And this is not your typical CLI. This thing is really powerful because of Angular's conventions, we can generate a lot of code automatically. At this point, I'm assuming you have Node. Js installed on your system, and we'll run npm install global at angular cli. This will give you access to the ng command in your terminal. And the first thing we'll wanna do is generate a new Angular app. We can do that by running ng new with the name of the app, Then it will ask us if we want to add routing, we'll go ahead and say yes, and we'll choose SCSS for our styles. And then we'll go ahead and open up our app in Versus Code. There's a couple of extensions you'll want to have. 1st is the Angular language service, which will give you syntax highlighting in your HTML templates. And then I'm also installing the Angular console, which is a tool that allows us to simply point and click on CLI commands as opposed to typing them out manually in the terminal. Go ahead and find the serve command, then hit run. What happens is that our code is now bundled with webpack using LiveReload. So every time we make a change to our code. It will be reflected in the browser, and you can see that on localhost 4200. Now, if you're new to web development, you may have not experienced this yet, but one of the most painful aspects of the job can be bundling your code. When building a web application, you need to target multiple browsers, And on top of that, you want to keep the JavaScript bundle size as small as possible. Doing this from scratch in a complex application is a major pain, but not with Angular. Click the build command and see what happens. Angular will automatically minify and bundle your code, and will also generate multiple bundles for differential loading. This means the browser will always load the smallest JavaScript bundle possible based on the features available in that browser. And we can see all that raw JavaScript code by going into the dist folder. And this is the folder that we would actually deploy to a production hosting account or server. Now let's take a look at some of the files in this initial application. We have a few TS config files here, which were automatically generated and set up for this project. Angular was really the first major framework to encourage the use of TypeScript, and you now see it as almost a standard on large complex projects. Open your eyes. Now, the default Angular app also comes with testing using Karma and Jasmine, but there are other schematics or other extensions for the CLI you can use for other testing frameworks place like Jest and Cypress. And that's just another thing that Angular does out of the box. It sets up your testing utilities so you don't have to think about configuring them. But what good is any of this if the framework doesn't actually help us build a front end UI? Because Angular at its core is very similar to other UI frameworks place like React, Svelte, and Vue, just to name a few. You'll find these same concepts in Angular that you find in these frameworks. Component based UI architecture, where you can pass properties or data from one component to another. The place where we write our actual UI code is in the source app directory. By default, Angular generates an App component, which is essentially the entry point into the app. We can see how this works by opening up the index HTML file, which is just plain HTML. The special thing is that we have this app root element in the body. This element will be replaced with our actual Angular JavaScript application. And that initial parsing of the JavaScript is called bootstrapping. But the main thing you'll be doing in Angular is creating a UI by building and composing components together. And there are 3 main pieces to any component. The component TypeScript is where you define your custom JavaScript logic, and also define the internal state of the component. Then you have your HTML, which contains the actual visual UI and allows you to bind data from the TypeScript to that template. And lastly, you have a stylesheet, which is scoped to that component, meaning these styles won't bleed out to other components. Let's go into the app component HTML first, and delete all of the boilerplate code in there, leaving only the router outlet. Angular provides a very powerful router out of the box, which allows you to map components to URLs in the browser. And the router can even help you do something called code splitting with Webpack to lazy load certain parts of your JavaScript bundle. We're not going to cover it in this video, but just know that it's a relatively complex thing that Angular makes trivial. Now from this point, I want to build something meaningful. So let's build a little game of tic tac toe. The idea itself is inspired by the React tutorial, and it provides a good baseline for understanding the mechanics of the framework. We'll start by building a bare bones game, then we'll add a design system, and lastly, we will deploy it as a PWA. So the first thing we'll do is generate a component to represent an individual square. We'll find the generate command with the Angular console. We'll generate a component and give it a name of Square. And a lot of times in Angular, you might not need to have your component separated into 3 different files. So when running this command from the Angular console, we'll actually select the options for inline template and inline styles. You'll see this created a Square directory along with a Square component inside. If we open up the component, you'll see that we're importing component and OnInit from Angular core. On init is what's known as a life cycle hook, which allows you to run some code when the component is first initialized. It's not required for this component, so I'm going to go ahead and delete the references to it, and what we're left with here is just a plain Angular component. Every component starts with a component decorator, and decorators are these things that start with an at symbol. And you can watch my full video on TypeScript decorators if you're curious to learn how they work. P but in the case of Angular, they allow us to pass in an object that configures the way this component behaves. First, you'll notice the selector option. One. This is the name of the component as it will be declared or used in the HTML. Let's go ahead and open the app component to see how that works. If we start typing App Square, it should autocomplete in Versus Code, and then we can hit tab to complete it. And then if we're still serving the app, We should see the content of that component in the web page. The next thing you'll notice is the template. Angular provides a special templating language that empowers your HTML with JavaScript like logic. You can use conditional expressions, loops, and bind data directly to the HTML to write templates that are expressive and easy to understand, and also highly performant when it comes to reacting to data changes within the app. And that's why declarative UI frameworks like React, Angular, etcetera are so popular. And make it easy for you as a developer to keep your app data in sync with the actual UI how it appears visually for the end user. In Angular, we can bind data to a template by simply adding it as a property to the component class. Just to demonstrate this, I'll add a random number, and then I can interpolate it in the template by using double braces. And now we should see the random number in the screen. Under the hood, Angular is doing a thing called change detection, where where it's looking for changes to these properties and then updating the UI in a highly performant way. And all we have to do from a development perspective is change the value of the property. For For example, if we set up an interval here and change the random number to a different random number, you'll see it's updated in the screen every 500 milliseconds. So when you set a property on a component class, that's like setting its internal state. But in many cases, you want to pass in the property from a parent component, and that's exactly what we want for the square. We can allow properties to be input into this component by using the input decorator. If we start typing input and then tab, it will automatically import this decorator for us. And then we can set the property name to value, and we could even use TypeScript here to limit this value to a certain subset of string values or some other type if we wanted to. And now we can go back up to our component declaration in the App component, and now we can input this value from the parent component, which can be just a string value. Or if we wrap value in brackets, it will take an actual expression or dynamic value from this parent component. And that means you can pass a complex object from parent to child. Now if we look at our Square component, it only has a single input. There's nothing in this component that allows it to modify its own state. It all comes from the parent. So we generally call this a UI component or a dump component. Dump components are a good thing. They're easy to test and they're only concerned about the UI, so there's not much to worry about in terms of bugs and things like that. But in order to build a tic tac toe game, we'll need some kind of smart component to manage the state or the data between the various for Squares. Let's go ahead and generate that component. We'll call it Board and just stick with the default options. Now our Board component will be our Smart component, meaning it has internal state that can change. We have the Squares property which represents the 9 moves on the game board which will be an array of Strings. And then we have a property called x is next which is a boolean to help us determine the current player. And then we have the winner which will either be x or o. Now every component has a constructor and also life cycle hooks. The constructor runs immediately when this class is created, but you don't generally do anything in the constructor better aside from inject your dependencies, which we'll look at in a future video. If you have initial setup work that needs to be done in a component, You'll use the NG on init lifecycle hook in most cases. In our case, we'll write a method on this component called newGame and its responsibility is to set up the initial values when starting a brand new game. For our squares property, we'll create an array with 9 elements in it, and then we'll fill them with null values initially. When a user clicks on a square, these values will be spliced with either an x or an o. We'll set the winner to null and x is next to true. Now when working with data on a component, you may want to compute a property based on one of the main pieces of data that changes. In our case, x is next determines which player is currently using the game board. That's a boolean value, but we'd also like to show the name of the player as a string, which would be x or o. So we can create a computed property by using a TypeScript getter. We'll go ahead and call this property player. And if x is next is true, then the next player will be x. Otherwise, it will be o. Now anytime the x's next value changes, this computed property will be changed and reflected in the UI as well. Now the next thing we'll do in this component is define a method which will serve as an event handler for when the user clicks on one of the buttons to make a move. When that click event happens, we'll check the index in the array that they clicked on. If that square has already been clicked, then we won't do anything. But if it's empty or null, and we'll splice in the index of the square the user clicked on with the current player that we've computed in this component. And then we'll also toggle the x's next boolean to its bit value by using an exclamation mark. Then the last thing I'll do is write a method called calculate winner. This code mostly comes from the React tutorial and it's basically just an algorithm that determines if the user has won the tic tac toe game. I'm not going to spend time explaining the exact implementation details, but feel free to copy the source code from the GitHub link in the video description. So now let's head into the HTML template to see how we can bind the data properties we define on component class to our actual UI. We'll want to show the name of the current player, show the winner if the winner exists, and then also loop over the array of for squares so the user has something to click on. The player property that we defined with a getter behaves just like any other property. We can simply use it with the handlebar syntax to interpolate it in the template. Now the other thing that you'll commonly do in a web application is handle events. And in Angular, we can bind to events by using parentheses. And you'll notice that when we do that, Angular's tooling will automatically give us a list of all the possible events to add here. And then we bind a handler to this event, which Versus Code will also autocomplete. So in Angular, you get amazing tooling both in the TypeScript and also in your templates. Now, for this tic tac toe game, if we have a winner, we want to display a conditional template only when that winner exists and we can make that happen with what's called a structural directive. If you type in star, you'll see the different structural directives at your disposal. But the most common one is n g f, and it allows you to only render the HTML that it's bound to if the value on the right side evaluates to true, or it can be coerced to a truthy value to be more precise. And so when the winner is present, then this h two element will be rendered in the DOM. Now the final step is to put together the actual squares that represent the game board. Another common structural directive in Angular is ng 4. So first, we'll declare our App Square component, then we'll add ng 4 to render this component multiple times based on the array of squares. Inside of ng 4, we say let val, which creates a template variable named file that we can now use in this template. And if we also want access to the index, we can set a template variable of I equal to the index. And now we can put these variables to use. The first thing we'll want to do is pass the value down to the child App Square component and it can use that value to render an x or an o in the button. And we'll also bind to the click event to make a move on that index when the user clicks on the square. Now that takes care of our template logic, but there's one thing that's missing and that is our CSS styling to give us a 3 by 3 grid. CSS Grid makes this very easy. We just set up our main element to display grid and then we'll display the columns at 200 pixels each. At this point, you can serve the application, and you should now be able to play a game of tic tac toe. But we have one major problem at this point. The app looks horrible. So So what we'd like to do is add some global styling, like a design system, to give us a consistent UI that looks great. But usually setting up something like that is pretty involved. But fortunately, the Angular ecosystem has a variety of third party component libraries that we can easily add to this project with a single command. And that means our app can look great right out of the gate without any decision making or configuration on our part. There are plenty of great options to choose from like Angular Material, Ionic, and others, but today we're going to go with Nebula. Not only do the default components look great, but they also just released a new feature called UIBakery, and it's a tool that allows you to visually create components and then download Angular code. Expect a video on this topic in the near future. For right now, we'll go pet and add Nebula to this project by using the ng add command. If we run ng add at nebulartheme, it will automatically install and configure Nebula in our project. I'm gonna go ahead and choose the Cosmic theme because that sounds cool and we'll also say yes to customization and animation. You'll notice a few key changes to the project. We now have a Themes. Scss file which we can use to customize the variables used in the theme. And then we can go into the app module and we'll see that we have a few ng modules ported here. We're not going to talk about ng modules in this video, but they are discussed in detail in the full course. Basically, they're just a mechanism that makes it possible to use Angular in a progressive way, or in other words, only use the parts of the framework that you actually need. In our case, we'll go ahead and import the nebularButton module because that's the only Nebula component that we want to use so we don't have to package the entire thing which would increase our bundle size and decrease performance. And also, if we go into the App component, you'll see that we now have a bunch of components that are prefixed by nb for nebular. And already the UI is looking a lot more interesting. But one obvious way we can improve this is to change the styling of an individual square based on its state. If we go back into our Square component, we now have access to the n b button directive. With this directive, you can apply the nebular button theme and behaviors to any HTML element. Using the directive as is will give you the default nebular button, which we'll go ahead and do when the value is null or when the square has not been selected. Then Then we'll go ahead and set up a couple of additional buttons as well, and these buttons will take additional properties on the n b button directive. And the design system provides a lot of different ways to customize the button right out of the box. For example, we'll use this hero button which gives it a nice little gradient, but check out the component library in the docs for a full set of examples. P. Then we'll conditionally render each button depending on whether or not the value is x or o using the ng if directive. Now I realize I'm going through this code very fast, but again make sure to reference the link to GitHub in the video description to find the full project source code. And one last thing I'll do is also go into the Board component, and for the Start New Game button, we'll go ahead and display an outline button there. And with just a few minor changes, we now have a much better looking game of tic tac toe. So this kind of highlights my favorite thing about Angular and that is getting things done quickly. The tooling truly is amazing and there's a lot less configuration required to get to something meaningful. But there's still one more thing I promised you and that's to make this a progressive web app that can be installed as a native app. And believe it or not, that's actually the easiest part of this entire video. Let's head over to the Angular console, click on Add, and then you'll see a full list of the different schematics that are available to you. The one we're interested in is at angular/pwa. When you run this command, it does several important things related to PWAs. The first thing it does is add the JavaScript code needed to load a service worker in the Angular app, and and then it gives you a configuration file that you can use to customize the behavior of the service worker. And the worker is there primarily to make your app work offline, so you can customize the behavior of how those pages are cached and stored offline. And then you'll also notice that it adds a manifest file and some icons for the actual install button for the app. Now in order to determine if we have a valid progressive web app, we need to run this app in a production environment. So the first step in that process is to run ng build, which we can do with the Angular console. And that will compile all of our TypeScript code down to JavaScript in the dist folder. There's just one thing missing and that's an actual place to deploy our code. My personal favorite place is Firebase, and we can easily add Firebase to an Angular project by running ng add at AngularFire. This is going to ask you for a Firebase project, so you'll need to have signed up for a Firebase account if you don't have one already. And Firebase Hosting can be used on the free tier, by the way. The only thing left to do at this point is run ng deploy. That's going to automatically deploy our production app to the Firebase Hosting account. That will give you the hosting URL when it's finished, and now we can play tic tac toe on the web. But, here's the coolest thing about this. If we go to the Audits tab in Chrome Dev Tools, we can analyze our app as a PWA, and you can see we hit the green check marks on everything. And what this means for the end user is that the app is now installable on their device and PWAs are supported pretty much everywhere now. In fact, we can even install it on Windows Desktop. By hitting the install button in Chrome, it will add a shortcut to the desktop and it will open up the app in an actual Windows window. And now people can use your web app as if it were a traditional desktop app. And the same goes for mobile apps as well. So I'll just finish up by saying that Angular is a really awesome tool when you know how to use it. And if you want to go beyond the basics and learn how to build a real world progressive web app, consider becoming a Pro Member at Fireship IO. You'll get access to the brand new Angular 8 course and a whole bunch of other pro content. Thanks for watching and I will talk to you soon.
The concept of Angular is used to build websites and applications, with the framework flexible and collaborative. It allows for code generation and bundling, including dynamic ones, and the creation of a front-end UI. The speaker explains the process of building an app component, including installing the Angular console, using the Angular console, and creating a winner in a playful game. The use of Angular for development, including binding to events, creating a conditional template, and customization button and colors for the game. The speaker also discusses the use of a third-party component library and responsive component, and explains the process of building a web app using the Angular console and Audits tab. Viewers are encouraged to become a Pro Member at Fireship IO.