GUI - Angular:: More sample code; this time, services.
Change-Id: I91422074870722e6a58b096d411e64b5a46c7cc0
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
+ });
+ };
+ }]);