introduce angularjs app
This commit is contained in:
parent
5d68a04e29
commit
a96e81a951
3 changed files with 69 additions and 0 deletions
16
angular_app/index.html
Normal file
16
angular_app/index.html
Normal 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
15
angular_app/js/controllers.js
vendored
Normal 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
38
angular_app/persons.html
Normal 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> <span>{{person.surname}}</span>
|
||||
<p>{{person.snippet}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in a new issue