- AngularJS provides $resource module for handling remote data.This module supports REST data interaction.
- In the core of AngularJS $http module provides core functionality for remote data interaction.
- In this Demo, "We are going to access a student data file from a remote url through $resource module in Angularjs and displaying them in a table".
- In my previous post we have learned to configure partials in AngularJS project.In this tutorial we will see how to handle JSON data from a remote URL.
-- For this demo studentData.json file is created in a remotedata folder and deployed it to our local WAMP server.
-- This File can be called by using this URL,
http://localhost/remotedata/studentData.json
- "studentDetailApp.services" is the module name for all the resources."StudentService" is the resource that points to our remote data URL.We are going to use this resource in our controller to get the data.
--- A new resource is created by factory() method.In the below code a resource 'StudentService' is created under the module 'studentDetailApp.services'.
--- $resource provides different method like get, query, save, remove and delete.
---The services.js file contains all the code,
'use strict';
/* Services Module for studentDetailApp application */
var studentControllerModule = angular.module('studentDetailApp.services', ['ngResource']);
studentControllerModule.factory('StudentService', function($resource){
return $resource('http://localhost/remotedata/studentData.json');
});
- The main router module 'studentDetailApp' is provided with the 'studentDetailApp.services' which holds all the resources.
--showStudentTable() method called by click which modifies the URL with /studentsList. --routeProvider determines the appropriate template for the action.
The app.js file contains all the code for it,
'use strict';
angular.module('studentDetailApp', ['studentDetailApp.controllers', 'studentDetailApp.services']).
config(['$routeProvider', function($routeProvider,StudentController) {
$routeProvider.when('/studentsList', {
templateUrl: 'partials/studentListPartial.html',
controller: 'StudentController'
});
$routeProvider.otherwise({redirectTo: '/'});
}]);
- As the service module is present in app context the StudentService is available for access.showStudentTable() method is declared under the scope of the controller and called on the click of the button.get() method is called and when response get available the 'studentlist' property of the response which hold the array of student.$scope.studentList hols the data array from the response and get applied to view.
--- On call of get() method it immediately return an empty array [ ].
---On available of Asynchronous response the scope variable got updated with a full array.
The controller.js file contains all the code,
'use strict';
/* Controllers Module for studentDetailApp application*/
var studentControllerModule = angular.module('studentDetailApp.controllers', ['ui.bootstrap']);
/*StudentController: controller for students*/
studentControllerModule.controller('StudentController', function ($rootScope, $scope, $location, $routeParams,StudentService) {
$scope.showStudentTable = function(pathurl){
$location.path(pathurl);
StudentService.get(function(result) {
$scope.studentList=result.studentlist;
});
}
});
- On available of $scope.studentList with data the compiled partial renders the data in table format. The studentListPartial.html file contains below code for rendering Student Data ,
<table class="table">
<thead>
<tr>
<th>NAME</th>
<th>ROLL</th>
<th>SUBJECT</th>
<th>MARK</th>
<th>AGE</th>
<th>COUNTRY</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="aStudent in studentList">
<td>{{aStudent.name }}</td>
<td>{{aStudent.roll }}</td>
<td>{{aStudent.subject }}</td>
<td>{{aStudent.mark }}</td>
<td>{{aStudent.age }}</td>
<td>{{aStudent.country }}</td>
</tr>
</tbody>
</table>
- The index.html contains below code,
<!doctype html>
<html lang="en" ng-app="studentDetailApp">
<head>
<title>Student Details App</title>
<link rel="stylesheet" href="css/bootstrap-combined.min.css"/>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body class="student-container">
<div class="row-fluid" ng-controller="StudentController">
<button class='btn btn-info' ng-click="showStudentTable('/studentsList')">Show Student Table</button>
<div ng-view></div>
</div>
<!--Required JS Files List :start -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="lib/bootstrap/ui-bootstrap-tpls-0.5.0.min.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
<!--Required JS Files List :end -->
</body>
</html>
- The firebug console before the click event you can see the ng-view is empty.The screenshot is below shows it,
- After the Button is clicked the remote resource is called in asynchronous call.The below screen shot show two URL one for remote data and other is for compiled partial code in firebug console,
- After the response arrived and the data is available in scope the view get changed and ng-view container gets populated with table rows.Below screenshot shows the ng-view with the new table element appended to it,
- The output in the browser will look like,
