Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Angular2 Quickstart

Kodhus >

In this article I want to talk about how you can easily setup and run angular2 using “jspm” which is the javascript package manager. “jspm” is basically a package manager that helps you load different javascript modules dynamically rather than including them using the traditional way of including them using script

tag in your html. For those who are familiar with npm(node package manager), it’s pretty much the same thing but for frontend javascript modules.

Getting started

ok, Let’s get started.
First things first lets install jspm using npm. if you dont have npm, go to Nodejs and install nodejs which comes with npm.
Then run:

Depending on your operating system you might need to add sudo in front of npm so give it permission to install jspm globally(-g flag).
Then create a directory for your project and from within that directory run:

to setup your project.
finally install the dependencies by running:

You might end up getting errors later on about crypto.js. If so please run

What we are doing is basically installing angular2 and also its dependencies by running jspm install “packagename”
For example you could do

which installs jquery in the project to later be included in our files wherever we need it.

So if you run all of these we end up having a config.js which contains some key value pairs for our application and also a folder called jspm_packages which contains all of our installed packages.

Open config.js and add the following to the file.

Note that you should add it within System.config({});
This basically defines a package called app with defaultExtensions of the files to be ts which stands for typescript.
Also See that we have a path that says “app” corresponds to “src”. This basically means that our entry point of our app is from src folder that we create in the next step.

So now go ahead and create a directory called “src” and add a file called main.ts there. You can see that in the previous section we defined our main entry point of our app package to be main. Since we defined our defaultExtension to be ts, we don’t need to mention it at the end of our file names in the config.js.

Angular2 code

within our main.ts file write following code:

Finally create our main index.html file which loads our app. create a new file in the root directory(same level as src folder) with following content:

So now if you put this on your preferred web server or maybe using a node webserver like http-server which has zero configuration and you can install through npm and then go to your “http://localhost:8000″( or what ever port you have defined for your server) and there you go, you should see “Hello Angular2” in your page.