Angular Heros

by ncapito

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-resource.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainController">
         <h1>Superheros</h1>
        <div class='example'> 
            <pre ng-if="data.length">{{data[0]|json}}</pre>
             <pre ng-if="data.length">{{first|json}}</pre>
        </div>
    
        <ul ng-repeat="hero in data">
            <li>{{hero.name}} <a ng-href="{{'http://character-list.herokuapp.com/api/characters/' + hero.id}}" target="_null">Details</a></li>
        </ul>
    </div>
    <div>

JavaScript

angular.module('services', ['ngResource']).
factory("Heros", function ($resource) {
    var clazz = $resource(
        'http://character-list.herokuapp.com/api/characters/:id', {id: '@id'}, {
        query: {
            method: 'GET',
            transformResponse: function(data, headers){
                data = angular.fromJson(data);
                console.log(data);
                var result = [];
                angular.forEach(data.results, function(item){
                    result.push(new clazz(item));
                });
                return result;
            },
            isArray: true
        }
    }

    );
    return clazz;
});

var app = angular.module('myApp', ['ngResource', 'services']);


app.controller('MainController', ['$scope', 'Heros', function ($scope, Heros) {
    $scope.log = function(item){
         console.log(item);   
    }
    $scope.title = 'Transform Test';
    Heros.query(function (data) {
        $scope.data = data;
        $scope.first = data[0].$get();
    }, function () {
        console.log('FAILURE');
    });
    

}]);