added in some real ajax

Author: JeremyMorgan

app/components/home/home.controller.js

@@ -8,21 +8,49 @@
 
     function homeController($scope, $http, $window, $q, asyncService) {
 
-            var vm = this;
-
-            //services
-            vm.angularstrapService = asyncService;
-
-            asyncService.getHeroText();
-
-            // from async service
-            vm.HeroHeader = asyncService.retrievedData.HeroHeader;
-            vm.HeroText = asyncService.retrievedData.HeroText;
-
-            // subsections
-            vm.col0heading = "Subsections";
-            vm.col0text = "I may populate this with a microservice! Or have this be a separate view. This template uses Angular UI which is better than using the Angular router in my opinion.";
-
-            return vm;
-       }
+        var vm = this;
+
+        //services
+        vm.angularstrapService = asyncService;
+
+        // get our hero text (hardcoded) 
+        asyncService.getHeroText()
+            .then(function (data) {
+                vm.HeroHeader = asyncService.heroData.HeroHeader;
+                vm.HeroText = asyncService.heroData.HeroText;
+            }, function (error) {
+                vm.HeroHeader = "Error";
+                vm.HeroText = error;
+            });
+
+        // real ajax calls
+        asyncService.getColumnData(1)
+            .then(function (data) {
+                vm.col1heading = data.title;
+                vm.col1text = data.body;
+            }, function (error) {
+                vm.col1heading = "Error";
+                vm.col1text = error.statusText;
+            });
+
+        asyncService.getColumnData(2)
+            .then(function (data) {
+                vm.col2heading = data.title;
+                vm.col2text = data.body;
+            }, function (error) {
+                vm.col2heading = "Error";
+                vm.col2text = error.statusText;
+            });
+
+        asyncService.getColumnData(3)
+            .then(function (data) {
+                vm.col3heading = data.title;
+                vm.col3text = data.body;
+            }, function (error) {
+                vm.col3heading = "Error";
+                vm.col3text = error.statusText;
+            });
+
+        return vm;
+    }
 })();

app/components/home/services/home.services.js

@@ -6,28 +6,46 @@
 
     asyncService.$inject = ['$http', '$q'];
 
-        function asyncService($http, $q) {
-            
-            var factory = {
-                //properties
-                retrievedData: [],
-                getHeroText : getHeroText
+    function asyncService($http, $q) {
+
+        var factory = {
+            //properties
+            heroData: [],
+            getHeroText: getHeroText,
+            getColumnData: getColumnData
+        };
+
+        function getHeroText() {
+
+            var defer = $q.defer()
+
+            factory.heroData = {
+                HeroHeader: "Hello AngularStrap!",
+                HeroText: "This is the AngularStrap home page. This text is being pulled from a service, and can be populated by hand coding the property in the controller, dynamically or via services."
             };
+            // this will always resolve because this is hardcoded
+            defer.resolve();
 
-            function getHeroText() {
+            return defer.promise
+        }
 
-                // this is where we'd put some ajax calls
+        function getColumnData(columnum) {
 
-                factory.retrievedData = {
-                    HeroHeader: "Hello AngularStrap!",
-                    HeroText: "This is the AngularStrap home page. This text is being pulled from a service, and can be populated by hand coding the property in the controller, dynamically or via services."
-                };
+            var defer = $q.defer()
 
-                //factory.retrievedData.HeroHeader = "Hello World!";
-                //factory.retrievedData.HeroText = "This is the AngularStrap home page. This text is being pulled from a service, and can be populated by hand coding the property in the controller, dynamically or via services.";
+            $http({
+                method: 'GET',
+                url: "http://jsonplaceholder.typicode.com" + "/posts/" + columnum
 
+            }).then(function successCallback(response) {
+                defer.resolve(response.data);
+            }, function errorCallback(response) {
+                defer.reject(response);
+            });
 
-            }
-            return factory;
+            return defer.promise
         }
+
+        return factory;
+    }
 })();

app/components/home/views/subsection.view.html

@@ -1,41 +1,27 @@
 <div class="row clearfix">
     <div class="col-md-4 column">
         <h2>
-            {{ctrl.col0heading}}
+            {{ctrl.col1heading}}
         </h2>
-
-        <p> {{ctrl.col0text}}</p>
-
+        <p> {{ctrl.col1text}}</p>
         <p>
             <a class="btn" href="#">View details</a>
         </p>
     </div>
     <div class="col-md-4 column">
         <h2>
-            Heading
+            {{ctrl.col2heading}}
         </h2>
-
-        <p>
-            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
-            Donec sed odio dui.
-        </p>
-
+        <p> {{ctrl.col2text}}</p>
         <p>
             <a class="btn" href="#">View details</a>
         </p>
     </div>
     <div class="col-md-4 column">
         <h2>
-            Heading
+            {{ctrl.col3heading}}
         </h2>
-
-        <p>
-            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
-            Donec sed odio dui.
-        </p>
-
+        <p> {{ctrl.col3text}}</p>
         <p>
             <a class="btn" href="#">View details</a>
         </p>