Angular 11 for Beginners - Learn Components, Routing, and Services! | Taylor English | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Angular 11 for Beginners - Learn Components, Routing, and Services!

teacher avatar Taylor English, Learning doesn't need to be hard :)

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (1h 10m)
    • 1. Intro

      4:43
    • 2. 1. Creating a project and downloading angular CLI

      5:02
    • 3. 2. Learn the file structure of an Angular Project

      7:35
    • 4. 3. How to set up your development environment

      4:28
    • 5. 4. Components

      6:48
    • 6. 5. Creating and Styling the HTML Part 1

      7:58
    • 7. 6. Creating and Styling the HTML Part 2

      4:23
    • 8. 7. Routing

      11:32
    • 9. 8. Overview of Binding

      8:14
    • 10. 9. Services

      5:18
    • 11. Ending

      3:39
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

81

Students

--

Projects

About This Class

Welcome to my Angular for beginners course! This course is for anyone interested in web development that wants to get into Angular. Whether you're an experienced programmer, or you only know HTML, CSS, and JavaScript, you can get something out of this course. The skills learned here can help you create better websites with navigation and multiple pieces.

I will cover the following topics in this course:

  • Creating a project and downloading angular CLI
  • Learn the file structure of an Angular Project
  • How to set up your development environment
  • Components
  • Creating and Styling the HTML
  • Routing
  • Overview of Binding
  • Services

To take this course, you should have a pretty good understanding of HTML, CSS, and JavaScript. Knowledge of TypeScript is recommended, but not necessary.

You will also need a code editor like Visual Studio Code and a terminal, such as Git Bash.

Meet Your Teacher

Teacher Profile Image

Taylor English

Learning doesn't need to be hard :)

Teacher

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Hello everyone and welcome to Angular 11. For beginners. In this course, we're going to learn the basics of Angular. And we're going to focus on three important pieces, components, routing and services. We're going to have a fun project where you're going to build your own website from scratch using Angular. And it's going to be dynamic. So it'll be pretty fun. So let's talk about more of the types of things that we're going to learn before we get started, I first just want to mention that if you want to see more content like this outside of Skillshare, be sure to subscribe to my YouTube channel C plus hacker. I'm on there. I do lots of different computer tutorials along with some programming tutorials. So let's see what you should know before you start this course, you should probably have a basic understanding of HTML and CSS, as well as JavaScript. Now TypeScript is not required but is recommended. But I should let you know that I myself learned Angular without a previous knowledge of TypeScript and it's worked out. Alright, in this course I'm going to go through any basic type script that we use and explain in detail how it works so that you understand it. So there are some tools that you're going to need. You'll need Visual Studio Code or any other editors such as Atom Sublime, things like that. It's your choice, it doesn't really matter, but I highly recommend that you get a good code editor with syntax highlighting. It's going to help you a lot. I especially recommend Visual Studio Code with its angular extensions because they really help with auto-completion in Angular. It helps with a lot of things. Now, you'll also need a terminal such as Git Bash. I believe you can use command prompt, but what you'll need this terminal 4 is running the Angular CLI Command Line Interface, which is essentially going to have various commands to help us run and do things with our Angular app. So our first lesson, we're going to be creating a new project and downloading the Angular CLI. I'm going to go through all of the steps so that you understand it really well. And if you've never used a terminal, you don't have to worry. It's not too, it's not too difficult. And then the second lesson is we're going to learn the file structure. This should be pretty quick. But there's a lot of filed and an Angular project and we're just going to go through generally what each one does. How to set up your development environment, essentially, how to have your terminal running your application so that every time you make edits, it automatically refreshes your web browser. Things like that. We're going to talk about components. This is really important. This is essentially all the various pieces on the webpage that we can create. And each component can be dynamic. Then routing, routing. You can think of this like navigation. It's essentially which components we show at certain times and in certain places. Finally, services. Services are kind of the the hidden logic behind your application. They allow you to do certain things like logging in, managing different parts of the application. We're not going to go terribly deep into services, but I do want to give you kind of a general overview. And now for our final project, we're going to create a simple website with navigation and noting. And this is something that we're going to be doing throughout the course. This is the project that I'll be guiding you along. And you're welcome to create. In fact, you're encouraged to create your own application after the course and publish it to this Skillshare page so that others can see it. You're awesome creations and feel free to make the project of your own. I'm here to guide you and teach you how it works. But the creativity that's up to you, you can do whatever you want with it. And so I hope you guys get a lot out of this course. I'm really excited to be working with you and be teaching you. I think Angular is a really fun JavaScript framework. And so I hope you enjoy, and I'll see you in the first video. 2. 1. Creating a project and downloading angular CLI: Hello everyone and welcome to the first video. Besides the intro of the course, let's just jump right into it. Today we're going to be talking about how to download the Angular CLI and create a new project. And it's very straightforward. So let's get started. The first thing you'll want to do is open up your terminal. And in the intro, I mentioned that this is something that you'll need to have to get started. But just look up Git Bash and you'll be able to find this. I'm using Windows Terminal with Git Bash on it as my terminal. So in order to install angular or your whole system, you just run this command. We're going to say npm install dash g, and I'll explain what all this means at angular slash CLA. So npm stands for Node Package Manager. It's just a way of installing software through the terminal. So we're saying npm install dash g stands for global. So instead of installing angular into one project specifically, we're going to install it for the whole computer so that you can create multiple projects without downloading it over event. And angular slash CLI is simply the name of the angular package that we want to download. So press Enter. And this will take just a minute. While we're doing that, we're going to want to find a place to create our project. So I'm going to create one in my downloads folder for now. Okay? So I'm going actually, I thought of a better way to do this. Let's go back to the terminal. So Angular has downloaded. And what we want to do is I'm going to navigate to my downloads folder. You can navigate wherever you want. Let me show you how this works to see what directory you're in. Simply type PWD for present working directory. I'm just going to have to go through some of these Linux commands so that we can get into the project. Some of these commands might not work on Command Windows command prompt, which is why I highly recommend getting Git Bash or if you're on Mac just using the terminal. Okay, so it says I'm in my user folder. So what I'm gonna do is I'm going to say cd or change directory. And I know that the documents, photos here. You can also use ls to list out the folders that are here. So I'm going to say cd Documents. And again list out. Oh sorry, I meant to go into downloads using cd space dot dot. It will go back one, I want to go into downloads. Great. So here's where I want to create my project. So in order to create your project, you're going to type in NG. Ng is kinda the keyword that we use when we want to use Angular and the terminal. Just say mg new for new project and give it a name. I'm just going to say test, object. Now press Enter. And it's going to ask you a few questions. So first it's going to say, Would you like angular routing? And we wanna say yes because we're going to use that in this project, so yes. And which style sheet format would you like? Just press Enter to use CSS. And then it's going to take a minute to install and we'll come back when that is ready. All right. So that has finished. Took a little longer than I was expecting, but sometimes it does take awhile to create a project. So now I'm going to close out of my terminal and I'm going to open up Visual Studio Code. So go ahead and open up whatever editor you'd like to use. This is the one I recommend, but of course, use whatever you feel most comfortable with them. Alright, now, I'm going to get something already open here. So let's do this and open a new window. Going to go to File, Open Folder. Go to our downloads, enters my tons of project. Let's select this folder. And yes, we want to trust this. And here we go. We've created our project successfully. You'll see there's a lot of 1000 here and that's what we're going to go over next time. So I'll see you in the next video. 3. 2. Learn the file structure of an Angular Project: Hello everyone, Welcome to the second lesson. Today we're going to be talking about the angular file structure. Let's get started. So in my editor, I've got the project pulled up here. Now. I'm not going to go through every file and folder, just the ones that mainly we need to worry about. So first of all, there's the node modules. Node modules essentially holds all the bits of code that Angular is using to make the magic happen. Okay? So we don't really need to worry about that. We'll never go into there. The source folder is the most important folder for us. And I'll go more in depth into this, but this is where the actual project lies, the actual app. We don't really need to worry about all of these files as much. Most of these are just kind of defining the rules for how Angular operates, as well as TypeScript, which you're welcome to change those if you want to, but I'm not going to worry about them. And yes, I believe that is all of those. So let's go into the source folder. So inside of the app folder, this is where all of our components lie. All of the pieces of the main pieces of your application will lie in this app folder. And in this app folder. We've got different interesting filenames. Let's take a look at App dot module.js. Okay? This is kind of a module is one of the main pieces that the main pieces of our app. You can have multiple modules. But in this course we're just going to have one module with multiple components. Essentially. We don't need to worry too much about this folder. But as we're using the Angular CLI, it's going to automatically update this to be what it needs to be. But we can look at some of the basic things in it. First, we've got some import statements. These are just importing the various pieces of Angular that it's going to need. Next, we've got our declaration. So this is going to declare every component that we create and it's going to do it for us, which is super nice. And then we've got imports which is used for certain other special pieces of Angular that you might want to use. Okay, Let's move on to app.component dot ts. So app.com is the main component or application. It's kind of where we're going to put all of our HTML and CSS. It's kinda where everything gets nested under the app component. Okay, So the TypeScript file here, you can see it already got some stuff in it. It's importing the angular component files that it needs. Now, what it says right here, this is what we call a decorator. And this decorator is essentially just showing us various metadata or the app component. So let's take a look at each one. So here's the selector app route. In our HTML file, we're actually going to have a piece that says app route a tag. And that's where the app component goes. And angular knows how to read that. So you can change the name of this lecture if you want, but that's here. Next is the template URL. This is the file where we store our HTML for the component. And remember, a component is just a piece that you can put, a little piece of code that you can put on a page and you can have different components that change dynamically through. Just imagine like a nav bar or the body of a website or a sidebar. Those are all different components, okay. And next year style URLs. This is an array of the stylesheets, the CSS that you want to use. You can have multiple style sheets if you want. I'm just going to use the built-in ones. But you can see all of these files are over here. So if we take a look at the HTML, it's already got something running. And we're going to, it's already got some code and I'm going to show you how to see what it's doing in the next video. But all of your HTML for the component goes here. And all of your CSS we've given here. And currently we see that there's no CSS in this component. Now the last part, this is the title. This is something that we will probably get rid of. But it's essentially just kind of naming the project. And I'll show you what it's influencing on the page in just a moment. Next, we've got App.vue component, dot-dot-dot Ts. This is something you won't need to worry about this course. It's mainly for unit tests and things that are beyond the spectrum of this class. The scope, I should say. Next, we've got the app routing module, dot ds. This is where we do our routing, our navigation, and kind of how we move between different components. And I'll go more into that when we talk about routing. Okay, So outside of the app folder, you'll see our assets folder. This is where we put images and videos, things like that, that we want to incorporate in our app. Environments. Don't need to worry about too much. The favicon is the little icon dots on the tab. Next we've got index.html. So at its core, Angular is still going to compile into HTML, CSS, and JavaScript, because that's what a web browser understands. And a web browser is going to read the index dot HTML file first. So if you look at it, it's pretty simple. And inside the body we have this app route, which if you remember, is that tag that I showed you a minute ago when we were looking here at the app.com WAS the app route. That means it's going to nest the app route component inside of this HTML page. Next you've got main.js. If you need TypeScript that runs for your whole application, I believe that's where you would put that here. You probably don't need to worry about that too much. Don't need to worry about poly fills. Style.css is where you'll put global styles if you want to incorporate styling that's not part of a specific component, but part of everything. You can put it here and test.js. Again, we don't really need to go into that very much. But that's the basic abstraction. I say basic, but it does look pretty complex. But don't worry, as we go throughout this project, I hope that you'll be able to understand it more and more. And I will see you guys in the next video where we will start creating components. 4. 3. How to set up your development environment: Hello everyone. I apologize, I misspoke. In the last video, I said that we were going to do components in this video. But before we do that, we actually need to first set up our development environment. But this will be very fast. The first thing you'll want to do in Visual Studio Code is press Control. And then the back tick button, it's next to the number 1 key. That's going to open up our terminal right here inside of Visual Studio Code. Now, make sure that you've got the right terminal selected by pressing the arrow icon and selecting the terminal you want. Again, I'm using Git Bash. So the first thing we need to do is serve the project, which essentially is how we run it. We can do that by typing this command NG starve and press Enter. This is going to compile the project and run it. Now, we need to open up our web browser. And let's go to localhost 4200. Alright, this is where our app is going to run. And let's check on this. It looks like it's getting there. We'll come back in just a minute when it's ready. Oh, actually. Yeah. Okay. So the project has finished compiling. Let's see if I can show you this here. It's finished compiling. And if we go ahead and look in our web browser, we can see that it's running here and they've already got something going. Now, we want to get rid of all this and create our own application. But first, I want to show you a few things. So if we switch back to here to where it's running our code, I want to show you how to make a change and see the edits changed live, ordinarily live. Let's go ahead and click on app and go to app.com, ab.js. Now remember I told you we were going to talk about this idol variable. The title where it says test project, that's being used here in this application where it says Test Project app is running. Now let's change that. Let's change this to cool project and press Save. Now you'll notice something just happened in our terminal. It recompiled everything and it reloaded the page for us. And so you can see it says cool project app is running. How cool is that? Okay, this is all we need for our development environment. Now, one more thing. If you want to stop this from running, you can go into the terminal and press Control C. And it will stop. And again to start it we do NG serve. But if you want to know a little trick, after you say NG serve, its clears, after you say NG serve, press space, dash o. What this is going to do is it's going to open up the port or the webpage for you. So go ahead and press Enter, and I'm going to close this. When it's done compiling, we won't have to navigate to localhost 4200 anymore. It will do it for us. And the reason we have to go to 4200 is because that's the default for an Angular project. But let's wait until this is done. Great. So if I pull this up, it actually opened on my other screen. But it pulled up our project when we ran that. So that's how you set up your environment. And now in the next video, we will actually get two components. So I'll see you in the next one. 5. 4. Components: In this video, we're going to talk about components. And over the next few videos, we're going to create various components. And I'm going to show you how they work together. And we're going to give some styling to them, HTML and make them look nice. All right, so let's go ahead and I'm going to close the terminal. It's still running, but I'm going to hide it. So I'm going to press Control back click again and it hides it, but it's, it's still running our page. And what I want to do is I want to get rid of all the code that is in our HTML file here. So let's go to app.com dot HTML. Just select everything and delete, save. And if we go ahead and look at our page, looks like I have closed it. Let's open that up again. You can see it's blank. So in our app component, I think we should have two main pieces on nav bar, as well as the body of our page so that when we navigate to different pages, the content within the page changes. So what I'm going to do here is I'm going to create a new component. I'm actually going to open up the terminal again. And I'm going to press this little button up here, which will split the terminal and create another one. So we can continue to run the application while doing this. So I'm going to type NG generate component, and we're going to name it now, burnout bar. Now press Enter. This is going to quickly create our new component Boris up. It's appears that I typed in something wrong. I see where I went wrong. Component. Now. There we go. Now, if you want a shorthand way of doing this, you can simply type N, G, G for generate, see for components and the name of it. But for now, we'll just type it out. So you can see here it created a variety of files and it modified some files. So let's go and take a look at what it created inside of our app folder here. You can now see we have a nap folder. And inside of that we have these same files. Again. We have the CSS, the HTML, the spec dot, yes and yes. And you're going to have this for each component. So not only did it create those, but if we look at the app.py module.js, it also modified this on its own. You can see it imported the nav component and declared the nav component for us. So we don't have to change any of the code in here. So now what we need to do is first let's look at our lab component. You can see it's already got some HTML. It just says nav works. What we wanna do is we want to put our nav component on our main page. So let's go to our app.component dot HTML. And here we need to put the tag that's linked to our nab components so it will display it. Everything, all the code that we write is going to go into this app.component. This is kind of the outermost shell because if you remember, when we go to the where is it? Index.html, you can see it's running the app route and everything is inside the app route. Okay, and that's the tag to the app component. Will the nav component has its own tag also. And we can see that if we go to nav.com dot ts right here, you can see that the selector says app dash nav. So what we need to do in our app component, HTML is right, app dash, nav, and close it. That's all we need to do. Now we press Save. And let's take a look at our page. You can see it says nav works because it's stored our component now in here, in our app component, in our app component, which it was already display. Okay, now let's create our body component. Okay? Same thing again, open up the terminal type. Ng generates components. I'm going to spell it right this time. And we're going to call this body the body of the page. Press Enter, and it's going to quickly create our vows for it. And again, update the app module. Yes. And I'm sorry that there's a lot of very long filename, so I hope you guys to get confused. If you do get a little confused, just go back and re-watch parts of the video that you need. So again, we need to put our body component into our app component. So that is displayed to open up the app component. And this time we're going to do app dash body. Because if you look at the TypeScript file, you'll see upside that have the TypeScript file for the body. You'll see that the selector by default is called app, the ash body. Essentially rule of thumb. It's going to be apt dash whatever the name of the component is. But feel free to change it again. Okay, now let's save this and take a look here. And we have body works now. So we're running two components, two separate bits of code on this page that can be changed dynamically. And over the next few videos, we're going to actually make these look like something that we want to use. Okay, so we're going to have a bit of fun with HTML and CSS, and I'll see you in the next video. 6. 5. Creating and Styling the HTML Part 1: Alright, in this video, we're going to be focusing a little less on Angular itself and a little more on HTML and CSS to make our project look kinda fun. Feel free to do this section however you'd like. And remember, you're welcome to follow along with me, but I highly encourage you to do your own project at the end to practice everything you've learned that way, you don't forget. So let's go in and let's do some HTML and CSS. We have a very white bright page here, and I want to make it look a little more colorful. So what we wanna do is actually change global styles. Remember, each component has its own styling, but the whole page also has global styles. So if we want everything to be affected by hostile, then we need to do styling for the whole page. And we do that here in styles.css, which is outside of the app folder. Okay. So here it says you can add global styles to this file and also import other style bottles, vital files. That's one does. Okay. Let's do something quick. Let's do body. Now for this part, I'll be teaching a little less and more of just doing. And that way. You can copy this part and we'll get onto the next bit of angular. So I'm going to change the background color to be something nice. I don't know what about Bisk? I think that's a fine color. Okay. We'll go with that. And that's all the styling I'll do here in the global styles for now. Now what we want to do is change the styling for the navbar. So to focus on the navbar, I'm going to get rid of the body component by going to our app folder and to our app.com HTML. I'm just going to comment out the upper body for now. You can do this by pressing Control Slash in most editors. Okay, so you can see it's got, really gotten rid of the nav bar. So let's do styling for this. We're going to do all of our styling for the navbar within the, excuse me, the nav component dot CSS. So first of all, let's change this to a div. And in that div, we want an unordered list. This is going to be your navigation. So let's say we want a homepage. We want About page and one, nor. Whoops, we will say we want one page. This is where we do something fun. Okay, Now press Dave, and we need to do some styling on that because right now it's just a list. So what we're going to do is we're first going to go to the math component dot CSS, and we're going to stay list item. We want text decoration, none. All right. This is going to get rid of our bullet points for us. Oh, excuse me. I messed that up is let's see. Oops. I apologize. I misspoke. That's not the right property. The right property is list style, type. None. Okay. Press Save. And you'll see that gets rid of our bullet points for us. Okay, Then maybe we want this in some sort of box, maybe at the top center of the page. So let's go ahead and pour the unordered list. We're going to give this a border of one pixel, solid black. Okay, great. And we're going to give that a width, or a 100 pixels. And we're going to give that a margin of 20 pixels top and bottom, and auto on the side. That way we center it. Great. Now, in order to center these items in the middle of the bar, we want to use. But she's a flexbox. Okay. So let's do on our URL, we want a display Next, and we want to justify our content center and whips. It's got the wrong one. Justify content space between and then align items, center. And that, as you can see, it puts space around everything and makes it in the center. Now let's fix the strange spacing we've got going on. Let's do padding 0 grips. So that gets rid of all of the padding. But we actually do want some padding. So let's give it like 10 pixels of padding. Awesome. And let's move everything closer together. So we're going to cut this down to 300 pixels in width. Excellent. Now, we want to make each one of these look like its own button. And we also want to put some space on the outside of these. So what I'm going to do here is go to the list item. You do padding, 10 pixels. Awesome, That looks good. And for each list item, Let's do a background color. Let's see. So we were using desk before. Let's do something slightly darker. Try that. Okay, That looks nice. Now the final thing we'll do in this video is we want, when we mouse over these, we want it to shed little pointer as our cursor. So on LI, we're going to do cursor pointer. Okay? And that way when we highlight over its a look like we can click them. Great. So take a look at this code. Try to understand it. Look it up if you, if you don't quite understand it. And in the next video, we'll finish up our styling on the navbar. I'll see you then. 7. 6. Creating and Styling the HTML Part 2: Welcome to the second part of our CSS and HTML, styling and creating our nav and body components. Last, we left off. This is where we were at. We had a basic nav bar and some buttons here that we made as list items. So there's one more aspect of the navbar I want to do for now. And that is I want to make it so that when we hover over the buttons, they actually look like they're doing something. So we're going to create a new property called LI hover. And here we're just going to change the background color. So let's select this color again and then we'll go even darker. And when we go to our page, you can see that when we highlight over these, they actually changed their styling actually look different. So that's awesome. Now we need to create our body. So let's put our, Let's go to our app.component dot HTML and uncomment our app dot body. And save that. And you'll see k that comes back. So I'm thinking for this website, Let's just do kind of a squared that takes up most of the screen. Okay, so let's close out of these tabs and let's go to the body.component dot HTML. Change this to a div. And we're going to give this an ID of main body. Now let's go to body.com dot CSS. And we're going to say for the idea of main body, we want to create. Let's again do a border of one pixel, solid black. Let's do a width. Let's see. So this was 300. I'd say about three times as much, so maybe 900 pixels. And again, this could look different for you on whatever screen size you're using. So just adjusted to be however you want. K. So alright, there's that, there's nothing currently in it. So that's what we're actually going to create a height. And let's actually do a 1000 pixels. And we'll do the same. What do 15. Now, let's just do it 1000 pixels for the height. It's going to be a weird website. All right, I guess we should probably shrink that a little bit. Let's go to 800 pixels on the height. Great. Now let's center this by giving it a margin of 10 pixels on the top and bottom and auto sides to be centered. Great. So what we want to have happen here is whenever we click on one of these buttons, we want the content in this box to change. So in the next video, this is all the styling I'm going to do for now. Feel free to make it more complex, but I want to focus more on the Angular, so I want to get back to that. But feel free to make this your own. And in the next video we're going to make some components for each of these pages that we can put into this view. And then we'll start talking about routing. So I'll see you in the next video. 8. 7. Routing: In this video, we're going to start talking about routing and creating routes for our various components. Essentially, this means that we want to create navigation so that when we click on these buttons, it goes to different pages. So in this video, I'll be doing a combination of creating those components, as well as teaching you how to do routing. The first thing we'll need to do is actually create a component of our homepage. So let's practice our skills. Go to the terminal and I NG generate component home. This is going to be our homepage. And for the sake of this video, we're going to keep this, we're going to keep each of our pages very simple, just so I can show you how to do the core parts of Angular. But again, feel free to be creative. All right, So you'll see we've got this home folder. Let's go inside of it. And let's just do some simple things. Let's create header and we'll say welcome to my cool website. Okay, this is going to be our homepage. Now, what we want to do is start our routing. So go to the app routing dot module.js file and find where it says const, routes, colon routes, and then it has an array. Press Enter in the array and create an object. We're going to be a JavaScript object by putting curly braces. And what we wanna do is we want a space between everything we write and the braces. That's just the syntax that we use. What we wanna do is write path space, and then in quotes we're going to write home. Now what this means is in our URL, we want our website slash 0. And that's what the path is. It's that slash part. And so we just write home and it knows that there should be a slash and put a comma and then write components 0, 1, and type the name of the home component. I'm going to say home components and I can just press Tab on the suggestion. You'll see that it imported the home component or us, which is really nice. Okay? Now what we've done, we've created our home component. Let's save this file. What we want to do is link that now to our button. Let's go to our nav. And we're going to go to our nav.com dot HTML. And within our LI tag for home, put a space and put router link should give you a suggestion. And press equals and then quote. This is going to say, when we click this, it's going to take us to a page. And all we wanna do is say, Oh, okay. Now let's go and check out the page. And let's press on. It appears it did not work, but oh, I forgot. We missed something. So before we do that, we need to go into our let's see, our app.component. Now, I'm sorry, our body.com dot HTML. And inside our body we need to tell it where to put our our router. Okay, so I'm going to put a tag in here called Router outlets. Router outlet is essentially where the robbing happens. So when the routes change, they should change in the Spock inside of our body. Now, let's go and try it out. You can see it says, Welcome to my cool website. And in the top bar it says slash home. Now if we change this to be what it was before, I can show you how the button works. We click Home. Welcome to my cool website. How cool is that? Okay, now let's create a few other components for our About and our fun page. And then I'm going to show you how routing works with those as well, as well as choosing a default route. Okay, so let's go to our terminal and create a view. Components. Let's do NG generate component yet, but is not right. And we want to create a bat. And then we're going to create another one. Right after it's done. Mg generates components. Been dashed page. Okay, it can't be two words, so we're going to do it this way, at least I don't believe so. Press enter, and this is going to create our fun page. Now, let's go into each of those pages and just add something real quick. So let's go to our fun page. And let's change this to a header and say welcome to the page. And then we will go to our about page. And we will say H1. Welcome to the about page. Great. So we've got that all set up, but we need to go into our router. Dots are AP routing dot module.js. And we need to add in the paths of those other pages as well. So put a comment, a comma, excuse me, after this object here. Press enter and create another object where it will say path. Whoops, about comma component. Colon. Now start typing about, and it should suggest the about component. And again, it imported it for us. Okay, Now press comma. And let's do it again. Is one path or a new fund dash page or a path. And then components, and then type page component and narrative. So we've got all of our routing and remember, we already created the router outlet inside of our body component. So we don't need to create it again, we just need to change the paths and add more. Let's press Save. And let's go to our page. So you can see, oh, one more thing. Again, we can't forget this. We need to add the router links to the nav bar. So let's go to nav, to nav.com HTML, and let's add a router link for each one. So router link equals about for the about page. And router link equals fun dash page for the fun page. Okay, Now it should be ready. So you can click on home and see home. We can click on About, see about. And we can click on the front page. We can click on these and it's doing two different pages. You can see it's changing the URL or us, which is really neat. Okay? Now, when you go to this page by itself, it still doesn't show anything, but it would make logical sense that it shows our homepage, right? So one more thing we'll wanna do with our routing. Back to our routing module is Honour home component. We're going to put something out to put a comma after home component and type use as default. Oops. It didn't seem to work. Hold on just a moment. Sorry, I went about that wrong. Don't have that property. Let's actually go B or our home object, create another object. And we're going to type path is just an empty string. This means this is the place that will go to if they don't type anything after the slash. Now, type redirect to and we want to redirect them to slash home. Okay? And on this one we need the slash, but not these other ones. Ok. And let's put a comma after that and press Save. So now, whoops, I apologize. I believe we need to add our components. Components. And actually the last property we need is not the component, but it is a property called Pat, Pat match. And we want to do a colon and we want to say all. So this is going to do is when someone types something or doesn't type something after the slash, we want it to redirect it to the home. And we just say to match that or path of not putting anything. Now, when we go back, let's say we don't take anything after the slash. It will automatically go home. And then from there we can go to our other pages. So I apologize, this was a long video, but in the next one, We're almost done and we're going to talk about services. So I will see you in the next video. 9. 8. Overview of Binding: All right, This is one of the last videos and we're going to be talking about services. So what is a service? Essentially, it's a bit of code that kind of, it's not a component. It's not something that you see visually, but it's, it's a bit of code that can be re-used in different places. So today the way I'm going to show that to you is on our homepage. I want to put something under here that says We are having fun or we're not having fun based on a variable in our TypeScript. Let's figure how to do that. Okay, so let's open up our fun page. And let's go to our HTML and create a paragraph under it. And let's say we are having been. Now this by itself is not going to change. It's just going to always be, we're having fun. Okay? So I'm going to share a concept with you called binding. And this is something that I'm not going to go over much in this course, but it is an important concept of angular and will probably be covered in a different course or video. But what we want to do here, I'm just going to do some binding quickly. And where we are. I'm going to change that to a double curly braces and we're going to create a variable called are or are not a strange variable, but we want it to tell us if we are or are not having fun. Now it's giving us a red squiggly because we need to declare enter TypeScript. Let's open one-page dot component dot ts. And you don't need to worry about the constructor for now or the engine in it. But below that, let's create a variable called are or are not. And let's set it equal to fall. Okay? Now, let's create a function that's called Are we having fun? Now, this function we'll need to take in the property of are or are not. Okay? And we need to say this is positive. If, if it's true, if we are having been, then we want to change this dot, are or are not. To be. True. Whoops. Hold on just a moment. Okay. One thing real quick is we need a way to change this, the R or not. Let's go to here, and let's create two buttons. These buttons going to be called r and this button is going to be called, are not. Both of these. We want to trigger a function. The function, are we having fun? Okay? And we want to say onclick. This is how we do an event binding is what they call it an angular. So we're just going to say when they click this, we need to run a function and we wanna say R or not. And we're going to pass them a variable and say R. And I apologize if the wording is a bit confusing. But then on this one, we're going to click and we're going to run the same function are or are not. But instead we're going to run are not. Ok. Now in here, we're actually going to take a parameter that is a string. So we want to say, Let's say are or are not. And we're going to make this a string. Okay? And let's actually delete this line for a minute. Okay? Now, if are or are not is true. Then I apologize, we actually need that variable back. Then we say they are or are not, or are binding up here where it says we're having fun. That is true. Else. We say it is bombs. And by default we're actually going to have this saved as trip. So let's go over what's going on. And it looks like we need to chain some thing. Oh, yes, sorry. We are having fun. Or are we having fun? That's the name of the function. So here's what's going on here. What we're doing is putting a variable in here that says We, the variable having fun. So it's either going to say we are having fun or we are not having fun. Now that variable is dependent on this, right here. The default is true. And if we go and look at our page, it says, I apologize, that is not what it was supposed to say. We want this to actually be a string. Okay? I mess that up. We are not. Okay. And for TypeScript, we want to put a colon here that says string. And that's how we declare the type. Okay? So Let's try. It just says we having fun. We have two buttons are and are not. Now, if we lick that the R button, we want it to run this function and change this value to our OK. Now, in the opposite case, we want it to the other button to change it to R naught. So let's try it out. Are they are not, did not work. Let's fix that. Let's see. If are or are not equals r. Sorry, this is confusing. So we are having fun, we're not having fun. So we can change that right there and we're changing a variable in the text. Now we're not gonna get too much into binding, like I said. But we're actually, this is kind of an overview of binding and we're actually going to get into the services in the next video of how we can implement this feature as a Service. So I'll see you guys in the next one. 10. 9. Services: Okay, So in the last video we talked a little bit about binding, and we're going to talk about how to make our binding into a service. Okay, so let's go into our code. We need to generate a new service that can decide if we're having fun. So let's go here and let's type NG, generate service. And we're just going to call it Having been. Okay. Now, the idea behind this is that we want to be able to use the service in any component that we're in. Now for this specific scenario, it's not super applicable, but I'm going to demonstrate it like this. Anyway. So let's, we've got our services down here. Now, you can create a separate app for your services by running this command. Instead of saying NG generate service, having fun, we could do services slash having fun. Now it create a folder for our services and then put the having fun in light of it. But it's okay, we can do this for now. Open up having been DOT services.js. And what we're going to do is we're going to put all of our logic, or are we having fun into our service? As well as the string? Now, we want our component to be able to utilize our service. So the first thing we need to do is import the service. Come up here and type in import. And I start typing the name, having fun service, just press Tab and it will import the service for us. Now to use this service in our class, we need to go to the constructor and the parentheses and type, right? It's for a private variable for her class. And having fun service, colon, having fun service. What does this mean? Well, it means that we're creating a variable called having fun service. And its type is having fun surface. It's a little bit confusing, but here's how we use it. So for this, we needed to create our variable, are or are not. So what we can do is we can have a variable. We can say are or are not, equals. And we can do having fun service dot. Now we need to find in our service we want the are or are not. So you say R or, oh, whoops, let's see. Okay, Before we write having fun service, we need to write this, which is going to reference the, this variable inside of our class. So we say this dot, having fun service dot are or are not. Now this is going to save our variable here to be the same as the one that actually in our service. Okay? And now we want to also use our function. So we're going to say, are having fun equals this dot, having fun service dot, are we having fun? Okay. Oops. Okay, now, if we want to be able to take input for this, then whips this. Let's see. Then we need to have our having been we just need to change this to, are we having fun? And now it recognizes the variable from here. Okay? Now if we go to here, we can still use our code even though it's somewhere else. So we could put that service in a different page and use it, for example, without having to copy the code between each service. So I hope that was somewhat helpful in understanding services. It's more of a complex topic that might be covered in a later course. But there's kind of a brief introduction for now. And I'll see you guys in the next video. 11. Ending: All right, You have finished the course, and I am very proud of you for going through this and for learning about Angular. It's a very cool language. Now in this course, we, We didn't get super in depth. But we talked about an overview of things and how to do some basic tasks that make web development really nice. So let's first take a look at the awesome website we created. Now I say awesome because it was cool creating it in, it's in and of itself. It's could use some work, but let's take a look at it. It automatically goes to our homepage upon loading. And we can navigate between their home about and are fun page. All while the content stays within this box. And on our fun page we can use binding and services along with these buttons to change the text that's actually displayed on this claim. Now, let's go through a brief overview of the stuff we talked about. First, we talked about creating a project and downloading the Angular CLI. We'll learn about the file structure and each of the files for components and how they're important. We learned how to develop, how to set up our development environment so that in our terminal we could be running our application and see the results refresh every time we press Save. Next, we learned about components. Probably one of the biggest things we learned about, we learned about how we can have different pieces of the webpage that change dynamically on their own and have their own HTML, CSS, and TypeScript. We learned how to route those components so that when we click the buttons in our navigation bar, we can go to different pages. And so we can change the URL and have it go to those pages for us. We learned a little bit about services with just a brief overview about how you can create them TypeScript or JavaScript in a service and import it into other components to reuse code. Now, make sure that you go and create something on your own. Sometimes it can be easy to listen to the instructor talk and you feel like you're understanding as you're going along and then when you start and you don't know what to do. So I want you to practice, go make a project, and if you get stuck, come back to the videos and try to refresh your memory on how we did something. Now, go create a fun project, create your own navbar, create your own components and routing. And I'm very grateful, I just wanna say, thank you for taking this course, thank you for taking time to learn about Angular with me. And also be sure to check out YouTube.com slash C plus hacker all spelled out in one word. See PLU, S, H, see it, K, ER. And go check out that website here. I'll put it up here again to see more videos, more tutorials on web development and on other various computer things. And again, thank you for taking the course and I hope you learn something. So until next time, guys, I'll see you in the next video.