Filltext.com + AngularJS

Using AngularJS to access FillText.com API

by peterbenoit

HTML

<div ng-app="APP">
    <h2>URL example</h2>
    <div ng-controller="urlController">
        <div ng-repeat="user in users">
            {{user.fname}} {{user.lname}} 
        </div>
    </div>
    <hr />
<h2>JSON Object example</h2>
    <div ng-controller="objController">
        <table>
        <tr ng-repeat="user in users">
           <td>{{user.fname}}</td>
            <td>{{user.lname}}</td>
            <td>{{user.tel}}</td>
        </tr>
        </table>
    </div>    
</div>

JavaScript

var APP = angular.module('APP', []).
controller('urlController', function ($scope, $http) {
    /*this controller uses the url as a single string*/
    $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=5&fname={firstName}&lname={lastName}").
    success(function (data) {
        $scope.users = data
    })
}).
controller('objController', function ($scope, $http) {
    /*this controller uses the config.params object as the request payload*/
    var config = {
        params: {
            'rows': 5,
            'fname': '{firstName}',
            'lname': '{lastName}',
            'tel': '{phone|format}',
            'callback': "JSON_CALLBACK"
        }
    }
    $http.jsonp("http://www.filltext.com", config, {}).success(function (data) {
        $scope.users = data
    });

});