Today we start our journey down the Angularjs 2.0 yellow brick road. I find it a little scary at the moment since I actually started out in Angular 1.2 and followed it through Angular 1.5.9. (By the way, if you have read this far and are wondering if you should learn 1.x before 2.0, stop right here and hit yourself on the nose with a newspaper!). The answer is don’t bother it will hurt your head trying to relate the two.
When I first heard about Angular 2.0 coming out, I was excited. It sounded like they were changing some of the major pain points you encountered in 1.x. Such as namespacing, dependency injection issues and weird results when creating your own directives. It was also starting to become a little bit bloat similar to JQuery among others. It turns out they did fix these issues, the unfortunate things is that it is complete rewrite. In fact, there was a Twitter tutorial for the alpha version and the first thing the guy said was “You are much better off if you never learned 1.x because it is going to be very confusing”. I thought to myself, Seriously? WTF. For .NET developers, it was like when we had to go from 3.5 to 4.0. Not a pretty sight.
Getting Started Settings up the Environment
So I’ll now get off my soapbox about how web development frameworks can be a pain in the butt. Lets start by settings up our environment to compile and Run Angular 2.0 projects.
Install Node and Npm
The first thing you want to do is install Node.js and npm. These two packages add as your package management and web server system. You could think of npm (Node Package Manager) as the combination of Nuget and Package Manager Console. Npm downloads all the necessary files and packages associated with your angular project.
You can download and install them both in one package here. Choose your flavor of Windows CPU (32-bit or 64-bit) and click the installer. The installer takes all defaults and that should work just fine.
Angularjs 2.0 – CLI install (globally)
The next thing that you should do (although not required) is install the Angularjs CLI (command line interface.) This command interface will allow you to quickly get a new project up and running using the ng keyword which you will find out in future tutorials is that start in the keyword of what are called directives. There are many other CLI commands, but this is the most widey used to start up a project.
To read more about the Angular 2.0-CLI click here.
Now, in order to install the CLI, here is the syntax,
npm install -g @angular/cli
Creating a Hello World Project
Now here is the fun part. the awesomeness of your first project creation.
First, change your directory to wherever you want to create your project (obviously make the folder structure first). I did for example, C:\AngularJs_2_0.
Now in that same command window (if you need to change directories, you can do so by typing cd C:\[path to folder].
ng new my-app
The above command is creating a new Angularjs 2.0 application called my-app. Feel free to call it whatever you prefer.
** Note: This does take a while. Don’t worry, it can take up to 5 minutes just sitting there staring back at you. Make it game, see who blinks first :). I always lose
Ok, now it’s time to start the application. first make sure you are inside the application folder the installer created for you. In our case it would be my-app.
This next step will actually serve up the site for you on a random port (although it seems to really like 4200).
If all goes well, you should be able to start your browser and load up your first Angularjs 2.0 application!!
It should look something like this:
So in Conclusion…
We have done a pretty good job so far. Next time, we will dive into what each file means and how to use and manipulate them.
This tutorial covered the following:
- Created the Node and Angularjs 2.0 enviornment for local development.
- Installed the Angularjs-CLI for rapidly standing up angular applications.
Happy Coding!! 🙂