Master Angular 2 - Part 1 - Quick Start | Grant 'Angular' K | Skillshare

Master Angular 2 - Part 1 - Quick Start

Grant 'Angular' K, Crazy about Angular!

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

      3:10
    • 2. How to Install Node JS and Angular 2

      4:01
    • 3. Create an Angular 2 Application the Easy Way

      10:35
    • 4. Run an Angular 2 App and Edit Your First Code

      12:31
    • 5. How to Continue Learning

      1:23

About This Class

Understand what Angular 2 is, install it and start your first project! Yep, Angular 2 easy as that!

Transcripts

1. Introduction to Angular 2: are you guys using angular to? Yet? If you're not, you should be. And let me explain why you should be. First of all, you can make fantastic stuff with it. Look at these examples that I have on made with angular dot com. We have Encyclopedia Britannica, Wolfram l for we have the Weather Channel, we have up work. That's a big one. I didn't know that existed. We have Google partners, and of course, Google would use it because they kind of invented it. And why all these people switching to angular? What's so great about it? Well, angular is simply a JavaScript framework, but what it does is it takes all of those functions we would have to program in JavaScript and makes them much easier to use as a developer. Which means you can make more stuff. You can make more cool stuff. And well, as you can see here, you can make a lot more snazzy stuff. This really is kind of the third. It aeration off the Web Web three point. Oh, if you like. And I'm gonna copyright that because I've just come up with that right now, right? So what's great about angular also is that it is something we used to create a single page application. Now what does that mean? Well, traditionally, if I went up to my address bar, I put an address in and I hit Enter. It goes off to a server, and it fetches some stuff now angular to lets you do that, but usually just for the first fetch. So it goes and fetches this website. Then, when I click stuff like of just going to click this NPR one and look, it expands and we have a video ready to go. We're on a new page. You'll notice up at the top. Nothing changed. Perhaps the address changed, but nothing else If I click back again, there was no loading bar contrast that with when I click back again and we have that loading bar. So what's happening there is that the whole application is downloaded to my computer when I first go to made with angular dot com, and every page I go to thereafter is rendered by angular on my PC. The only reason it needs to go to my server is to get bits off data, and, as you can imagine, that is a lot cheaper to do in Web server terms. Then resending all of this HTML and JavaScript every time I change the page. So that is why angler is so good and why it's been adopted by all of these examples because it really relaxes the load on your server. It makes what we call a single page application. So this entire channel is going to be devoted to teaching angular and all off its related concepts. And I'm going to specify at this point we're going to teach angle to. But when angular three comes out, I'm going to change everything over to that off course. So without further ado, let's install angular and edit our very first code. 2. How to Install Node JS and Angular 2: now. The very first step, of course, is to install angular itself, and the first step off that process is to actually install node Js. Because no Js is the server that's actually going to serve our angular application. It also does a whole bunch off other things. And if you want to know more about no Js, then you can simply go to know Jr stopped. Or as it is, you'll be going there anyway and you'll go to the download section and you will install no Js for your relevant platform. I am on a Mac, so I will get the Macintosh installer and install that now. Don't worry if it takes a while to install. That is perfectly normal. Just go ahead, click it and install it right. Once you have installed it, go ahead and open up a terminal window or a command window on windows. So obviously I am using it, Mac, because I just find it nice to use. But all of the commands are pretty much the same on windows. So if your windows hit the windows key and are to run and type CMD, which is a command window, and you should open up to the same sort of interface you see here. Now, once you've installed it, we're going to check that it's installed by hitting node Dash V, and that tells us the version off node that we are running, which is 6.9 point one. And if you want to make sure that your applications run right, let's go back to know J s and download. I'm just gonna point out that there are actually two packages. You have long term support and the current and generally we want long term support, which is now on 6.9 point one. There is a four point something floating around and you want to be careful not to install that. Make sure it's above six. Now, we also have to check that NPM, which is the node package manager and the node package manager, takes care off lots of package installations for us. It goes and gets the code for us, puts it in our project without us having to do anything manually. It's really, really good. We want to check the version of that. So again, Dash V and that is version for and if again for come back to this website we have. This includes NPM 3.1, which is obviously perhaps incorrect. But I think on my machine I've updated to the load the latest node package manager. So as long as you're above three, you should be good to go Now. I just want to point out that's whenever you're developing your angular applications and things go wrong. Sometimes it helps to update your NPM or update your node. It's self. Just have a search on Google if things go badly for you and find out what the answers are for your problems. Okay, so notes installed N PM's installed. What's next? Well, you can head over to angular dot io and we have some docks in here that include a quick start. There's the address now inside of here. We have our steps to start running an angler application, and I'm just simply going through this list. So if it changes, you know where to go to get the update changes because it does change fairly often. But I'm hoping that will be much less now. And now. Of course, the first thing we look at here is prerequisite. Install what we've already installed. And then we require version four of node or higher. We have six, which is good. And NPM three X or higher. And there we have our commands that I've just shown you how to run. Okay, so our service ready, our node package manager is ready. Now, we are ready to actually start creating angular projects. So that's what I'm going to show you in the next lecture. 3. Create an Angular 2 Application the Easy Way: right. We are ready to create our angular project. But just before we do, we're actually going to go and have a look at that website I told you about. With the address you can see now, angular dot io and it tells you how to create an angular project. And we've already installed node in NPM, which is fine. But now we have some other things like we have to create project folder, create conflict files and install packages. Now, all of these instructions take us through what we have to do very nicely, but they don't really kind of explain what's going on. So I'm just gonna give you a quick overview, and then I'm gonna show you a much quicker way to do it. So, first of all, we have to create this package, Doc, Jason, file. And this tells us what kind of dependencies we need for our projects. Which things we need to have in there. And if we scroll down, this website gives us a few of them. So we have a name and we have a version, and that's of course, we set ourselves. We have some scripts that define how we run out server. I wouldn't worry about this for now. We have licenses, So this is important. If you don't people to copy or code. We have some dependencies, which tells us we need angular stuff. We need common compiler core forms. All these kinds of things. Don't worry about them. For now, I'm just pointing out that they exist. We need lots of things like typescript, light server, etcetera, etcetera. And then, of course, we have another file. Ts conflict dot Jason. And this tells us how the typescript compiler generates JavaScript from the projects files . Now what does that mean? Well, it means that we're actually writing in typescript, which is a much nicer way to write Java scripts more of a classical programming way. And as we start to create applications, you'll see how it's much easier than actually using JavaScript because JavaScript, to me, has always been kind of free form with no structure. Typescript gives it that structure that I think it really needs to take off for the classical programming crowd. Then what else do we have? We have the system conflict dot Js, and this just sets a bunch off global's through this function global here. Now, don't worry about any of this. You don't have to create any of this. There was a time a few months ago when you would have had to create it and then actually install your packages. But as of now, we are going to use the brand new way off, creating angular two applications through this command line. Now, most things we create through the command line use what's called a command line interface, which is just a zit sounds. We use the command line as an interface. Angular has a brand new command line interface, and here we have it. If we go to cli dot angular dot i o we can use the Angelus CLI and here we have the very first command journey to see NPM install Dash G Angular Dash C L. I. So let's go to our command line and let's do that NPM install on this simply says, Use the note package manager to install something and install what? Well, we want to install the angular CLI, but you'll notice there is a dash G and this means globally. Now, if you don't use Dash G, you can only use this inside of your own project. When you create a new project, you need to reinstall the command line interface. When you use Dash G. You're telling your system installed this everywhere, so every application can use it. So Dashti means global, and then we take the name off the package. Now, the note package manager is clever enough to know where to go to go and get the angular cli . So when you hit enter, that should go off, disappear and retrieve it for us. I stopped recording there because I just wanted to cut it for you to make it faster. But I've turned it back on. Wells were installing because you know what I saw? I saw. Well, we have enough Samaras now. But if I scroll up, we have these warnings missing, right access and a whole lot of warnings. And if this happens and you also get a whole bunch of errors, then you probably have to run this command as the super user so pseudo and then you have to enter your password when you do that which I am doing now. Now, if you're on Windows, you shouldn't get that issue. You might get a pop up that says it needs admin access. But if you do get that issue when you open up your command line right, click it and click run as administrator and then you should be fine, right? And once complete, you should have no errors. You might have one or two warnings, but generally speaking, that is OK, so I got a couple warnings there, and it helps sometimes to go through them. Just so if you have problems later on, you know that those warnings did pop up, but we should be fine as it stands. So once that's installed, we need to create our new, angular app on instead off running through all of this stuff, creating the files by ourselves, which is perfectly fine to do. What we're gonna do is use the angular CLI to go n g nu and the name of UNEP and what I'm gonna do fear is first, I'm just gonna go to the project like let me see where I'm gonna put this, perhaps in documents, so seedy documents to go to the folder where you want to store this, going to see what's in there. Let me make a directory off N G two perhaps, And then I'm going to go into that directory energy to APS, and that directory should be empty. So what I've done there is just simply creates director. Of course, you could do this manually. That's perfectly fine. So I'll go to their later No, we can use the command and G as this website refers to N g New and we can create an app. So let's just call this first dash app three hit Answer. The command line interface is going to set up everything that we need. See that it's created all of these files that we need. So if we now go to that directory, I'm gonna show that in the enclosing folder we have now our first APP folder, which is in the energy Tuapse. And we have all of these files. We have that package file. Remember that it asked us to create and a couple of other things don't worry about what they are. This is our basic angular to application. Remember, it's all javascript and typescript. So in order to edit these files and stop playing around with stuff, well, this hasn't quit yet. Sometimes it does this, it gets a little bit stuck or while I think it's doing is actually installing things for us . So let me just go away for a minute and let it do what it needs to do. Okay, that has finished installing stuff. So if we look in our folder now, we have now something called a Node Modules folder. And what our angular command line interface did was it got all of those dependencies, all of those bits of javascript that we need to run our angler to out. It went and retrieved them automatically for us, and they're all stored inside off the node modules folder. And as you can see, it starts with, of course, angular. We have the CLI. We have angular tools and we have a turn of stuff. We will never, ever go inside this folder or use it unless it's an extreme case, in which case we need to fix a bug. But I promise you will never need to do that right. So that has. It's really simplified our life in installing an ankle to up. It's now ready to go. So how do we run it? Well, APS usually run on a local server. If we're developing on our machine and the local server is stored at local host at the moment, it tells us there is no such thing. And that is because we need to start our local host with this command called N G serve. So, first of all, we need to go into our first APP folder and then type N G serve and angular or the command line interface is going to go and look for all of our angular stuff. Compile it together and serve it out and tell our computer when you go to local host, go to this Web server that I've created. So there you can see that command Angular Live Dev server is running on this address on that address is running on Port 4200 so your port can be anything. You can change that if you want, but there's no need to at this point, let's go to local host 4200 hit Enter and Walla. Our app works so thanks to the angular cli were have had to do no manual rubbish. We've just created our angular wrap. We have served it up in our no Js server, which is currently running. So that is how you create an angler to up. And that is how you run it on a server. Now, much later on in other sections, I'm going to show you how to install this on a real live server. But the whole process you've seen here off starting the server is pretty much the same. So everything just works how it should in the final lecture in this night in this section, I'm just going to show you some very, very basic ways off editing a couple bits and pieces in Europe just so we can get a flavor of feel for what it's like to actually build and create an angular to map. 4. Run an Angular 2 App and Edit Your First Code: okay, in the final part of this section, we're just going to do a little bit of editing. Remember, we have our angular to app ready and running on local host and Port 4200. Our APP works. It's a bit plane at the moment, so let's change that. Let's go to the folder where our app is stored and you'll notice that all of these files have. They have unending off different sorts, but basically they are all text files, so you can use any text editor to edit them. Now, I've got a whole bunch installed on here and you might have your favorite. And in the next section, I'll show you which one I would prefer for you to use because I use it. And I think it's great, and it really helps narrow down the errors that you might have. But for now, we're just going to use any text editor you have go to your APS folder and then look inside Here We have thes folders e to E. That doesn't sound like it's our app. We have the modules folder, remember? I said, Don't touch stuff in there. We have the package Doc Jason folder, which contains all of the stuff we need for our app. And we also have this folder source. Now, if you go in there, what you're going to see is three other folders, perhaps more, perhaps less, depending on your version. We have this icon and that icon. If we go over here and we click in our address bar up at the top just before the address, we can see that icon. So this is giving us a clue that our APP is created from this section because that's where the image is. Basically is another clue in that we have an index dot html file and if I open that file with just a plain text editor or we haven't, there is loading. Perhaps if I open this with let me try visual studio code, Let's see what that gives us. Uh, we have a basic html think and inside, if you we've got a whole bunch of tags which is just plain old html, we have ahead. You have the HTML we have the doc type. Clearly, this isn't a whole app, so I'm gonna close that. Let's keep looking at this now. If he If you know about Web development, you know that the index always gets loaded first. And if I reopen that actually and show you something, the index gets loaded and our entire angular app isn't is located inside off this app route tag. So everything we're going to create is contained inside off uproot. That's just something to note for now. So what, he's actually contained in there? Well, our app, that's click. And we have a whole bunch of strangely named files in here. But what their names doesn't really matter because I want you to notice a naming pattern that happens in here. We have an app component, Doctor. Yes, We have an APP component dot html and an app component dot C s s. Now, if you're familiar with Web development, this is like javascript, but it's using typescript. Hence the TS ending HTML is kind of a layout hypertext markup language and CSS is, of course, the styling. So you can already start to see some familiar elements of Web development. We have a styling page, we have a layout page and we have the actual business part off the page. So let's open this out components dot typescript again. We're just looking at stuff for now to see what's happening. So you can use any text editor first. We have all of this very strange looking stuff. And what do we have up here? Well, if you're familiar with any other kind of object oriented programming, we have this import statement and this brings in the component class. If you like from angular and a component is a fundamental part of angular, you can think of everything we're going to make as components. They're kind of like Lego blocks, and we're gonna put all those Lego blocks together in the applications that we build. No, this is our very first component to the app component and notice we have something called a selector, which is the APP route. Now, where have we seen this before? Well, we actually saw this inside off this index dot html file. So angular uses what's called a selector to load up whatever we've created inside of attack . And that tag in this case is at root, which is in the index dot html file Then, of course, each component needs a template and this template is located in this file. The app components dot html and each template needs a style which is create which is located in the C. S s corresponding file. So all together, what we've said here is we have a component. This is how you referenced the components by using a tag called Uproot. The template for this component is located in the component dot html file and the style for it is contained in the component dot CSS. This is just kind of a convention and we're going to get very used to this cause we'll keep re creating this scenario for all the components we create. Finally, we have an export class called APP component with a title equals app works. Now where have you seen that before? Well, it's our main page at works, So if I just draw a little picture for you off what's happening here? Our APP is loading up this HTML file and the HTML file. Come on, load it up is looking for the APP route. So what it does is it finds the app fruit, which is this app component. So if I just show you that in the file structure, its in app and it is These three files whips to three. So it goes off and it finds it inside off app component. Doctor. Yes, and says, Look, I've got the uproot. Then it asks for a template which we provide it. We give it the app components dot html which is here, and we give it some styling, which is optional. You don't need to have that. Then we have this very important part which I'm not going to address the export. And when we say export and angular were telling everything that this is available for use. If we don't have export, our syntax will still be valid. But the application won't know about our app component, and it won't know about the apurate tags that will get an error. And inside of here, we've just done something very simple, which is titled Equal App Works. Now, you might be wondering, how does that title get transferred to our application? Well, this is where we're gonna actually open up the html file open with visual studio code. And look at this inside off to Curly Brace. It's important to notice there are two. We have this title and this is the beauty of angular. It's linking this variable title with whatever is contained in the class. So inside of this export class, I can drop in and name variable, for example, and just serving Grant, Save that And inside of here, underneath H one, I can give it a paragraph tag and what's not Grant. We want to put in a name, and I can close off my paragraph tag. Now I'm going to save that. And then I'm gonna go to my terminal and look, Our terminal picks up that things have changed and it re compiles for us, which should re compile and tell a browser. We have something new, and there we have it at works and Grant. Okay, congratulations. You've edited your first angular to code E. Excuse me. Now I can appreciate There was a lot of information there. If you're new to this and angular, it doesn't work. Like most other frameworks I've come across. But once you get used to it, it's pretty easy to actually work with very quickly. So just to make sure I've got the base concepts inside your head, I'm just gonna run through a couple of those things again. I'm gonna go to my finder, and I'm gonna just go over it and say we have our index file. And inside of that index file we have It's kind of like a usual html file because this is the 1st 1 that gets loaded. We have our apple route, Tague, and this contains everything in our app. I'd advise you to always leave this as it is. So our angular system goes off and looks for the app fruit. And when it goes off and finds it inside one of these components which has bean exported, so we know it's there and it finds this selector the uproot, it then loads up a template. And this styles, if we have them, it loads up everything we need inside off the class. And if it needs to, it links up some variables like title and name. And then it combines all of that and outputs something that we can then read in our browser . So that is a very quick, very basic overview off how angular to does what it does. And just before I finish this, if you recall in the old days off web development and I just use this. Don't write in your one. I'm just writing in mine. In the old days, you would have to do what's called Traversing the Dom the document object model. So if you had something like an H one in the old days of development, you would say the I d was equal to title. And then somewhere down in your javascript file, you would then have to have some kind of function like your J query functional whatever it was to go and find, you know, item called title. And this ladies gentleman is extremely inefficient because you have to go all the way down this tree of elements. You'd have to search everything until you come across this item of title and then you would make that equal to whatever your variable waas And I know I haven't used proper language here, but you get the idea so that traversing the dawn is incredibly expensive to do in terms of processing power and slows things down. And what angular does is behind the scenes. It registers all of these variables. All of these dom elements if we need them to be registered and it makes them freely available for use by our JavaScript or typescript program, and that means we get enormous enormous benefits in terms of performance. So angular APS are really, really fast and angular Tuapse even more so. Right, So that concludes this model. I hope you're going to join me on the next module when we're going to dive a little bit deeper and create our very own component. And once you've done that, you're going to have the very basic building blocks off, being able to create anything that you can imagine on the Web. 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.