GUI - Angular:: More sample HTML for form widgets etc.
Change-Id: Ibfc83aae8282e3d99b53a03ab0e13ef2579e990c
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-01-simple-ng-model.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-01-simple-ng-model.html
new file mode 100644
index 0000000..5c8a4b1
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-01-simple-ng-model.html
@@ -0,0 +1,28 @@
+<!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">
+
+<input type="text" ng-model="ctrl.username"/>
+You typed {{ctrl.username}}
+
+
+<script type="text/javascript">
+ angular.module('notesApp', []).controller('MainCtrl', [
+ function () {
+ var self = this;
+ self.username = 'nothing';
+ }
+ ]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-02-simple-ng-model2.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-02-simple-ng-model2.html
new file mode 100644
index 0000000..d02909f
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-02-simple-ng-model2.html
@@ -0,0 +1,40 @@
+<!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">
+
+<input type="text" ng-model="ctrl.username"/>
+<input type="password" ng-model="ctrl.password"/>
+<button ng-click="ctrl.change()">Change values</button>
+<button ng-click="ctrl.submit()">Submit</button>
+
+
+
+
+<script type="text/javascript">
+ angular.module('notesApp', []).controller('MainCtrl', [
+ function () {
+ var self = this;
+ self.change = function () {
+ self.username = 'changed';
+ self.password = 'password';
+ };
+
+ self.submit = function () {
+ console.log('user clicked submit with ',
+ self.username, self.password);
+ };
+ }
+ ]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-03-simple-form.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-03-simple-form.html
new file mode 100644
index 0000000..54a7ea4
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-03-simple-form.html
@@ -0,0 +1,45 @@
+<!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">
+
+<!--
+ - Note, using a form has the advantage of reacting to RETURN triggering
+ - the submit, as well as pressing the submit button.
+ -->
+<form ng-submit="ctrl.submit()">
+ <input type="text" placeholder="username" ng-model="ctrl.user.username"/>
+ <input type="password" placeholder="password" ng-model="ctrl.user.password"/>
+ <input type="submit" value="Submit"/>
+ <p></p>
+ <textarea cols="60" rows="5" ng-model="ctrl.user.notes" placeholder="Notes">
+ </textarea>
+ <p>
+ NOTES:
+ <div>
+ {{ctrl.user.notes}}
+ </div>
+ </p>
+</form>
+
+<script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+
+ self.submit = function () {
+ console.log('User clicked submit with ', self.user);
+ };
+ }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-04-two-forms-databinding.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-04-two-forms-databinding.html
new file mode 100644
index 0000000..9cb4961
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-04-two-forms-databinding.html
@@ -0,0 +1,44 @@
+<!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">
+
+<form ng-submit="ctrl.submit1()">
+ <input type="text" placeholder="username" ng-model="ctrl.username"/>
+ <input type="password" placeholder="password" ng-model="ctrl.password"/>
+ <input type="submit" value="Submit"/>
+</form>
+
+<!-- Better way of structuring the form data -->
+<form ng-submit="ctrl.submit2()">
+ <input type="text" placeholder="username" ng-model="ctrl.user.username"/>
+ <input type="password" placeholder="password" ng-model="ctrl.user.password"/>
+ <input type="submit" value="Submit"/>
+</form>
+
+<script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+
+ self.submit1 = function () {
+ // create user object to send to server
+ var user = {username: self.username, password: self.password};
+ console.log('First submit: ', user);
+ };
+ self.submit2 = function () {
+ console.log('Second submit: ', self.user);
+ };
+ }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-05-form-validation.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-05-form-validation.html
new file mode 100644
index 0000000..3501adb
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-05-form-validation.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">
+
+<form ng-submit="ctrl.submit()" name="myForm">
+ <input type="text"
+ placeholder="username"
+ ng-model="ctrl.user.username"
+ required
+ ng-minlength="4"/>
+
+ <input type="password"
+ placeholder="password"
+ ng-model="ctrl.user.password"
+ required/>
+
+ <input type="submit"
+ value="Submit"
+ ng-disabled="myForm.$invalid"/>
+</form>
+
+<script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+ self.submit = function () {
+ console.log('Submit: ', self.user);
+ };
+ }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-06-form-error-messages.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-06-form-error-messages.html
new file mode 100644
index 0000000..46c38c9
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-06-form-error-messages.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+ <title>Notes App</title>
+ <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<form ng-submit="ctrl.submit()" name="myForm">
+ <input type="text"
+ name="uname"
+ placeholder="username"
+ ng-model="ctrl.user.username"
+ required
+ ng-minlength="4"/>
+ <span ng-show="myForm.uname.$error.required">
+ This is a required field
+ </span>
+ <span ng-show="myForm.uname.$error.minlength">
+ Minimum length required is 4
+ </span>
+ <span ng-show="myForm.uname.$invalid">
+ This field is invalid
+ </span>
+ <br/>
+
+ <input type="password"
+ name="pwd"
+ placeholder="password"
+ ng-model="ctrl.user.password"
+ required/>
+ <span ng-show="myForm.pwd.$error.required">
+ This is a required field
+ </span>
+ <br/>
+
+ <input type="submit"
+ value="Submit"
+ ng-disabled="myForm.$invalid"/>
+</form>
+
+<script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+ self.submit = function () {
+ console.log('Submit: ', self.user);
+ };
+ }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-07-form-styling.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-07-form-styling.html
new file mode 100644
index 0000000..1b6ab86
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-07-form-styling.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+ <title>Notes App</title>
+ <script src="../../tp/angular.js"></script>
+ <style>
+ .username.ng-valid {
+ background-color: greenyellow;
+ }
+ .username.ng-dirty.ng-invalid-required {
+ background-color: hotpink;
+ }
+ .username.ng-dirty.ng-invalid-minlength {
+ background-color: lightpink;
+ }
+ </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<form ng-submit="ctrl.submit()" name="myForm">
+ <input type="text"
+ class="username"
+ name="uname"
+ placeholder="username"
+ ng-model="ctrl.user.username"
+ required
+ ng-minlength="4"/>
+
+ <input type="submit"
+ value="Submit"
+ ng-disabled="myForm.$invalid"/>
+</form>
+
+<script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+ self.submit = function () {
+ console.log('Submit: ', self.user);
+ };
+ }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-08-nested-forms.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-08-nested-forms.html
new file mode 100644
index 0000000..c314919
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-08-nested-forms.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html ng-app>
+<head>
+ <title>Notes App</title>
+ <script src="../../tp/angular.js"></script>
+</head>
+<!-- no controller in this example -->
+<body>
+
+<form novalidate name="myForm">
+ <input type="text"
+ class="username"
+ name="uname"
+ ng-model="ctrl.user.username"
+ required=""
+ placeholder="Username"
+ ng-minlength="4"/>
+
+ <input type="password"
+ class="password"
+ name="pad"
+ ng-model="ctrl.user.password"
+ required=""
+ placeholder="Password"
+ required=""/>
+
+ <p/>
+
+ <ng-form name="profile">
+ <input type="text"
+ name="firstName"
+ ng-model="ctrl.user.profile.firstName"
+ placeholder="First Name"
+ required/>
+ <input type="text"
+ name="middleName"
+ ng-model="ctrl.user.profile.middleName"
+ placeholder="Middle Name"/>
+ <input type="text"
+ name="lastName"
+ ng-model="ctrl.user.profile.lastName"
+ placeholder="Last Name"
+ required/>
+
+ <input type="date"
+ name="dob"
+ placeholder="Date of birth"
+ ng-model="ctrl.user.profile.dob"/>
+ </ng-form>
+
+ <span ng-show="myForm.profile.$invalid">
+ Please fill out the profile information
+ </span>
+
+ <p/>
+
+ <input type="submit"
+ value="Submit"
+ ng-disabled="myForm.$invalid"/>
+</form>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-09-checkbox-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-09-checkbox-example.html
new file mode 100644
index 0000000..fe35af1
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-09-checkbox-example.html
@@ -0,0 +1,47 @@
+<!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>
+ <h2>What are your favorite sports?</h2>
+ <div ng-repeat="sport in ctrl.sports">
+ <label ng-bind="sport.label"></label>
+ <div>
+ With binding:
+ <input type="checkbox"
+ ng-model="sport.selected"
+ ng-true-value="'YES'"
+ ng-false-value="'NO'"/>
+ </div>
+ <div>
+ using ng-checked:
+ <input type="checkbox"
+ ng-checked="sport.selected === 'YES'"/>
+ </div>
+ <div>
+ Current state: {{sport.selected}}
+ </div>
+ <br/>
+ </div>
+
+ </div>
+
+ <script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+ self.sports = [
+ {label: 'Basketball', selected: 'YES'},
+ {label: 'Cricket', selected: 'NO'},
+ {label: 'Soccer', selected: 'NO'},
+ {label: 'Swimming', selected: 'YES'}
+ ];
+ }]);
+ </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-10-radio-buttons.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-10-radio-buttons.html
new file mode 100644
index 0000000..2a2cb83
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-10-radio-buttons.html
@@ -0,0 +1,63 @@
+<!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>
+ <h2>Radio Buttons</h2>
+ <div ng-init="user.gender = 'female'">
+ <input type="radio"
+ name="gender"
+ ng-model="user.gender"
+ value="male"/>Male
+ <input type="radio"
+ name="gender"
+ ng-model="user.gender"
+ value="female"/>Female
+ </div>
+ </div>
+
+ <div>
+ <h2>Radio Buttons two</h2>
+ <div ng-init="user.gender2 = 'male'; otherGender = 'Other'">
+ <input type="radio"
+ name="gender2"
+ ng-model="user.gender2"
+ value="male"/>Male
+ <input type="radio"
+ name="gender2"
+ ng-model="user.gender2"
+ value="female"/>Female
+ <input type="radio"
+ name="gender2"
+ ng-model="user.gender2"
+ ng-value="otherGender"/>{{otherGender}}
+ </div>
+ </div>
+
+ <div>
+ <h2>Radio Buttons three</h2>
+ <div ng-repeat="ch in ctrl.choices">
+ <input type="radio"
+ name="choice"
+ ng-model="user.choice"
+ ng-value="ch"/>{{ch}}
+
+ </div>
+ </div>
+
+
+ <script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+
+ self.choices = ['foo', 'bar', 'baz', 'zoo', 'goo'];
+ }]);
+ </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-11-select-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-11-select-example.html
new file mode 100644
index 0000000..a8cda33
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-11-select-example.html
@@ -0,0 +1,41 @@
+<!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>
+ <select ng-model="ctrl.selectedCountryId"
+ ng-options="c.id as c.label for c in ctrl.countries">
+ </select>
+ Selected Country ID: {{ctrl.selectedCountryId}}
+ </div>
+
+ <div>
+ <select ng-model="ctrl.selectedCountry"
+ ng-options="c.label for c in ctrl.countries track by c.id">
+ </select>
+ Selected Country: {{ctrl.selectedCountry}}
+ </div>
+
+ <script type="text/javascript">
+ angular.module('notesApp', [])
+ .controller('MainCtrl', [function () {
+ var self = this;
+
+ self.countries = [
+ {label: 'UK', id: 1},
+ {label: 'USA', id: 2},
+ {label: 'France', id: 3},
+ {label: 'Italy', id: 4}
+ ];
+ var first = self.countries[0];
+ self.selectedCountryId = first.id;
+ self.selectedCountry = first;
+ }]);
+ </script>
+
+</body>
+</html>