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
+            });
+        };
+    }]);