Step 1 : Understanding Modules

Before we begin, make sure to start from level 1. We will use the term depth-x to signify levels.

Move to Depth-1 by running below command:

git checkout depth1

Take a sneak peak in index.html, js/app.js and js/controller.js

We start by specifying data-ng-app=bloodBankApp in index.html file. This directive tells the AngularJS parser to load the bloodBankApp module and attach it to our page. Where is this module defined by-the way? Questions later, continue reading please. 😉

Next is the app.js file. It creates the application module named bloodBankApp. We have a config and a run block attached to our module.

As the name suggests, the config block provide the basic configuration required by our application. Don't worry if you are unaware of $stateProvider service. For now, just remember that it is an alternative, a better one, over $routeProvider service. Both these services handle routing in application.

Our config block basically tells angular that if the URL contains /banks then load the template named listEntries.html(present in views folder) inside an element(in index.html) that has ui-view directive set on it

The run block performs the one-off initialization task which is preparing the list of states to be shown in the drop-down. It uses $http service to make an ajax call, retrieves IndianStates.json from data folder and populates the result in drop-down field meant to select state.