Adding $http connectivity example to the project

app/app.js

@@ -4,12 +4,16 @@
 var mostPopularListingsApp = angular.module('mostPopularListingsApp',['ngRoute',
 	'mostPopularListingsApp.home','mostPopularListingsApp.about','mostPopularListingsApp.login']);
 
-mostPopularListingsApp.config(function($routeProvider, $locationProvider) {
+mostPopularListingsApp.config(function($routeProvider, $locationProvider, $httpProvider) {
 
 	// Declaration of the default route if neither of the controllers
 	// is supporting the request path
 	$routeProvider.otherwise({ redirectTo: '/'});
 
+	// Settings for http communications
+	$httpProvider.defaults.useXDomain = true;
+	delete $httpProvider.defaults.headers.common['X-Requested-With'];
+
 	// disabling # in Angular urls
 	// $locationProvider.html5Mode({
 	// 		enabled: true,

app/components/controllers/LoginController.js

@@ -16,18 +16,55 @@ angular.module('mostPopularListingsApp.login', ['ngRoute'])
 }])
 
 // Controller definition for this module
-.controller('LoginController', ['$scope', function($scope) {
+.controller('LoginController', function($scope,$http,$timeout) {
 
-	// Just a housekeeping.
-	// In the init method we are declaring all the
-	// neccesarry settings and assignments to be run once
-	// controller is invoked
-	init();
+		// Global variables for this controller
+		var responseStatus = '';
+		var userIp = 'not yet retrieved';
 
-	function init(){
-
-	};
+		// Just a housekeeping.
+		// In the init method we are declaring all the
+		// neccesarry settings and assignments to be run once
+		// controller is invoked
+		init();
 
-	this.message = "Login Time!";
+		function init(){};
 
-}]);
+		// Get requestors IP address from httpbin.org
+		function loadUserIp(){
+
+			// Before serving login page we are doing example http request
+			// to web API to verify if login service is up and running.
+			// Using httpbin.org as mock in this case - it returns requestors IP address
+
+			return $http.get('http://httpbin.org/ip').
+		  		then(function(response) {
+		    	// this callback will be called asynchronously
+		    	// when the response is available
+		    	responseStatus = response.status;
+		    	userIp = response.data.origin;
+		    	console.log(userIp);
+		    	console.log(JSON.stringify(response.data));
+
+		    	// assigning userIp to scope
+		    	return $scope.userip = userIp;
+
+		    }, function(errorResponse) {
+		    	// called asynchronously if an error occurs
+		    	// or server returns response with an error status.
+		    	responseStatus = errorResponse.status;
+		    	console.log(JSON.stringify(errorresponse));
+
+		    	// assigning userIp to scope
+		    	return $scope.userip = userIp;
+		    });
+
+		};
+
+		this.message = "Login Time!";
+
+		// // Adding small delay for IP address to be populated before loading the view
+		var filterTextTimeout = $timeout(function() {
+			loadUserIp();            
+        }, 500); // delay 500 ms		
+});

app/components/views/aboutView.html

@@ -1,2 +1,4 @@
-<div>AngularJS starter application</div>
-<div>This is About View</div>
+<div class="center">
+	<div>AngularJS starter application</div>
+	<div>This is About View</div>
+</div>

app/components/views/homeView.html

@@ -1,2 +1,4 @@
-<div>AngularJS starter application</div>
-<div>This is Home View</div>
+<div class="center">
+	<div>AngularJS starter application</div>
+	<div>This is Home View</div>
+</div>

app/components/views/loginView.html

@@ -1,2 +1,17 @@
-<div>AngularJS starter application</div>
-<div>This is Login View</div>
+<div class="center">
+	<div>AngularJS starter application</div>
+	<div>This is Login View</div>
+	<div>You are logging in from this IP: <strong>{{userip}}</strong></div>
+	<br />
+	<form action="#" method="post">
+		Please Enter:<br /><br />
+		<div>
+		    <label for="name">E-mail:</label>
+		    <input type="text" id="name" />
+		</div>
+		<div>
+		    <label for="mail">Password:</label>
+		    <input type="email" id="mail" />
+		</div>
+	</form>
+</div>

app/resources/css/app.css

@@ -1,9 +1,15 @@
 /* app css stylesheet */
 
+body {
+  font-family: Helvetica;
+  font-size: 14px;
+}
+
 .menu {
+  margin: 0 auto;
+  width:350px;
   list-style: none;
   border-bottom: 0.1em solid black;
-  margin-bottom: 2em;
   padding: 0 0 0.5em;
 }
 
@@ -28,3 +34,18 @@
   content: "";
   padding: 0;
 }
+.center{
+  margin: 0 auto;
+  width:350px;
+  padding-top: 6px;
+}
+
+form { 
+margin: 0 auto; 
+width:220px;
+}
+
+input{
+  float: right;
+  height: 10px;
+}

tests/LoginController_test.js

@@ -15,15 +15,13 @@ describe('LoginController Tests :', function() {
     beforeEach(inject(function($controller,$rootScope){
       scope = $rootScope.$new(); // initializa child of global $rootScope
       controller = $controller("LoginController", {$scope: scope}); // Controller expects $scope
-
     }));
 
-
     it('should be defined', inject(function() {
       expect(controller).toBeDefined();    
     }));
 
-    it('should have property next defined', inject(function() {
+    it('should have property message defined', inject(function() {
       expect(controller.message).toEqual("Login Time!");    
     }));
   });