introduce angularjs app

This commit is contained in:
Davide Alberani 2015-03-14 17:32:16 +01:00
parent 5d68a04e29
commit a96e81a951
3 changed files with 69 additions and 0 deletions

16
angular_app/index.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<html ng-app>
<head>
<script src="/static/js/angular.min.js"></script>
<title>Event Man(ager)</title>
</head>
<body>
<div>
<p>1 + 2 = {{ 1 + 2 }}</p>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

15
angular_app/js/controllers.js vendored Normal file
View file

@ -0,0 +1,15 @@
'use strict';
/* Controllers */
var eventManApp = angular.module('eventManApp', []);
eventManApp.controller('PersonsListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/persons').success(function(data) {
$scope.persons = data.persons;
$scope.orderProp = 'name';
});
}]
);

38
angular_app/persons.html Normal file
View file

@ -0,0 +1,38 @@
<!doctype html>
<html ng-app="eventManApp">
<head>
<script src="/static/js/angular.min.js"></script>
<script src="/js/controllers.js"></script>
<title>Event Man(ager)</title>
</head>
<body ng-controller="PersonsListCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="id">ID</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="persons">
<li ng-repeat="person in persons | filter:query | orderBy:orderProp">
<span>{{person.name}}</span>&nbsp;<span>{{person.surname}}</span>
<p>{{person.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>