Update README.md with sample site

wald-tq · Dec 24, 2014 · f7b34bd · f7b34bd
1 parent 7866123
commit f7b34bd
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -20,4 +20,109 @@ Typically, the following code would reside on the Web API controller code:
 - dtoObjectName is the name of the class in your DTO assembly.
 - jsonObjectName is the name of the model object on your website.
 - "Namespace.If.Doesnt.Match.Assembly" is an alternate namespace...by default is uses DTO.Assembly.Name.
-- "DTO.Assembly.Name" is the name of the assembly to load for reflecting the DTO properties that have validation attributes.
+- "DTO.Assembly.Name" is the name of the assembly to load for reflecting the DTO properties that have validation attributes.
+##DTO Example
+    namespace AATestAPI.Models
+    {
+    public class ValidationTest
+    {
+        [Required]
+        public string Name { get; set; }
+
+        [Phone]
+        public string Phone { get; set; }
+
+        [Url]
+        public string Website { get; set; }
+
+        [CreditCard]
+        public string CreditCard { get; set; }
+
+        [EmailAddress]
+        public string Email { get; set; }
+
+        [MaxLength(5)]
+        public string MaxLengthTest { get; set; }
+
+        [MinLength(2)]
+        public string MinLengthTest { get; set; }
+
+        [Range(1, 5)]
+        public int RangeTest { get; set; }
+
+        [RegularExpression(RegexConstants.Integer, ErrorMessage = "Must be an integer")]
+        public string IntegerString { get; set; }
+
+        [StringLength(10, MinimumLength = 2)]
+        public string StringLengthTest { get; set; }
+    }
+	}
+##AngularJS Website
+###View
+This is a typical Angular Agility form:
+
+    <div class="page-header">
+        <h1>Angular Agility Validation From Server</h1>
+    </div>
+    <div aa-configured-form validation-config="formconfig" class="form-horizontal" ng-form="aatest">
+        <input aa-field-group="model.Name" />
+        <input aa-field-group="model.Phone" />
+        <input aa-field-group="model.Website" />
+        <input aa-field-group="model.CreditCard" />
+        <input aa-field-group="model.Email" />
+        <input aa-field-group="model.MaxLengthTest" />
+        <input aa-field-group="model.MinLengthTest" />
+        <input aa-field-group="model.RangeTest" type="number" />
+        <input aa-field-group="model.IntegerString" />
+        <input aa-field-group="model.StringLengthTest" />
+
+        <button aa-submit-form="submit()" type="submit" class="btn btn-primary">Submit</button>
+    </div>
+###UI-ROUTER State Definition
+Use the 'resolve' property and return a promise so that the controller doesn't get created until the validation is retrieved from the server.
+See this excellent explanation of this technique: [How to force AngularJS resource resolution with ui-router](http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/)
+Of course this assumes you are using [ui-router](https://github.com/angular-ui/ui-router).
+
+    angular.module('app', [
+        'ui.router',
+        'ui.bootstrap',
+        'aa.formExtensions',
+        'aa.formExternalConfiguration',
+        'aa.notify',
+        'aa.select2'
+    ])
+    .config(['$stateProvider', function ($stateProvider) {
+        $stateProvider.state('aatest', {
+            url: ''
+            , resolve: {
+                validationService: 'validationService',
+                validationData: function (validationService) {
+                    var valData = validationService.getValidations('ValidationTest', 'model');
+                    return valData;
+                }
+            }
+            , views: {
+                'content@': {
+                    templateUrl: 'aatest.html'
+                    , controller: 'aatestController'
+                }
+            }
+        });
+    }]);
+###Controller
+The controller now can inject validationData since it was resolved in the router definition.
+
+    angular
+        .module('app')
+        .controller('aatestController', aatestController);
+
+    aatestController.$inject = ['$scope', 'validationData'];
+
+    function aatestController($scope, validationData) {
+        activate();
+
+        function activate() {
+            $scope.model = {};
+            $scope.formconfig = angular.isUndefined(validationData) ? undefined : validationData.data;
+        }
+    }
diff --git a/aa-validation-from-server.sln b/aa-validation-from-server.sln
@@ -38,6 +38,12 @@ Project("{E24C65DC-7377-472B-9ABA-BC803B73C61A}") = "AATestSite", "http://localh
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "AATestAPI", "AATestAPI\AATestAPI.csproj", "{C616FF0C-21C7-4AC8-AE1E-1FA96B5559B7}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{4C7BB457-4636-4990-AAC6-98EDA5B828D5}"
+	ProjectSection(SolutionItems) = preProject
+		.gitignore = .gitignore
+		README.md = README.md
+	EndProjectSection
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU