Master Angular 2 - Part 3 - Components | Grant 'Angular' K | Skillshare

Master Angular 2 - Part 3 - Components

Grant 'Angular' K, Crazy about Angular!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (14m)
    • 1. Introduction to Angular 2 on Skillshare

      1:27
    • 2. 2 4 Registering Your Components for Use

      5:08
    • 3. 2 5 Using Your Components

      4:25
    • 4. 2 6 Summary of Components

      1:31
    • 5. How to Continue Learning

      1:23

About This Class

Understand the basic concept of Angular 2 - components.

Transcripts

1. Introduction to Angular 2 on Skillshare: hello and welcome to this module on angular, too. Now this module is all about whatever you can see in your title. I've currently selected the components module, but you could be on any other module. It depends exactly what your title says. If you're just arriving here now and you're new to angular, too, then you're only going to find whatever is in this title. So in this case, its components, although you could be looking at rooting or anything else. If you don't know anything about angular to, it is best to click my profile by clicking one off the upper right hand links or searching for angular inside of skill ship and finding my courses. Once you've done that, you can go ahead and start at number one. It's the very first course that I published in my profile. So head back there. If you are brand new to angular, too, it's very important that you take this entire series off tutorials from the very beginning , so head over there right now. Otherwise, if you're interested in the topic that is up here components, then sometimes I split these into two sections, so you might have to click section number three once you have completed this particular section. So all in all, you're in the right place to learn angular, to click and roll, and let's begin. 2. 2 4 Registering Your Components for Use: Okay, so we have a nice new image component ready to go? Well, it's almost ready to go. And why do I say that? Well, angular isn't exactly like traditional programming languages, if that's where you're coming from. And I'm sure you know javascript is kind of different. It's more free form than what we're used to. Mangula kind of gives it a nice structure, but in a traditional programming language, you would create a class. And if you're using C sharp, for example, that class would sit and some inside some kind of name space, and then you could immediately access that component somewhere else. You could just say new image component, and it would create an object for you, not quite the case with angular, because there is no riel compilation off our program. Happening in the background is more of what we call a translation, which is just translating from our typescript over to JavaScript. So how do we know where the image component is? If we're talking about angular too well in the app module dot ts angular goes and has a look at all of the modules that it has available. Think of this is kind of the map or the reference That's a better explanation. Explanation the reference that it should go to whenever it needs to find something that we have named. And you can already see this in action here. Inside of this at energy module decorator, we have an array off declarations, and the 1st 1 of those is apt component. Now, obviously, we know what that is, because if we go to app component Doctor, Yes, there it is. It's not so angular knows that app component is there. If we go back to the module, what we can do is now import inside this declarations array, our image component. But before we can actually do that, we first have to import it at the top in a statement. So let's have image components okay from and then in quotes, we're going to put the address that the image component is at. Now. If we look at where this folder is apt up module dot ts. What we want to do is go into the image components and then get it from there. Now, the way we do that is we navigate to it. So what we want to do is look at the current folder we're in, which is dot slash and then we give it the folder name because the image component folder is inside off that same folder. So let's say image dash components forward slash and then we give it the name off the components file hopes its auto field something for their. For me there. We don't that image dot component and you'll notice we don't add on the dock ts because we don't need file endings for this part. In other places we do. It's a bit frustrating. They haven't actually stayed true Teoh some kind of framework. But I suppose that's one of the great things about angular two is where has one of the bad things, depending on your point of view. So what we've done here is we've gone into this folder in the same section, and we've looked for the image component. And if you don't get a red line, for example, if I misspell it, I get a red line, then that means that visual studio has actually found it. That means we now have it available to import in our declaration. So we have the image component there Now our image component is registered and ready for use. And in the next lecture will show you how we actually use it. But for now, I just want to show you, uh what I forgot what? I was going to show you for a second there. Come on, get it together. Right. We have our image components. Ah, that was it. If I just delete this, don't let yours just watch me image components, and you'll notice I get this pop up that you probably don't get, and that allows me to automatically import what I need. And it's a ah hell of a time saver. So let me save that and let me show you where you get that in visual studio code, you can get a plug in or an extension, which is this little icon here when you click those, These are the ones I have installed angular to typescript. Am its auto import is the one you want and perhaps npm intelli since so, if you search for auto import, if I just click that there is the one that you should look for and you'll see when he puts his entries in it. Auto imports for him like we've just seen. So that's a very handy extension to know about. Okay, so go ahead, install that if you need it. But I have now shown you where angular keeps a record off all of the components that you've made so that we can use them throughout our app. 3. 2 5 Using Your Components: all right. It is time to actually use our component. We've declared it in our APP module. Let me close that. And we've actually created it itself. So we can close that too. Now, how do we use the component? Well, let's use this in a side of our APP component dot T s and inside of here We're now looking at this template u r l and the template Earl is where you actually use the component. So let's open up the app component dot html and then inside of here we can leave all of this stuff and down below. Let's create on little div forward slash stiff. My formatting is bit messed up. There we go. And inside of here, we're going to actually feed it to the image component with created. Now remember the image components. At this point, only outputs faces an image just so we know that it works. What we need to use is this selector at image. So go to the HTML and simply use at dash image and then close off your tag. Now say that go over to your app which should discover that it needs re compiling. It'll reload the page for you and let's see, there we go. We have This is an image whips wrong finger. So that's now included the component for us. But that's not all I want to show you. Look, what happens if I copy this and I drop another one in and I save it? We come back, it re compiles itself and you get exactly the results you're expecting, which is to this is an image. Now why have I done that? Well, you can imagine if you had some kind off huge application and inside of that application, let's say you know, you bought this course So it's good example. Let's say you have on yeah course tag and you close that off and then inside of the app course tag, you're gonna have perhaps the app favourites tag Teoh market. Something is your favorites. You might have app details and can you see how we kind of weaken nest things inside of components? So later on, if I want to create a scrolling list of 100 courses, all I would need to do was include the AP course tag and that would in turn include the APP details it would include the out favorite, and it would use all of these components over and over again in a very modular way. And if you're a classical programmer in a very classical programming way, because I mean that's that's basically how we do stuff in classical languages. So if I save that, I'll just show you this bit. Watch what happens to our APP. Re compiling, re compiling, reloading on and crash. The whole thing will crash. So you know how I said it's just like classical programming? Well, in terms of crashes, it certainly is. And you wouldn't get this in plain old JavaScript. But you do in angular too. And it tells you we have some template past errors, so we'll get rid events and we'll cover debugging a little later on and in fact will get rid off this APP image. So now if I say that our APP should be back to normal and as soon as it gets back to normal , we are going to look at this section our uproot. Let me expand this. We have I h one r p and we have the DIV that contains our image. So that is the basics off, creating a component in angular to and then registering it for use and then using it inside off another component. So congratulations you now pretty much know everything you need to know about angular. To that is the fundamental thing that you need to know for basic, angular APS. 4. 2 6 Summary of Components: Okay, This is just a quick little summary of everything you've learnt. What I want you to take away from this module is that everything is a component in angular . If you can split it up into a component, then do that, especially if you're going to reuse that component. And I've just pulled up mega Boone dot com, which is a music site where you can purchase music and this is a great example off creating components. Now I don't know what their architecture is, but you can see clearly that you have a components down the side here, which is, you know, probably like album preview. We have components down here, which is large album preview. Perhaps we have tracked previews at the side, and these are all reused components. So this would be actually quite simple to make in angular two. Despite how complex it looks. It's just a bunch of Dave's that have a bunch off. Ah, what you call them tags. Such a big word, isn't it? Have a bunch of tags that reference all of the components you're going to use, So if you take one thing away, it is all of the components you create in angular, you need to start looking at websites like you would look at the Matrix, just a bunch of code on a bunch of components that all slots together. Okay. With that said, we are now ready to move on and start learning some more fundamental concepts off angular to in the next module. 5. How to Continue Learning: Congratulations. You finish this. A very quick module on angular to now, if you want to carry on learning and why wouldn't you? Because angular is pretty awesome. Then there's an easy way to do that. I've set it up, so it's nice and simple. Few and skill share you see in the bottom corner of the image on screen, there is a number that is a sequential number. You can also see it in the title off the course. So, for example, this is part one, but you could be in part five or part 50. It doesn't matter if you want to access the next part of this course, then simply search for angular two or go to my profile page by clicking one of the relevant links up in the top right corner, and you will see a list of the courses that I teach. Chances. Are you confined? You can spot immediately which one is next, so in this case it is number two. But in your case it might be number 51. So that's how you continue. Simply click the course now and enroll to carry on your angular learning, even if you're not going to complete it right now. It's a good idea to enroll now. So you know where you are next time you log onto skill share and you want to keep the learning experience going, I'll see you in the next module.