Add validation directive

Author: rcollette

RequestAngularTS.Web/RequestAngularTS.Web.csproj

@@ -100,9 +100,10 @@
     <Folder Include="app\images\" />
   </ItemGroup>
   <ItemGroup>
-    <TypeScriptCompile Include="app\blocks\router\blocks.router.module.ts" />
+    <TypeScriptCompile Include="app\blocks\router\block.router.module.ts" />
     <TypeScriptCompile Include="app\blocks\router\RouteResolver.provider.ts" />
-    <TypeScriptCompile Include="app\directives\ModelValidatorDirective.ts" />
+    <TypeScriptCompile Include="app\blocks\validation\block.validation.module.ts" />
+    <TypeScriptCompile Include="app\blocks\validation\ServerErrorDirective.ts" />
     <TypeScriptCompile Include="app\directives\HtmlTemplate\HtmlTemplate.directive.ts" />
     <TypeScriptCompile Include="app\interfaces\PagebleT.I.ts" />
     <TypeScriptCompile Include="app\interfaces\FeatureController.I.ts" />

RequestAngularTS.Web/Scripts/_references.js

@@ -1,2 +1,2 @@
 /// <autosync enabled="true" />
-/// <reference path="../gulpfile.js" />
+/// <reference path="../gulpfile.js" />

RequestAngularTS.Web/app/blocks/router/RouteResolver.provider.ts

@@ -2,7 +2,7 @@
 // we use a typescript module because we want to be able to reference the type where it is injected
 // as a parameter but we don't want to pollute the global namespace
 // the global variable space with our type.
-module blocks.router {
+module block.router {
     export class RouteResolverProvider implements ng.IServiceProvider {
         // use the ecmascript arrow syntax to lexically bind `this` to the current class instance.
         public $get = (): RouteResolverProvider=> {
@@ -34,5 +34,5 @@ module blocks.router {
 
     // for this to be injected into a config() call, it must be a provider.
     // the suffix "Provider" is automatically appended to the provider Name.
-    angular.module("blocks.router").provider("routeResolver", RouteResolverProvider);
+    angular.module("block.router").provider("routeResolver", RouteResolverProvider);
 }

RequestAngularTS.Web/app/blocks/router/blocks.router.module.ts

@@ -2,8 +2,8 @@
     require.config({
         paths: {
             // third party libraries
-            angular: "components/angular/angular.min",
-            angularRoute: "components/angular-route/angular-route.min",
+            angular: "components/angular/angular",
+            angularRoute: "components/angular-route/angular-route",
             angularAnimate: "components/angular-animate/angular-animate.min",
             angularResource: "components/angular-resource/angular-resource",
             jquery: "components/jquery/dist/jquery.min",
@@ -13,8 +13,10 @@
             text: "components/requirejs-text/text",
 
             // block modules
-            blockRouterModule: "blocks/router/blocks.router.module",
+            blockRouterModule: "blocks/router/block.router.module",
             routeResolver: "blocks/router/RouteResolver.provider",
+            blockValidationModule: "blocks/validation/block.validation.module",
+            serverErrorDirective: "blocks/validation/ServerErrorDirective",
 
             // services
 
@@ -46,7 +48,8 @@
                     "moment",
                     "angularToastr",
                     "blockRouterModule",
-                    "routeResolver"]
+                    "routeResolver",
+                    "serverErrorDirective"]
             },
             //The appModule defines the feature module dependencies for the application
             appModule: {

RequestAngularTS.Web/app/directives/ModelValidatorDirective.ts

@@ -4,7 +4,6 @@
 // it seems the app module must be exported so that the properties we are using to capture do not "go away"
 var app: any = angular.module("app", [
     "app.core",
-    "blocks.router",
     "app.purchaseOrder"]);
 
 // for some reason, we need to hold onto an instance of the injector associated

RequestAngularTS.Web/app/main.ts

@@ -9,7 +9,7 @@
 module app.routing {
     angular.module("app").config(config);
 
-    function config($routeProvider: ng.route.IRouteProvider, routeResolverProvider: blocks.router.RouteResolverProvider) {
+    function config($routeProvider: ng.route.IRouteProvider, routeResolverProvider: block.router.RouteResolverProvider) {
         // routeResolverProvider is a provider rather than a service at this point because we cannot get
         // service instances during module configuration.
 

RequestAngularTS.Web/app/modules/App/App.module.ts

@@ -6,5 +6,6 @@ angular.module("app.core", [
     "ngAnimate",
     "ngResource",
     "toastr",
-    "blocks.router"
+    "block.router",
+    "block.validation"
 ]);

RequestAngularTS.Web/app/modules/App/App.routes.ts

@@ -1,4 +1,6 @@
 <div>
     <h1>Purchase Order</h1>
     {{vm.purchaseOrder}}
+    <form data-model-state-configuration="{messageTemplate:'<div class=&quot;input-error&quot;></div>'}">
+    </form>
 </div>