Lesson 1: Angularjs Tutorial and Learning Journey - Construct a basic Angularjs app

Lesson - 1 Angularjs Tutorial a Learning Journey

Angularjs is a relatively new javascript framework for developing single page architectures. You can read more about it here. I would like to document my learning journey here mainly to make sure I can review it later on & in case it can help some other poor soul. I am taking a deliberate, slow approach and learning on the go. I am no expert so take this as you may, IF you are reading this.

Step 1: Setup our development environment

A single page application requires a number of components to be fully functional. On the client side, we will be using AngularJS, on the server side we will be using Node, the database will be MongoDB. We will also be using a lot of cutting edge javascript frameworks on both client & server for object relational mapper (mongoose), building REST services using express on node, Karma & Mocha for unit testing. 

An essential part of development is to use a source control system. We will use the popular git & github capabilities. This tutorial series is going to help (me mainly) us in slowly building a full application stack and also a robust development framework. We will be going through a lot of git commands, so read up on it here.

My Setup: (pre-req, establish your github account)

1. Mac OSX 10.8.4
2. Install mac stand-alone CLT command line tools (mountain lion) 
3. install homebrew - brew is an excellent package manger for osx, similar to apt-get in linux. Run the following command at your terminal prompt to install brew:
1. ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
4. brew doctor 
1. to ensure there are no errors 
5. brew install git 
1. git is the source code version control system
2. git --version -- test to see if git was installed successfully
6. brew install node
1.  node --version -- test node and npm (node package manager)
2.  npm --version
7. MongoDB
1. brew update
2. brew install mongodb
3. mongod&
4. mongo
8. Install nginx
1. brew install nginx
2. http://localhost:8080 should verify if the installation was successful
9. Install sublime text editor

git commands 

1. mkdir -p $HOME/angular-projects/test-git
2. cd angular-projects/test-git
3. touch readme
4. git init   --- initializes the directory to be git managed
5. git add readme  --- adds readme created in step 5 to git
6. git commit -m "whoppa"  
7. git remote -v (list all remote repositories)
8. git remote add  -- this will establish a remote repository in github. follow the setup instructions above
9. git remote rm
10. // git push [alias] [branch]
1. git push origin master

Now that you have git[hub] up and running lets do some coding.

Working versions of the code for this project is @ https://github.com/sunkay/cotd.git

Sample Application 

We will be building a simple app that is a practical need I encountered at my work. "A way to list all the devices we have and establish a check-in/check-out process." We have a limited number of devices and need an ability to version control the devices in the queue.

Here is a map of what we want the app to do. This will be a step by step process as we develop an angular based application.

• Device CRUD (Create, Read, Update, Delete)
• ListDevices
• List all device assets
• Create (addDevice)
• Name, Asset Tag, category (phone, tablet, laptop), details (android, OSVersion etc ), Owning Group (QA, Dev), Image URL, availability (Default: Yes)
• Update Device data
• Delete Device
• checktoutDevice
• Name, CorpId, Date, Time, Device
• Device.available = No
• checkinDevice
• device.available = Yes
• report: list of people with devices
• report: list of available devices by category

Angular here we come ~:-) 

Lets create a simple angular project for our new app. 

The best way to check this out is to download a git tag:

1. cd $HOME/angular-projects
2. git clone https://github.com/sunkay/cotd.git
3. it should create a directory named cotd
4. cd cotd
5. git checkout v1.0
• checkout using tags (v1.0, v2.0 etc) is being used to version control the lessons. You can go to any lesson and build upon the base using these tags. 

Angular Concepts

Angular projects all begin by defining ng-app. This tells angular which portion of the html should be controlled by angular. In our case the entire app is angular based. Angular implements two-way binding which is very slick and reduces a ton of code that we need to write to make everything work. The two-way binding also makes sure updates are reflected automatically, by re-rendering the DOM when the model changes. Read more about angular here.

main.html: (code is shown below)

• We create a basic angular app denoted by ng-app. This will start the angular process to treat this as an angular app and start the goodies
• We define a controller ng-controller='deviceListController" which lists a table of devices with attributes
• It uses ng-repeat to create a list of devices
• Fairly straightforward stuff so-far
• Script Tags are included at the bottom of the main HTML file 

cotd.js: (code is shown below)

1. This is the controller which creates a simple static data & adds them to $scope so that it is available in the template

Code: main.html & cotd.js

-- --

RUNNING THE APP: 

In your web-browser address bar type: file:///Users/your-username/angular/cotd/main.html#

Very simple steps so far. I am sure I will add more explanations to this as we go along. 

This concludes our initial leg of the journey. We setup our environment, we created a git-hub account,  learned some git commands, created a brand new angular app which works!!! Woo Hoo.....