Updated grunt file to use proxy, simple url from angular app is now accesing django api data

client/Gruntfile.js

@@ -16,7 +16,8 @@ module.exports = function (grunt) {
   require('jit-grunt')(grunt, {
     useminPrepare: 'grunt-usemin',
     ngtemplates: 'grunt-angular-templates',
-    cdnify: 'grunt-google-cdn'
+    cdnify: 'grunt-google-cdn',
+	configureProxies: 'grunt-connect-proxy'
   });
 
   // Configurable paths for the application
@@ -75,22 +76,35 @@ module.exports = function (grunt) {
         hostname: 'localhost',
         livereload: 35729
       },
+	  proxies: [{
+        context: '/api', // the context of the data service
+        host: 'localhost', // wherever the data service is running
+        port: 8000, // the port that the data service is running on
+        changeOrigin: true
+      }],
+	  
       livereload: {
         options: {
           open: true,
           middleware: function (connect) {
-            return [
-              connect.static('.tmp'),
-              connect().use(
-                '/bower_components',
-                connect.static('./bower_components')
-              ),
-              connect().use(
-                '/app/styles',
-                connect.static('./app/styles')
-              ),
-              connect.static(appConfig.app)
-            ];
+            var middlewares = [];
+
+            // Setup the proxy
+            middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);
+
+            // Serve static files
+            middlewares.push(connect.static('.tmp'));
+            middlewares.push(connect().use(
+              '/bower_components',
+              connect.static('./bower_components')
+            ));
+            middlewares.push(connect().use(
+              '/app/styles',
+              connect.static('./app/styles')
+            ));
+            middlewares.push(connect.static(appConfig.app));
+
+            return middlewares;
           }
         }
       },
@@ -470,6 +484,7 @@ module.exports = function (grunt) {
       'wiredep',
       'concurrent:server',
       'postcss:server',
+	  'configureProxies:server',
       'connect:livereload',
       'watch'
     ]);

client/app/scripts/app.js

@@ -25,11 +25,6 @@ var myApp= angular
         controller: 'MainCtrl',
         controllerAs: 'main'
       })
-      .when('/about', {
-        templateUrl: 'views/about.html',
-        controller: 'AboutCtrl',
-        controllerAs: 'about'
-      })
       .otherwise({
         redirectTo: '/'
       });

client/app/scripts/controllers/about.js

-'use strict';
-
-/**
- * @ngdoc function
- * @name clientApp.controller:AboutCtrl
- * @description
- * # AboutCtrl
- * Controller of the clientApp
- */
-myApp.controller('AboutCtrl', function () {
-    
-
-    
-  });

client/app/scripts/controllers/main.js

@@ -10,17 +10,10 @@
 myApp.controller('MainCtrl', function ($http,$scope) {
 
 	// Simple GET request example:
-$http({
-  method: 'GET',
-  url: '/api/dummyApp'
-}).then(function successCallback(response) {
-    
-    $scope.books=response;
-
-  }, function errorCallback(response) {
-    
-    $scope.errorMessage = "There was an error fetching data, try with correct API url!";
 
-  });
+$http.get("/api/dummyApp/")
+    .then(function(response) {
+        $scope.books = response.data;
+    });
     
   });

client/app/views/main.html

@@ -4,9 +4,13 @@
   <p>JSON will be shown here..</p>
 </div>
 
-<div>{{books}}</div>
+<ul>
+    <li ng-repeat="book in books">
+      {{ book.title }}
+    </li>
+</ul>
 
-<div>{{errorMessage}}</div>
+<div><h4>ERROR:</h4>{{errorMessage}}</div>
 
 
 </div>

client/package.json

@@ -6,6 +6,7 @@
     "grunt": "^0.4.5",
     "grunt-angular-templates": "^0.5.7",
     "grunt-concurrent": "^1.0.0",
+    "grunt-connect-proxy": "^0.2.0",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-compass": "^1.0.0",
     "grunt-contrib-concat": "^0.5.0",
@@ -27,10 +28,13 @@
     "grunt-usemin": "^3.0.0",
     "grunt-wiredep": "^2.0.0",
     "jit-grunt": "^0.9.1",
-    "time-grunt": "^1.0.0",
-    "jshint-stylish": "^1.0.0"
+    "jshint-stylish": "^1.0.0",
+    "time-grunt": "^1.0.0"
   },
   "engines": {
     "node": ">=0.10.0"
+  },
+  "dependencies": {
+    "grunt-connect-proxy": "^0.2.0"
   }
 }

server/dummyApp/urls.py

@@ -2,5 +2,5 @@ from django.conf.urls import url
 from dummyApp import views
 
 urlpatterns = [
-    url(r'^dummyApp/$', views.book_list)
+    url(r'^api/dummyApp/$', views.book_list)
 ]
\ No newline at end of file

server/urls.py

@@ -18,5 +18,5 @@ from django.contrib import admin
 
 urlpatterns = [
     url(r'^admin/', include(admin.site.urls)),
-    url(r'^/', include('dummyApp.urls')),
+    url(r'^/api/', include('dummyApp.urls')),
 ]