Course: MVA – Single Page Applications with jQuery or AngularJS.

Module 2: Using AngularJS to Create a SPA

Sources: main-app.start.js & index.html

main-app.start – source code

"use strict";

angular.module('MainApp', [
])
	.controller("MainController", function ($scope, $http) {
	
	// $scope.hello = “world”; //debug statement to check correct setup

    var config = {
        headers: {
            'X-ZUMO-APPLICATION': 'ImDNVYiBYFCuENASFmQupAMlDUzamP37'
        }
    };

  	getNames();

  	$scope.people = [];
  	$scope._name     = "Default Name";
  	$scope._location = "Default Location";
  	$scope.user      = {

    name:function(theName){
      if(angular.isDefined(theName)){
        this._name = theName;
      }
      return this._name;
    },

    location:function(theLocation){
      if(angular.isDefined(theLocation)){
        this._location = theLocation;
      }
      return this._location;
    }
  }

  function getNames() {
      $http.get('https://evangelists.azure-mobile.net/tables/people', config)
   .then(function (res) {
       console.log(res);
       $scope.people = res.data;
   });
  }
// add in resource 
 function addName(user){
     //$scope.categories.push(user);
     $http.post('https://evangelists.azure-mobile.net/tables/people', user, config)
       .then(function (res) {
           $scope.getNames();
       });
 }

 $scope.addName = addName;
 $scope.getNames = getNames;

})

index.js – source code

    
{{hello}}
    
 MVA Jquery Tutorial
   
    
Evangelists
    

        
Name:{{person.name}},Location:{{person.location}}
    
    
    
Add an Evangelist
    

    
name:     
        
        
    
location: 
    Add to list