- Read Tutorial
- Watch Guide Video
In this guide we're going to walk through how to set up our file structure so that we can start working with angular.
The very first thing I'm going to do is where ever I want to place all of my projects I'm going to navigate there in the terminal. If I type in ls it will show that I'm at the exact code spot where I want to be. Yours can be anywhere. I like to put all of my code for tutorials in a path called code devcamp tutorial so this is where I want to be. You can put yours on your desktop or anywhere on your system that you want.
Once you're there create a directory and this directory is going to store all of the applications we're going to create in this course. I'm going to create a directory called angular-rails.
mkdir angular-rails
Then I'm going to change into that directory. Now if I type ls you can see that nothing's here. Inside of this we're going to have multiple applications. We're going to have our front end application. We're going to have all of the various rails micro service applications. All of them in this one spot so that we can know exactly where they are, navigate to them, that kind of thing.
We're going to start off by creating our angular application first. Type...
mkdir freelance-camp-fe
and that fe stands for front end but you can put anything you want. Now cd into that. And now we're at the spot where we're going to create our files. Hit clear.
I want to actually open this up in sublime. If you have set up your subline shortcut then you can type in
subl .
and this will actually bring sublime up in another window just like this.
If you're wondering where you can do this I'm going to show you. Type in sublime text terminal shortcut. It's been a while since I've done this but here you go.
So the very top one is OSX command line and here it will give you all of the various commands you'll need for being able to install it. If you run this command right here
ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~/bin/subl
then it is going to allow you to do that exact thing that I just did. It's very helpful and can give you a nice quick start.
Talking about QuickStart, I have included in the show notes a link to the QuickStart guidelines and the documentation for angular.
https://angular.io/docs/ts/latest/quickstart.html
The reason why I am giving you a link to this documentation, where I'm going to base our installation guide off of this, is because if I simply gave you the source code by itself then that's fine if you're following along in the guide right now or close to when I filmed this tutorial. However one of the hardest things to work with in angular are all of the version changes and the dependencies and things like that. So I don't want to give you a tutorial that may be obsolete in a few months. So instead I want to point you to the spot where it's going to continually be updated because the Google team and the angular team will update this link and this file on a real time basis. Say for example when the compiler changes right here and it changes to 3.0 they're going to update it. If I was simply giving you some kind of hard coded files to follow along with then it wouldn't know when to change.
So very first thing is navigate to https://angular.io/docs/ts/latest/quickstart.html and like I said I'm going to put a link to this in the show note so you can go right to it and we're going to create three files and we're going to put this code inside of them. So the first one is package.json I'm going to copy this code and open up Sublime Text. Right here I'm going to right click on the folder. We're in the freelance-camp-fe Click new file and hit save.
This file's going to be called package.json
and inside of it I'm going to paste in all of this code and the only thing I want to change is the name because this application is not called angular QuickStart. This one's going to be called freelance-camp-fe. We are going to keep it at version 1 and nothing else here needs to change. After we've copied all this code over I'm going to walk through what all this is doing so don't worry if this is confusing because it's a lot of things.
Next thing is tsconfig.json and if you followed along in the typescript series that I put out then you are going to know that this is pretty familiar. Because angular was written with the typescript programming language which is a superscript of javascript. The tsconfig is your typescript configuration file. These are rules associated with the compiler mainly so that the application will follow, essentially like a certain contract and will have things like, which version of javascript it's going to target, and what the modules are going to be, the source map, working with decorator metadata, things like that.
So I'm going to hit copy code. This is called tsconfig. Right click to create a new file. tsconfig.json paste it in and save it. And the last one is going to be systemjs.config.js So what this essentially is going to do is to be the system configuration file for the application. So this is going to be what wires up everything. It's going to bring in all of the dependencies. It by itself won't bring the dependencies in but essentially what it does is it maps them. It gives your application the ability to know where the compiler is at and where the browser modules are. Different things like that.
So I'm going to copy code. This is systemjs.config.js. Right click and save. Paste all of this in. There's nothing that we need to change on this side of it. So that's all we need to do.
Now I want to return back to this package.json file because this is very important. This is where you're going to be bringing in all of your various dependencies and outside libraries. Think of what this is similar to, because as I said, one of the prerequisites for this course was going through a Rail's course. Either mine or someone else's. So if you've gone through that then you know what a gem file is. A gem file in a Rails application is where you can bring outside libraries into the application, and that's exactly what the package.json file is. This and it also gives a few more pieces of information such as the name, version of various scripts to start off with, what server you're going to be using, things like that.
Here in your dependency list are all of the things we want to make available in the application. We want the common items, we want a compiler, we want the core items, and these are going to be libraries we're using throughout the entire course. We're going to work with forms. HTTP to communicate with outside services. This is how we're going to communicate with our outside rail services. Platform browser and platform browser dynamic. These allow us to run our applications in the browser. If we were building say a mobile application we would bring in different dependencies specific to working with iOS or to Android. Next on the list is router and router let's us have our application go from one page to another. Then there are a number of other libraries, mainly ones that simply help the application work the way it needs to. That is how the package.json files configured and what the purpose of it is. If you ever bring in any additional outside libraries This is where you would add them.
This is directly connected to NPM. To run this you go to the terminal, type in
sudo npm install
Make sure you are in the same directory that those files are at. Just to be certain make sure you type in ls and you should be able to see our three files.
and now type in sudo npm install. This is going to go through this package.json file and then it's going to wire it up to NPM. NPM, the node package manager, is going to find all those dependencies and it's going to download them onto your system and install them into the application so that you can work with them.
I'm going to hit return. It's going to ask me for my password and then it's going to install this.
I'm going to pause the video because I've had this process take, in some cases, up to a couple hours depending on how many things are being installed. I've also had it only take about four or five minutes. Either way it's going to take a little while especially depending on how long your system is. One thing you will see is a number of warnings and that's perfectly fine. The NPM manages so many different packages it's going to run into items that are deprecated and things like that. Don't let them bother you. The only time you ever have to worry is if you get an NPM error. Many times they'll happen if you simply type in npm install and not put sudo because you need to have the root or sudo privileges in order to have this work. So I'm going to hit pause on the video and I'm going to come back after the installation is complete to make sure that it all worked properly. So I'll see you then.
So that ended up taking about 30 minutes I believe. I didn't time it exactly but it is somewhere in that range. So if your terminal looks something like this and has a tree structure here then that means that everything worked properly.
And if you're wondering what these are, these are all of the files that are brought in when we ran npm install. If I open up Sublime Text you can see that now we have this new directory called node_modules.
If I click on this you can see all of the various modules that are brought in to make this possible. It is not a good idea, and it's definitely not recommended, to go in and edit any of these files. Any time that we want to interact with these we have to update the package.json file. Say that we want to upgrade one of the versions, we would upgrade it here and then run npm install and then it would go and update all the items here. The reason is because if you went and changed one of these items and you didn't realize that there was something else depending on it or something like that then it could cause some bugs and they're definitely ones that would be hard to figure out. That's the reason why you have your package.json file. It allows you to install all of your various dependencies and things like that.
So now that you have all your node modules installed we can start building the angular part of our application.