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

Master Angular 2 - Part 2 - Components

Grant 'Angular' K, Crazy about Angular!

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

      1:27
    • 2. 2 1 Introduction to Components

      4:14
    • 3. 2 2 Which Code Editor Should You Use?

      2:16
    • 4. 2 3 How to Create a Component

      8:19
    • 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 1 Introduction to Components: hello and welcome to this second module on creating amazing Web apse with angular two. Now, so far, we have a very basic app called APP Works and Grant. And if I right click this, which I can't do in safari. So what I'm gonna do is copy this address. I'm gonna open up Google chrome, and I'm just gonna paste it in here. Local host 4200. We have this app now if I right click and I click Inspect, I'm going to open up my console at the side here and it's going to show me how my HTML is laid out. And I'm just taking you through this before we carry on with programming stuff. Just you have a feel for how angular is laid out. And as you might expect, this is a basic web page. We have an HTML declaration at the top. We have ahead section where we can load up very style sheets and various links. So if you want to put javascript libraries in here, you could do that. But on the whole, you wouldn't do that. You'd look for a library first, and also we have this body section which contains our actual app and inside of our app we have uproot and remember that uproot was this tag that actually got specified inside of the very first component that we looked at and then inside of there we have an H one and A P, and these have been given this special energy content dash effort, see dish note. That's just an angular thing, and that allows us to put our own variables in such as App Works and Grant. So that's just a quick recap off everything we've covered in the first section. So you know how angular works right in this section. We're going to look at how to create another component, and why would we want to do that? Well, there's a very, very important reason, and I'll just show you if I go to whatever the Manchester Weather Report, why not? Let's go here now. This probably isn't written in angular, properly written in PHP. But what you can see here is ah, whole mishmash of information, right? And you can also see Manchester is freezing, which is why I moved away from Manchester and always raining. But that aside, what you can see is all this information. But as a developer, you need to start looking kind of beyond all of this information, and you need to look into the parts off the page. Now, what do I mean by that? I mean, here we have this share section and in angular, you need to start thinking in a modular way. So in angular, if you want to share something, you wouldn't create a share section in your component. What you would do is you create a component that is all about sharing. So this section here with the sharing links would be one component. Then you take that component and you would put it inside of whatever page it's needed in. And you can immediately see that you'd save a lot of code typing time and a lot of time to change code. If you ever need to change things in the future, because your component is in one place, which is just basic good programing practice, really right. And then you have other components, like you have this search box, which is a component. You have these headers. You have this top menu which would also be separate components, so you can see how we can separate things out into their own stand alone modules, which makes it easier to use it inside different parts off our application. Or indeed, we can even lift them out and put them in brand new applications. If we so wish, we can share them as modules with other developers. It just makes everything much easier to handle in programming terms, right? So let's now look at how to create our very first module. But in the next lecture, I'm just gonna walk through a couple of options you have for editors for angular, too, and I'll show you what my favorite is. It's completely free, and it's completely up to you which one you choose. 3. 2 2 Which Code Editor Should You Use?: Okay, let's look at some editors for the code that we are going to write. So far, you've seen me use one editor, but I'm gonna run you through a few options to let you know what's out there. The 1st 1 is quite a popular one, and this is sublime, Tex. And this will also support angular to If I'm not wrong, I haven't actually used it, but I've heard that it does, but you do need to purchase it unless you're evaluating in inverted commas for free. So that's one option sublime text. Another one is atom, and you can download it from Mac, or you can get it for other platforms. And Atom is a pretty good editor. I think it's done by Can't get Hub as far as I remember, it is their own editor, and you can get it for Windows, too. So if we scroll down, you can see how it looks. It looks pretty sweet. It's got lots of things. Obviously, if it's made by the get hub team, it'll have support. Forget Hub, I would have thought. Let me see. No, I can't see anything, but that's an option for you at him. The next one is an oldie but a goodie, which is note pad plus plus. And this comes from the days when people used to use just plain old note pad to write stuff , realized it wasn't quite good enough, so they switched to this. If you're an old school programmer, this might be your cup of tea, but I've saved the best for last. In my opinion, I really, really like visual studio code. And, of course, this is made by Microsoft because it's the same namesake as a visual studio, the big I D. E. That you probably know off. This is the one that I have downloaded and I use on a day to day basis. I've never found anything really wrong with it. It's got loads of extensions that allow you to highlight angular syntax and create shortcuts for typing code, because some angular stuff can be quite a pain to type over and over again. And these shortcuts just make it much easier for us. So the throughout the entirety of this course I'm going to use visual studio code. And if you don't want any sort of ambiguities, then go ahead, download and use this one unless you already have your favorite editor, in which case feel free to use that 4. 2 3 How to Create a Component: Okay, It is time to open our project and start creating our own components. Go ahead and open up your favorite editor. So visual studio code, in my case. And I hope in your case, it will make it easier to follow along. Now, the way visual studio editor works is you have to open a folder so you don't open any files , necessarily. You just open a folder. Now, let me think. Where did I put this? I think I put someone grant documents and go to your energy Tuapse, where you put your first out. Now double click your app and you should see all the files that we looked at previously. Don't select any. Simply select open and they will be open for you in visual studio code. And you'll have a nice less down beside off all of the files and folders in your project. So it's really handy in order to navigate what's going on right now. Just to emphasize, do not edit anything in note modules. We generally leave that alone. E t e. We're also gonna generally speaking, leave that alone. All of our coding in the general sense that's three times have said General now is done inside the source folder and then inside of there. Generally speaking, that's four generals is inside of the APP folder. No, at the moment we have a nap Components CSS, which currently has nothing in it. But we could put styles in there if we wished we have our HTML. Remember, we modified it with this name Variable. And we have our typescript folder. Now, when we create a module, we want to kind of store this inside off its own folder. Now, the 1st 1 the app, components, the APP route, if you like, remember, the output is this selector. We kind of leave in its own first level off the root folder. It's fine where it is. But if I want to create another component, you can imagine with three files per component, this would get filled up pretty quickly. So what we do is we simply create a folder. So up at the top here, there's a little new folder button, and we're going to create another components. Now what shall we create? Let's see, Perhaps this will be an image component, So it's good naming practice toe actually call this folder something like image, component or image. You decide what your your naming. Ah, convention is so it's absolutely up to you, but I might have image dash components in there. I don't like to use just plain old image because that gets confusing when it comes to storing images. So it's always good to be a little bit verbose image death component. Now inside of here, we're going to create a new file and up at the top we have a little selectors. Let me expand it and hit that little new file selector. Now we come to the actual naming convention, so image dot components dot T s. That should be a teacher, and that is a naming convention. Of course, you can see that is the same as apple component dot ts. So go to image component dot ts And guess what? This isn't yet a component. It's just on empty file. Now the way we create components is generally in this order. It doesn't have to be disorder. We export a class called image components, so now we have a class that angular can use. We have to tell angular what kind of thing this is because it doesn't know it just from the name. Well, we want to give this the component type. And to do that we use what it called decorators. And a decorator sits at the top with at components. Now, if I just put my little brackets in for the component, and then my curly braces component has a red squiggly line under it, and if I click it, I get this little light bulb and you won't have this light bulb yet. I'll show you how to get it, but it tells us we have to import the component from angular slash core. So if I click that up at the top, we now have this import component from the court, and that's giving you a clue again of what's happening in angular somewhere. A component has been declared kind of like this, but in order to use it inside of the thing that we're making, we first have to import it into this file. It's a bit like the using statement in C Sharp or the equivalent in Java. I forget the actual name. Is it import as well I forget. I'm sure one of you will tell me so Now we've got this import we can use. Component. We've got this decorator and were saying that this class is a component. Now this concept off a decorator will come across again and again, and there are lots of different types off components. But generally speaking, they are all components. So we've almost got our image components ready. But we're missing a couple off crucial things. And if we look at our AP components dot typescript as a guide, look, we need a selector. We need a template. We don't actually need a style just yet, so we'll leave that out. But these two are required for the components that we are going to display. It's different for other kinds of components, but once we display, we must have a selector and we must have a template. Let's go back to our image components on inside off components. We simply type selector and we put a coat on in. And then in our quotes, we give this a name. Now the selector. If I just call this selector image and then I went to my HTML and I used the image tag it would start to get a little confusing with some of the classic HTML that perhaps you know so convention and angular with a selector is to put something like AP dash image. So this little prequel, that's that's the wrong way head to conflict with the actual Red is right now. This little pre bit before image is a kind of unique identify, which means our HTML won't get confused with the classic HTML that's available for everywhere about So we have our selector now what else do we need? We need our template and their two options a template and a template. U R l Now a template simply means that we can define some HTML in here that defines this image. So defines this component. Rather so rather than creating a separate file, if my HTML is just kind of small, I think keeping all contained in here. So if my HTML is simply a paragraph that says this is an image, I know a paragraph is in an image, so don't pull me up on that. Then there's no point in prettiness in its own file is quite happy to live in here, right? So that is the entirety off, creating a component we have the import statements so we can use component. We have this decorator to tell angular. This class is a type of component. We have a selector so we can use it somewhere. And we have a template. So our component is ready. But angular isn't actually ready to use it yet. This a couple of other bits we have to add to tell angular to go and look for this component. So that's what we'll do in the next lecture. 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.