diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch05-01-need-for-service-app.js b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-01-need-for-service-app.js
new file mode 100644
index 0000000..4e25b0b
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-01-need-for-service-app.js
@@ -0,0 +1,34 @@
+// ch05-01-need-for-service-app.js
+
+angular.module('notesApp', [])
+    .controller('MainCtrl', [function () {
+        var self = this;
+        self.tab = 'first';
+        self.open = function (tab) {
+            self.tab = tab;
+        }
+    }])
+    .controller('SubCtrl', [function () {
+        var self = this;
+        self.list = [
+            {id: 0, label: 'Item 0'},
+            {id: 1, label: 'Item 1'}
+        ];
+
+        self.add = function () {
+            var n = self.list.length;
+            self.list.push({
+                id: n,
+                label: 'Item ' + n
+            });
+        }
+    }]);
+
+/*
+ NOTE: When we use controllers, they are instances that get created and
+       destroyed as we navigate across the application. Any state they
+        hold is temporary at best, and cannot be communicated to other
+        controllers.
+
+        That's why we'd use "services" instead.
+ */
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch05-01-need-for-service.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-01-need-for-service.html
new file mode 100644
index 0000000..21d17e4
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-01-need-for-service.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <script src="ch05-01-need-for-service-app.js"></script>
+</head>
+<body ng-controller="MainCtrl as mainCtrl">
+
+    <h1> Hello Controllers! </h1>
+    <button ng-click="mainCtrl.open('first')">Open First</button>
+    <button ng-click="mainCtrl.open('second')">Open Second</button>
+
+    <div ng-switch on="mainCtrl.tab">
+
+        <div ng-switch-when="first">
+            <div ng-controller="SubCtrl as ctrl">
+                <h3>First Tab</h3>
+                <button ng-click="ctrl.add()">Add more items</button>
+                <ul>
+                    <li ng-repeat="item in ctrl.list">
+                        <span ng-bind="item.label"></span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <div ng-switch-when="second">
+            <div ng-controller="SubCtrl as ctrl">
+                <h3>Second Tab</h3>
+                <button ng-click="ctrl.add()">Add more items</button>
+                <ul>
+                    <li ng-repeat="item in ctrl.list">
+                        <span ng-bind="item.label"></span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch05-02-log-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-02-log-example.html
new file mode 100644
index 0000000..d516440
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-02-log-example.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as mainCtrl">
+
+    <h1> Hello Services! </h1>
+    <button ng-click="mainCtrl.logStuff()">Log something</button>
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', ['$log', function ($log) {
+                    var self = this;
+                    self.logStuff = function () {
+                        $log.log('The button was pressed');
+                    };
+                }]);
+    </script>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch05-03-simple-angular-service.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-03-simple-angular-service.html
new file mode 100644
index 0000000..74f2a8e
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-03-simple-angular-service.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <script src="ch05-03-simple-angular-service.js"></script>
+</head>
+<body ng-controller="MainCtrl as mainCtrl">
+
+    <h1> Hello Controllers! </h1>
+
+    <button ng-click="mainCtrl.open('first')"> Open First </button>
+    <button ng-click="mainCtrl.open('second')"> Open Second </button>
+
+    <div ng-switch on="mainCtrl.tab">
+
+        <div ng-switch-when="first">
+            <div ng-controller="SubCtrl as ctrl">
+                <h3>First Tab</h3>
+                <button ng-click="ctrl.add()">Add item</button>
+                <ul>
+                    <li ng-repeat="item in ctrl.list()">
+                        <span ng-bind="item.label"></span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <div ng-switch-when="second">
+            <div ng-controller="SubCtrl as ctrl">
+                <h3>Second Tab</h3>
+                <button ng-click="ctrl.add()">Add item</button>
+                <ul>
+                    <li ng-repeat="item in ctrl.list()">
+                        <span ng-bind="item.label"></span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch05-03-simple-angular-service.js b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-03-simple-angular-service.js
new file mode 100644
index 0000000..25786be
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch05-03-simple-angular-service.js
@@ -0,0 +1,115 @@
+// ch05-03-simple-angular-service.js
+
+// this example shows three different ways of defining our own "service"...
+
+// use 'factory()' for functions/plain objects API
+// use 'service()' for JS class object API
+// use 'provider()' for configurable service API
+
+
+// this is a service definition
+function ItemServiceTwo() {
+    var items = [
+        {id: 0, label: 'Item 0'},
+        {id: 1, label: 'Item 1'}
+    ];
+    this.list = function () {
+        return items;
+    };
+    this.add = function (item) {
+        items.push(item);
+    };
+}
+
+// this is a provider definition
+function ItemServiceThree(optItems) {
+    var items = optItems || [];
+
+    this.list = function () {
+        return items;
+    };
+    this.add = function (item) {
+        items.push(item);
+    }
+}
+
+angular.module('notesApp', [])
+
+    // [provider] define item service as configurable provider
+    .provider('ItemServiceThree', function () {
+        var haveDefaultItems = true;
+
+        this.disableDefaultItems = function () {
+            haveDefaultItems = false;
+        };
+
+        // this function gets our dependencies..
+        this.$get = [function () {
+            var optItems = [];
+            if (haveDefaultItems) {
+                optItems = [
+                    {id: 0, label: 'Item 0'},
+                    {id: 1, label: 'Item 1'}
+                ];
+            }
+            return new ItemServiceThree(optItems);
+        }];
+    })
+
+    // [provider] define configuration for provider
+    .config(['ItemServiceThreeProvider', function (ItemServiceThreeProvider) {
+        // to see how the provider can change configuration
+        // change the value of shouldHaveDefaults to true and
+        // try running the example
+        var shouldHaveDefaults = false;
+
+        // get configuration from server.
+        // set shouldHaveDefaults somehow
+        // assume it magically changes for now
+        if (!shouldHaveDefaults) {
+            ItemServiceThreeProvider.disableDefaultItems();
+        }
+    }])
+
+    // [service] define item service as a JS class
+    .service('ItemServiceTwo', [ItemServiceTwo])
+
+    // [factory] define item service factory
+    .factory('ItemService', [function () {
+        var items = [
+            {id: 0, label: 'Item 0'},
+            {id: 1, label: 'Item 1'}
+        ];
+        return {
+            list: function () {
+                return items;
+            },
+            add: function (item) {
+                items.push(item);
+            }
+        };
+    }])
+
+    // ======================================================================
+    // define controllers...
+    .controller('MainCtrl', [function () {
+        var self = this;
+        self.tab = 'first';
+        self.open = function (tab) {
+            self.tab = tab;
+        };
+    }])
+
+    .controller('SubCtrl', ['ItemService', function (ItemService) {
+        var self = this;
+        self.list = function () {
+            return ItemService.list();
+        };
+        self.add = function () {
+            var n = self.list().length;
+            ItemService.add({
+                id: n,
+                label: 'Item ' + n
+            });
+        };
+    }]);