AngularJS SPA Pt 1 : Setting Up Angular-Seed

angular-seed is an AngularJS application skeleton template.  An application skeleton let's gives you a boiler plate template so that you don't have to start the application from scratch.  You can get the source code from https://github.com/angular/angular-seed.  Below are the steps to use angular-seed ass your application template for AngularJS.

Step-By-Step Instructions:

1.  Go the page https://github.com/angular/angular-seed

2. Open Git GUI.  if you don't have Git install you can follow this blog.

3.  In the Github angular-seed page copy the "HTTPS clone URL"

4.  In Git GUI click on the link "Clone Existing Repository"

5.  In "Source Location" paste the angular-seed clone URL that you've just copied, then on the "Target Directory" field type in or browse to the folder that you want to store the repository in on your local machine.  Then click "Clone"

6.  Click on "Expore Working Copy" to see the repository on your local machine

7.  As you can see the repository has been cloned in your local PC

8.  Now we want to add npm NodeJs to the node package manager to run, debug, and package the AngularJS, follow this blog to setup NodeJs

9.  In the command line navigate to the angular-seed git in your local machine, then type "npm install" without the double quotes.  This process might take awhile, so don't cancel the process especially if it's the first time you run the command.

10. Now open up the bower.json file then add the bootstrap library to the list of dependencies, by typing in "bootstrap": "~3.3.6" the final markup should look like the following

{
  "name": "angular-seed",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-seed",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "~1.5.7",
    "angular-route": "~1.5.7",
    "angular-loader": "~1.5.7",
    "angular-mocks": "~1.5.7",
    "html5-boilerplate": "^5.3.0",
    "bootstrap": "~3.3.6"
  }
}

11.  Open the .bowerrc file and change the directory to "app/js/lib", the final markup should look like the following

{
  "directory": "app/js/lib"
}

Note: If you need more information on bower you can visit this blog that I wrote about it

12.  After "npm install" command finish executing type in "npm start" in the command line to have nodejs start a local web server

12. Open up the index.html file in the app folder and replace all the instances of bower_components/ path with js/lib/

13.  In the browser type in the http://localhost:8000, you will see that angular-seed is hosted on the web server

Posts In The AngularJS SPA Application Series:

1. Setting Up Angular-Seed
2. Preparing Angular-Seed For The Shopping List Application
3. Refactor Code to Not Use Global Variables (Shopping List App)