Getting started with Single Page Apps

How to start using AngularJS to create single page applications, and the difference between the level of code here and the previous example

by Jonathon Mascorella

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="RetrieveAndStore" class="col-xs-12">
  <div class="form-group">
    <label>Enter Name:</label>
    <input type="text" ng-model="name" class="form-control">
  </div>
  <p ng-show="!name" class="text-danger">{{ inputNameError }}</p>
  <span ng-show="name">
    <p>Hello, <span ng-bind="name"></span>!</p>
  </span>
  <button class="btn btn-primary" ng-click="logThis()">
    Save your details!
  </button>
  <div style="padding-top:40px;" class="col-xs-12 clearfix"></div>
 <div class="col-xs-12">
    <ul class="list-group" ng-repeat="names in namesStored">
    <li class="list-group-item list-group-item-success">{{ names.name }} @ <small>{{ names.time }}</small></li>
    </ul>
  </div>
</div>

JavaScript

//An introduction to Single Page Applications
//
//AngularJS - a basic intro
//This is more complex in other environments, but for the purpose of this experiment
//Setup the app
var myApp = angular.module('myApp',[]);

//Create a service - this isn't ultimately necessary but it shows how we can get data in
//and out of a service, like some external datapoint or something similar.
//This one just stores the data to itself, as it is a singleton and maintains state
myApp.service('storageService', ['$rootScope', function($rootScope) {
	this.storageObjectArray = [];
  this.storeName = function(nameObject) {
  	this.storageObjectArray.push(nameObject);
    return true;
  };
  this.getStorageArray = function() {
  	return this.storageObjectArray;
  };
}]);

//Start by creating controllers
//The first controller is for collecting user data. Note the variable and dependency injection
myApp.controller('RetrieveAndStore', ['$scope', 'storageService', function RetrieveAndStore($scope, storageService) {
	//The scope is a local variable for this contoller. It allows the two-way binding to occur
  $scope.logThis = function(name) {
    if($scope.name){ //Only run if "name" is populated
    //notice we havent actually defined this variable? It was actually defined on the view!
      console.log($scope.name); 
      //ng-bind automatically binds data from the view to the controller (on $scope) and back again
      var timeClicked = new Date();
      //We are going to call the storageService and put something into the array. 
      var storeName = storageService.storeName({name: $scope.name, time: timeClicked});
      if(storeName){
        console.log(storageService.storageObjectArray);
      }
      //I am doing this to show use of a second function in the service to populate a list of all names stored.
      $scope.namesStored = storageService.getStorageArray();
    }else{
    	//This just provides feedback to the user if their name is empty - no point in storing an empty name!
...