Angularjs 2.0 Journey Starter Guide Part 1 – Angularjs CLI

Although usually, this blog is about .NET development and pain points I have found over the years, I am starting to broaden my horizon and start doing a little more JavaScript / front end development. I know that’s a little sacrilegious for a back end developer, but the world is changing and alas, so should I. Don’t worry though, I will still do plenty of .NET tutorials and examples of the day to day grind, I am just going to mix in these new technologies as we go along.

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,

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].

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:

app works screen

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!! 🙂

One thought on “Angularjs 2.0 Journey Starter Guide Part 1 – Angularjs CLI

Leave a Reply

Your email address will not be published. Required fields are marked *