Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

1.3 Project Setup

The first step in building our application is setting up the project. Now, initially, when I started this project, you could come here to the Angular homepage, and just click this Get Started link. And we have this nice QuickStart tutorial here, which would give you all the files that you need to copy. However the angular documentation has changed a bit. So what I've done is copied the code that the angular website initially had and I've put it in a git repository that you can get on GitHub. Now this is the repository that has the final code for this application, as you can see we've got the final code up here. But if we going to this Quick Start folder we will have the files that we need to get started. So let's see this in action, what I'm gonna do is go ahead and if you are familiar with git you could go ahead and actually clone this project. However ,just in case you're not I'm gonna go ahead and just download the zip and I'll expand that. And now we'll grab that quickstart folder out on the terminal in just a second. But before we do let me mention that there is one other dependency besides this folder and that is node.js. I'll assume that you're familiar with node and have used it before but if you aren't, go ahead and download the latest version and install it. If you come here to node.js.org, you can just download the latest version for your operating system and it will give you an installer And everything should install just fine for you. But now I'm going to come to the terminal and what I'm going to do is go to my desktop and inside our modern web apps with angular to I'm going to let's copy that Quick Start folder and I'm going to move it here and we're just going to call this folder Projector. All right, and as you can see, we have a couple of different files here. If we look inside the package.json file, we have a couple of scripts, as you can see, that we will use to start up our server and also to run this hype script compiler. But more importantly, we have our list of dependencies here. These are all the different Angular packages That we're gonna need plus a couple of other packages that angular also uses. And then there are also a couple of development dependencies. Yeah, we are actually going to add one more dependency to this West and that is angular material. The angular material website is material design components for angular to applications. This project is still in alpha and so there are a lot of incomplete components. But there are several finished components such as buttons and inputs and cards and so we're gonna use those to provide a unified look for our application. If you wanna find out more about angular material you can go to material.angular.IO. But to add this to our package dot Jason File what we can do is just underline here. That will be at @angular/material. And the version for this. Let's just put in the latest version so that you'll get the latest version of angular material at whatever time you're watching this video. If you find that that doesn't work for you at this time then the actual version number for the one I'm using is 2.0.0-Alpha.9/3. So if you find this doesn't work with the latest version of material you can give that a try. Okay. So that is our package done Jason File. We also have here is a ts config file and ts stands for typescript. Now, we're gonna be using TypeScript for this course, but we're not gonna talk too much about what TypeScript is or does. Basically, TypeScript is a superset of JavaScript that gives you access to extra JavaScript features. The main one is type checking, which will be using a little bit throughout this course. But we can also use decorators which angular will expect of us. Now, if you're not sure what decorators are, don't worry we will get there. The other file we have here is a system.config.js file, and System.JS is the module loader that Angular will use to load different modules, both the module that we write, which is our application itself, and also the angular modules, and other libraries as well and as you can see we have those listed here. Now because we've added an additional module that we want to be able to use inside of our module, we have to add a link for that here. So let's go ahead and add a new line here for angular slash material. And this is gonna have a very similar URL to the one we see here as you might imagine. It's going to start with NPM. Colon and then we just have to have the path to the actual und.js file inside the material directory. Now we can't actually find this URL yet because we haven't installed the node modules yet. So we're gonna come back to that. There's one other thing I wanna change in this file and that is. Right here you can see that our app is within the app folder. I'm gonna change that and we're gonna put our app within the build folder. By default, the angular quick start has the app inside the app folder which is good for your type script files but the app that the system module router is looking for is the compiled JavaScript files. That the typescript compiler is going to create. Now, I don't like having all my JavaScript in typescript files mixed up in the same directory. So what we're going to do is have our app directory before our actual typescript files. And then the bill directory will be the JavaScript that gets created by type script And so what we are doing here is just saying the app module is in the build folder. And let's just change this comment to be accurate our app is within the build folder. Okay. So we'll have to remember to come back to that file a little bit later. But before we can add that URL for angular material, let's go ahead and run NPM install. And so what this is going to do is go ahead and download all of the modules that we're going to need for our angular application. All right, so when that's done as you can see we now have a node modules directory. If we move into node modules and then angular and then material and then let's see what we have here. You can see that right here we have a file material.umd.js. So let's move out of this directory and let's open up our system config and right here we can add @angular/material/material.umd.js and now our application will know where to look for that file. Okay so let's save and close this. Finally, you can see that we have our index.html file here. All right now there are a couple of changes that we need to make here. First of all right here we're doing system dot import app because we changed the folder name to build, we want to change this to build as well. So we're going to import that build directory instead of the app directory. The other thing we need to do here is add a link to the style sheet that angular material expects us to use. So if we look inside of our node modules folder again. Let's Let's list out with a node_modules/angular/material. In here we have a core directory in core we have a theming directory. And inside of theming we have pre-built and in here, okay, we've got a couple of different themes here. Let's go with indigo pink. So, we've got indigo-pink.css. This right here is the for the link element we need to add to our index Study HTML file. So go ahead and copy that and then let's head back to our index.html file and right above the styles that are a put in by default, let's add a new link element here and then let's add the href and I'll just paste that in. There's actually another style sheet that you may want to add I'll just paste this link in here. And this is for fonts.googleeapis.com/icon and the family for this font is Material Icons. We won't be using too many icons in this application but maybe one or two. So let's include this just in case we want to use some icons. Okay and that's our index.html file, our application is pretty much set up but there's one more thing we're going to need. The server that angular suggests we use by default is called the light server and it basically uses the package browser sync to run a server so that every time we make changes to our project files, it will go ahead and recompile the typescript and then refresh the browser for us, so we don't have to be running around doing that manually. However, because we want to have a simple back end to this server, we need to set up a proxy with this server for our back end server, so that we'll be able to access those API routes. Now I've already written this back end server, and we're not actually going to write it In this series of lessons. I will show you the server in a later lesson but it's just a very basic express server. So here I have a directory called Projector-server and in here if I just run node server, this will start up our server on port nine eight seven six. So what we need to do is create a simple bs config file to configure browser sync. So as create a file called bs-config.js. And in here will do module.dot exports and we will export our configuration object the first thing is Ghost mode is gonna be set to False. This is just a simple browser sync setting that would synchronize your application across multiple browsers which makes it much easier to test your application in multiple browsers at once. But if you want to test say, a chat portion of your application which is what we'll do eventually where we have different browsers signed in as different users. Then ghost mode can't really mess it up and get in your way. So we're going to set ghost mode to false. The other thing we need to do here is get some proxy middleware. So we're going to have a proxy middleware package and we're gonna have to install this but this is http-proxy-middleware and then we're going to need a proxyURL. And as I just mentioned we're running our server On port 9867, so we'll just have localhost:9867. So then, inside of our configuration object, let's do a server configuration, and we can just set middleware equal to an array and this array can potentially have several pieces of middleware, but what we're going to do in here. Is called that proxy middleware function and will pass its own configuration object. Actually the first thing we do is pass in a namespace so it'll be a slash API. So any request that comes to our browser syncs server beginning slash API is going to be proxy to this server. And then in this options object, we'll just set the target equal to our proxy Url. So that's all we need for our browser sync settings. So I will save and close that. And now let's go ahead and make a directory called app, which is where all of our main project files are going to be. And this is the set up that we need. This is everything we will need to build our successful angular application. So before we get started in building this application, let's run our servers. Now you can run these servers together. But what I like to do is Open up a split pane here, cuz I'm using tmux or you could just use two separate terminal windows, and I like to run the typescript in one, and the actual server in another. So I'm going to do N.P.N. run. And tsc which stands for typescript compiler and that will be running over here and as you can see that just stopped the problem is tsc just runs at once. What I meant to write was to see calling W which will put this into watch mode so that will run continually as you can see it's watching for changes. And over here I'm going to run npm run lite for lite server and that will go ahead and start up the server. And as you can see it has started the server and it automatically opens it up in the browser. Now as you can see nothing happens just yet because it's looking for a file called main.js but we haven't created that yet. So, now that we have our application set up we're ready to begin building the application. So, we'll get started in the next lesson.

Back to the top