core.js
var actores = angular.module('actores', []);
function mainController($scope, $http) {
$scope.formData = {};
// when landing on the page, get all todos and show them
$http.get('http://localhost/api.php/actor/')
.success(function(data) {
$scope.actores = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
}
index.html
<!doctype html><!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE --><html ng-app="actores"><head> <!-- META --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Angular actor App</title>
<!-- SCROLLS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- load bootstrap -->
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><!-- load angular --> <script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL actores WITH INITIALIZE FUNCTION --><body ng-controller="mainController">
<div class="container">
<!-- HEADER AND actor COUNT -->
<div class="jumbotron text-center">
<h1>Actores <span class="label label-info">{{ actores.length }}</span></h1> </div>
<!-- actor LIST -->
<div id="actor-list" class="row">
<div class="col-sm-4 col-sm-offset-4">
<!-- LOOP OVER THE actores IN $scope.actores -->
<div class="checkbox" ng-repeat="actor in actores">
<label> {{ actor.first_name }} {{ actor.last_name }} </label> </div>
</div>
</div>
</div>
</body></html>
