diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch01-01-hello-world-app.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch01-01-hello-world-app.html
new file mode 100644
index 0000000..82cfec6
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch01-01-hello-world-app.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<body ng-app>
+  <input type="text"
+         ng-model="name"
+         placeholder="Enter your name">
+
+  <h1>Hello <span ng-bind="name"></span></h1>
+  <!-- Note alternate syntax for same thig... -->
+  <h1>Hello {{ name }}</h1>
+
+  <script src="../../tp/angular.js"></script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-01-module-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-01-module-example.html
new file mode 100644
index 0000000..97432e3
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-01-module-example.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Hello AngularJS</title>
+
+    <script src="../../tp/angular.js"></script>
+</head>
+<body>
+    Hello {{1 + 1}}nd time AngularJS
+
+    <script type="text/javascript">
+        angular.module('notesApp', []);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-02-creating-controller.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-02-creating-controller.html
new file mode 100644
index 0000000..566c6dd
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-02-creating-controller.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Hello AngularJS</title>
+
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl">
+    Hello {{1 + 1}}nd time AngularJS
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', [function () {
+                    // controller specific code here
+                    console.log('MainCtrl has been created');
+                }]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-03-hello-controller.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-03-hello-controller.html
new file mode 100644
index 0000000..c206bf8
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-03-hello-controller.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+    {{ctrl.helloMsg}} AngularJS.
+    <br/>
+    {{ctrl.goodbyeMsg}} AngularJS
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', [function () {
+                    this.helloMsg = 'Hello ';
+                    var goodbyeMsg = 'Goodbye ';
+                }]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-04-controller-click-msg.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-04-controller-click-msg.html
new file mode 100644
index 0000000..4a4a22e
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-04-controller-click-msg.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+    {{ctrl.message}} AngularJS.
+
+    <button ng-click="ctrl.changeMessage()">
+        Change Message
+    </button>
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', [function () {
+                    var self = this;
+                    self.message = 'Hello';
+                    self.changeMessage = function () {
+                        self.message = 'Goodbye'
+                    };
+                }]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-05-ng-repeat-example-1.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-05-ng-repeat-example-1.html
new file mode 100644
index 0000000..a262c1b
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-05-ng-repeat-example-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+  <div ng-repeat="note in ctrl.notes">
+      <span class="label"> {{note.label}} </span>
+      <!--<span class="status" ng-bind="note.done"></span>-->
+      <span class="status"> {{note.done}} </span>
+  </div>
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', [function () {
+                    var self = this;
+                    self.notes = [
+                        {id: 1, label: 'First note', done: false},
+                        {id: 2, label: 'Second note', done: false},
+                        {id: 3, label: 'Done note', done: true},
+                        {id: 4, label: 'Last note', done: false}
+                    ]
+                }]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-06-more-directives.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-06-more-directives.html
new file mode 100644
index 0000000..254dd08
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-06-more-directives.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <style>
+        .done {
+            background-color: limegreen;
+        }
+        .pending {
+            background-color: yellow;
+        }
+        .assignee {
+            color: red;
+            font-weight: bold;
+        }
+    </style>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+  <div ng-repeat="note in ctrl.notes"
+          ng-class="ctrl.getNoteClass(note.done)">
+      <span class="label"> {{note.label}} </span>
+      <span class="assignee"
+            ng-show="note.assignee"
+            ng-bind="note.assignee">
+            </span>
+  </div>
+
+    <script type="text/javascript">
+        angular.module('notesApp', []).controller('MainCtrl', [
+            function () {
+                var self = this;
+                self.notes = [
+                    {id: 1, label: 'First note', done: false, assignee: 'Simon'},
+                    {id: 2, label: 'Second note', done: false},
+                    {id: 3, label: 'Done note', done: true},
+                    {id: 4, label: 'Last note', done: false, assignee: 'Fred'}
+                ];
+
+                self.getNoteClass = function (status) {
+                    return {
+                        done: status,
+                        pending: !status
+                    };
+                };
+            }
+        ]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-07-ng-repeat-object.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-07-ng-repeat-object.html
new file mode 100644
index 0000000..43de929
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-07-ng-repeat-object.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+    <div ng-repeat="(author, note) in ctrl.notes">
+        <span class="label"> {{note.label}} </span>
+        <span class="author" ng-bind="author"></span>
+    </div>
+
+    <script type="text/javascript">
+        angular.module('notesApp', []).controller('MainCtrl', [
+            function () {
+                var self = this;
+                self.notes = {
+                    simon: { id: 1, label: 'First note', done: false},
+                    Thomas: { id: 3, label: 'Finished third note', done: true},
+                    alice: { id: 2, label: 'Second note', done: false}
+                };
+            }
+        ]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-08-ng-helper-vars.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-08-ng-helper-vars.html
new file mode 100644
index 0000000..cf872d9
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-08-ng-helper-vars.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+    <div ng-repeat="note in ctrl.notes">
+        <div>First element: {{$first}}</div>
+        <div>Middle element: {{$middle}}</div>
+        <div>Last element: {{$last}}</div>
+        <div>Index of element: {{$index}}</div>
+        <div>At even position: {{$even}}</div>
+        <div>At odd position: {{$odd}}</div>
+
+        <span class="label"> {{note.label}} </span>
+        <span class="status"> {{note.done}} </span>
+        <br/><br/>
+    </div>
+
+    <script type="text/javascript">
+        angular.module('notesApp', []).controller('MainCtrl', [
+            function () {
+                var self = this;
+                self.notes = [
+                    {id: 1, label: 'First note', done: false},
+                    {id: 2, label: 'Second note', done: false},
+                    {id: 3, label: 'Done note', done: true},
+                    {id: 4, label: 'Last note', done: false}
+                ];
+            }
+        ]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-09-ng-repeat-track-id.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-09-ng-repeat-track-id.html
new file mode 100644
index 0000000..23ad7dc
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-09-ng-repeat-track-id.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+    <button ng-click="ctrl.changeNotes()">Change Notes</button>
+    <br/>
+
+    DOM Elements change at every click
+    <div ng-repeat="note in ctrl.notes1">
+        {{note.$$hashKey}}
+        <span class="label"> {{note.label}} </span>
+        <span class="author"> {{note.done}} </span>
+    </div>
+    <br/>
+
+    DOM Elements are reused at every click
+    <div ng-repeat="note in ctrl.notes2 track by note.id">
+        {{note.$$hashKey}}
+        <span class="label"> {{note.label}} </span>
+        <span class="author"> {{note.done}} </span>
+    </div>
+
+    <script type="text/javascript">
+        angular.module('notesApp', []).controller('MainCtrl', [
+            function () {
+                var self = this;
+                var notes = [
+                    {id: 1, label: 'First note', done: false, someRandom: 31431},
+                    {id: 2, label: 'Second note', done: false},
+                    {id: 3, label: 'Finished third note', done: true}
+                ];
+                self.notes1 = angular.copy(notes);
+                self.notes2 = angular.copy(notes);
+
+                self.changeNotes = function () {
+                    notes = [
+                        {id: 1, label: 'Changed note', done: false, someRandom: 4242},
+                        {id: 2, label: 'Second note', done: false},
+                        {id: 3, label: 'Finished third note', done: true}
+                    ];
+                    self.notes1 = angular.copy(notes);
+                    self.notes2 = angular.copy(notes);
+                }
+            }
+        ]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch02-10-ng-repeat-across-elements.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-10-ng-repeat-across-elements.html
new file mode 100644
index 0000000..06a4fa7
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch02-10-ng-repeat-across-elements.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+    <table>
+        <tr ng-repeat-start="note in ctrl.notes">
+            <td>{{note.label}}</td>
+        </tr>
+        <tr ng-repeat-end>
+            <td>Done: {{note.done}}</td>
+        </tr>
+    </table>
+
+
+    <script type="text/javascript">
+        angular.module('notesApp', []).controller('MainCtrl', [
+            function () {
+                var self = this;
+                self.notes = [
+                    {id: 1, label: 'First note', done: false},
+                    {id: 2, label: 'Second note', done: false},
+                    {id: 3, label: 'Finished third note', done: true}
+                ];
+            }
+        ]);
+    </script>
+
+</body>
+</html>