/angularjs/

AngularJS – Example App – Part 7

2014-07-16 21:51:52

In this episode we will create directive to display list. But this directive should be prepared in generic way. What this mean ? We don't have a fixed number of columns, each time json file can continent different list.

First we have add new controller and fetch data

app.js

var BACKEND_URL = "http://localhost:8080/app";

var louisApp = angular.module('louisApp',
    [
        //...
        'LouisApp.controller.listgrid',
        //...
        'LouisApp.module.list',
        //...
    ])

louisApp.config(function ($routeProvider) {

    $routeProvider.
        //...
        when('/listgrid', {templateUrl: 'app/tpl/listgrid/listgrid.tpl.html', controller: 'ListGridCtrl'}).
        //..
});

controller.listgrid.js

angular.module('LouisApp.controller.listgrid', [])

    .controller('ListGridCtrl', function ($scope, $http) {

        $http({method: 'GET', url: 'app/mockdata/list/listA.json'}).
            success(function (data, status, headers, config) {
                $scope.listA = {};
                $scope.listA.config = data.config;
                $scope.listA.rows = data.rows;
            });

        $http({method: 'GET', url: 'app/mockdata/list/listB.json'}).
            success(function (data, status, headers, config) {
                $scope.listB = {};
                $scope.listB.config = data.config;
                $scope.listB.rows = data.rows;
            });

        $http({method: 'GET', url: 'app/mockdata/list/listC.json'}).
            success(function (data, status, headers, config) {
                $scope.listC = {};
                $scope.listC.config = data.config;
                $scope.listC.rows = data.rows;
            });
    })

;

listgrid.tpl.html


<div class='"row"'>
<div action-top-bar&quot;="" class='"col-xs-12'>
<h1>List Grid</h1>
</div>
</div>

<div class='"row"'>
<div class='"col-xs-12"'>
<div class='"panel' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>List with 3 columns</h3>
</div>
<div class='"panel-body"'>
<list-widget data='"listA"'></list-widget>
</div>
</div>
</div>
<div class='"col-xs-12"'>
<div class='"panel' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>List with 5 columns</h3>
</div>
<div class='"panel-body"'>
<list-widget data='"listB"'></list-widget>
</div>
</div>
</div>
<div class='"col-xs-12"'>
<div class='"panel' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>List with 16 columns</h3>
</div>
<div class='"panel-body"'>
<list-widget data='"listC"'></list-widget>
</div>
</div>
</div>
</div>

listA.json

{
    "config": {
        "headers": ["Id", "Geographic area", "Capital"]
    },
    "rows": [
        [1, "Alberta", "Edmonton"],
        [2, "British Columbia", "Victoria"],
        [3, "Canada", "Ottawa"],
        [4, "Manitoba", "Winnipeg" ],
        [5, "New Brunswick", "Fredericton"],
        [6, "Newfoundland and Labrador", "St. John's"],
        [7, "Northwest Territories", "Yellowknife"],
        [8, "Nova Scotia", "Halifax"],
        [9, "Nunavt", "Iqaluit"],
        [10, "Ontario", "Toronto"],
        [11, "Prince Edward Island", "Charlottetown"],
        [12, "Quebec", "Quebec City"],
        [13, "Saskatchewan", "Regina"],
        [14, "Yukon", "Whitehorse"]
    ]
}

listB.json

{
    "config": {
        "headers": ["Jul 2014", "Jul 2013", "Programming Language", "Ratings", "Change"]
    },
    "rows": [
        ["1.", "1", "C", "17.145%", "-0.48%"],
        ["2.", "2", "Java", "15.688%,", "-0.22%"],
        ["3.", "3", "Objective-C", "10.294%", "+0.05%"],
        ["4.", "4", "C++", "5.520%", "-3.23%"],
        ["5.", "7", "(Visual) Basic", "4.341%", "+0.01%"],
        ["6.", "6", "C#", "4.051%", "-2.16%"],
        ["7.", "5", "PHP", "2.916%"    , "-4.27%"],
        ["8.", "8", "Python", "2.656%", "-1.38%"],
        ["9.", "10", "JavaScript", "1.806%", "-0.04%"],
        ["10.", "12", "Transact-SQL", "1.759%", "+0.19%"],
        ["11.", "9", "Perl", "1.627%", "-0.52%"],
        ["12.", "13", "Visual Basic .NET", "1.495%"    , "+0.24%"],
        ["13.", "37", "F#", "1.093%", "+0.86%"],
        ["14.", "11", "Ruby", "1.072%", "-0.51%"]
    ]
}

listC.json

{
    "config": {
        "headers": ["a", "b", "c", "d", "e", "f", "g", "h","a1", "b1", "c1", "d1", "e1", "f1", "g1", "h1"]
    },
    "rows": [
        ["1", "2", "3", "4", "5", "6", "7", "8","11", "21", "31", "41", "51", "61", "71", "81"],
        ["1", "2", "3", "4", "5", "6", "7", "8","11", "21", "31", "41", "51", "61", "71", "81"],
        ["1", "2", "3", "4", "5", "6", "7", "8","11", "21", "31", "41", "51", "61", "71", "81"],
        ["1", "2", "3", "4", "5", "6", "7", "8","11", "21", "31", "41", "51", "61", "71", "81"],
        ["1", "2", "3", "4", "5", "6", "7", "8","11", "21", "31", "41", "51", "61", "71", "81"],
        ["1", "2", "3", "4", "5", "6", "7", "8","11", "21", "31", "41", "51", "61", "71", "81"],
        ["1", "2", "3", "4", "5", "6", "7", "8","11", "21", "31", "41", "51", "61", "71", "81"]
    ]
}

Now we can create our new directive

list.directive.js

angular.module('LouisApp.module.list', [])

    .directive('listWidget', function () {
        return {
            restrict: 'E',
            scope: {
                "data": "="
            },
            templateUrl: 'app/module/list/list.tpl.html'
        };
    })
;

list.tpl.html


<table class='"table' table-striped&quot;="">
<thead>
<tr>
<th data.config.headers&quot;="" in="" ng-repeat='"header'>{{header}}</th>
</tr>
</thead>
<tbody>
<tr data.rows&quot;="" in="" ng-repeat='"row'>
<td in="" ng-repeat='"cell' row&quot;="">{{cell}}</td>
</tr>
</tbody>
</table>

GitHub and example