Angular is a hot trending topic in web development right now. AngularJs is a front-end de-facto open source javascript framework maintained by Google. The fact that Google maintains it shows that its reliable. This post is part of angular series tutorial project that I am working on. As of this writing Angular2 is in beta and will be released soon. The initial part of this series will take the Angular 1.* walk so we get a sense where the story is coming from and where we are going, later on after Angular2 comes out, we will make the transition to talk more about Angular2. This is an interesting journey you don’t want to miss out, I promise we will have fun 🙂

We will jump straight to code, that’s quick way to learn Angular in my opinion and we will try to explain every single step we take so we don’t lose anyone on the way. If you face any issues feel free to comment and we will try to resolve whatever issues you’re facing.


  1. Working computer (PC/MAC). I will be using Mac for this series. This is the only requirement you need hoenstly, so computer + internet that’s all you need.
  2. Node. Assuming you’re working in your local machine.
  3. Editor (any editor of your choice). I will be using MicrosoftVisual Code editor. You can download visual code here.
  4. Code_pen for live demos (optional)
  5. Github. We will keep our source code in case you want to try out few things (optional)

Getting Started

Install Node

You can install node via terminal or just download from here. If you don’t want to hustle through the terminal its easier and safe to just use the link provided. Terminal is not for the faint heart 😉

Installing node via terminal using homebrew

  1. open your terminal
  2. Type $ brew install node
  3. Assuming the installation went through, now you have NPM to handle all your node packages we will use in this series.


Use whatever you want. Visual code is amazing though, feel free to try it out.

Ok that we have all that out of the way let’s do a hello world angular application then we will discuss the details.


Working Examples

1. Hello world
2. Business card



<div ng-app="mainApp"></div>

ng-app is an angular directive where we’re declaring the module in our example.

<div ng-controller="appController"></div>


ng-controller is an angular directive where we’re declaring the controller in our example.

ng-model is another useful directive that we can use to “keep” data between the view and the controller.

Angular selling point is that it makes static html dynamic.

Before we get into more technical details we need to understand basic
building blocks of angular.