- Angular ui.grid module is external library for AngularJS to create table.
- You can read more detail form the following link https://github.com/angular-ui/ng-grid .
- In this demo, "We will create a table using Angular ui grid and YouTube Google developer video json data".
- $resource is used for create a AJAX request to download the Google developer channel as JSON data.
- The response for YouTube is a big JSON object.From this response we have used category and title to create a new object.
- Below code shows the used of ui.grid module injection in AngularJS application.
<!DOCTYPE html> <html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-resource.min.js"></script>
<script src="//ui-grid.info/release/ui-grid-unstable.min.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<meta charset="utf-8">
<title>AngularJS data grid Example</title>
</head>
<body ng-controller="MyController">
<h3>'ui.grid' module Example</h3>
<div ui-grid="{ data: myData }" class="grid"></div>
<script>
var myApp = angular.module("myApp", ['ui.grid', 'ngResource']);
myApp.controller("MyController",
["$scope", "$resource", function($scope, $resource) {
$scope.myData = [];
var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");
youtubeVideoService.get()
.$promise.then(function(responseData) {
angular.forEach(responseData.data.items,
function(aSingleRow) {
$scope.myData.push({
"category": aSingleRow.category,
"title": aSingleRow.title
});
});
});
}]);
</script>
</body>
</html>
- The output of the above code is displayed in below JSBIN link.
