Browse Source

introduce angularjs app

Davide Alberani 9 years ago
parent
commit
a96e81a951
3 changed files with 69 additions and 0 deletions
  1. 16 0
      angular_app/index.html
  2. 15 0
      angular_app/js/controllers.js
  3. 38 0
      angular_app/persons.html

+ 16 - 0
angular_app/index.html

@@ -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 - 0
angular_app/js/controllers.js

@@ -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 - 0
angular_app/persons.html

@@ -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>