Validation in Angular 1.

3
And other angular tidbits

What is Angular?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets
you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and
dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the
browser, making it an ideal partner with any server technology.

Angular is what HTML would have been had it been designed for applications. HTML is a great declarative language for
static documents. It does not contain much in the way of creating applications, and as a result building web
applications is an exercise in what do I have to do to trick the browser into doing what I want?

The impedance mismatch between dynamic applications and static documents is often solved with:

a library - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library
when it sees fit. E.g., jQuery.

frameworks - a particular implementation of a web application, where your code fills in the details. The framework is in charge
and it calls into your code when it needs something app specific. E.g., durandal, ember, etc.

Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML
and what an application needs by creating new HTML constructs. Angular teaches the browser new syntax through a
construct we call directives. Examples include:

Data binding, as in {{}}.

DOM control structures for repeating/hiding DOM fragments.

Support for forms and form validation.

Attaching new behavior to DOM elements, such as DOM event handling.

Grouping of HTML into reusable components.

Developers Guide for AngularJS

What is Angular (cont.)?

Developed by Google

Started in 2009

Google rebuilt DoubleClick in Angular, DoubleClick is premium version of

AdSense

Adoption is increasing

Active project with large eco-system

Supports modern browsers

Angular Benefits

Focuses on Separation of Concerns

Is very opinionated (there is a right way)

Is very modularized and gives you a great way to organize your javascript
code and break up work assignments to teams

Much of the heavy lifting (Dom Manipulation, dependency injection) is done

for you

Allows you to create your own elements and attributes using directives

Easily extensible

Routing

Embraces testing

Angular application structure

Modules are a container for the different parts of your app

Scope is an object that refers to the application model. It is an execution context for
expressions. Scopes are arranged in hierarchical structure which mimic the DOM
structure of the application. Scopes can watchexpressionsand propagate events.

Controllers a Controller is a JavaScriptconstructor functionthat is used to augment

theAngular Scope. Controllers are used to setup the initial state of the scope and add
behavior to the scope

Angular services are substitutable objects that are wired together using
dependency injection (DI). You can use services to organize and share code across your
app.

A filter formats the value of an expression for display to the user.

At a high level, directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a
specified behavior to that DOM element or even transform the DOM element and its
children including validation.

How do I use AngularJS?

I build web business applications some intranet, some out in the wild.

Backend is EF6, Web Api and one Odata app just for learning purposes

For larger apps use BreezeJS (which I highly recommend) for client
communication with the server and its server side components.

Client side AngularJS, Bootstrap 3, Font Awesome, Angular-UI (jquery is

required by Bootstrap, I rarely use)

Sample application
Technician Activity Tracking

Requirements be able to have a technician enter the orders they worked on,
the date worked, the hours for those orders, any issues encountered and any
materials used.

Be able to enter over the web, ideally enter from smartphone

Application entirely developed in Visual Studio 2013

Backend Web Api and an Odata Controller just for fun, using Owin startup for
configuration, no global.asax

Client calls are all made using Angular resource module allowing interaction
with RESTful service

3 controllers, one for the links at the top of the page, one for adding
activities and one for viewing a grid of all activities

2 directives one for async validation of order number, one for validation of
hours worked

1 factory which is just a faade over backend access

1 filter which is just a template function

Validation

What is demonstrated is only available in Angular 1.3 I highly recommend

moving to 1.3

New directives ngMessages ngMessage

These directives detect validation errors on the ngModel object and allow
simpler communication of the validation issues

Can be validation from either the standard HTML5 attributes and input types
or custom directives including the ability to cross validate multiple controls.

Can be used to prevent form submission

The code

HTML Page
<div class="row col-md-7 ">

<label>Work Date:</label>

<div class="input-group">

<input type="text" id="workDate" name="workDate" class="form-control"

datepicker-popup="{{format}}" ng-model="activity.workDate" min-date="minDate" maxdate="'2015-06-22'" datepicker-options="dateOptions" required close-text="Close" />
<span class="input-group-btn">

<button type="button" class="btn btn-default" ngclick="open($event)" tabindex="-1"><i class="glyphicon glyphiconcalendar"></i></button>

</span>

</div>

<div ng-messages="activityForm.workDate.$error">
<div ng-message="required" class="alert alert-warning">Work Date is

required</div>

</div>
</div>

The code (continued)

<div class="row col-md-7 ">

<div class="form-group">
<label>Order Worked:</label>

<input type="text" id="orderWorked" name="orderWorked" class="formcontrol" ng-model="activity.ordersWorked" required order-number-validator ng-modeloptions="{updateOn:'blur'}" ng-readonly="activityForm.orderWorked.$valid" />

</div>

<div ng-messages="activityForm.orderWorked.$error">

<div ng-message="required" class="alert alert-warning">Order Number

is required</div>

<div ng-message="validOrderNumber" class="alert alert-warning">Not

a valid order number</div>

</div>

<div ng-if="activityForm.orderWorked.$pending">
Checking Order Number...

</div>
</div>

The directive

.directive('orderNumberValidator', ['datacontext', function (datacontext) {

return {

require: 'ngModel',

link: function ($scope, element, attrs, ngModel) {

ngModel.$asyncValidators.validOrderNumber = function
(modelValue, viewValue) {

var val = modelValue || viewValue;

return datacontext.validateOrderNumber(val);
};

};
}]);

Comparative directive
div class="form-group">
<label class="control-label" for="testMe">Test Me:</label>
<input id="testMe" name="testMe" my-ui-validate="myTestFunction" ng-model-options="{updateOn:'blur'}"
ng-model="model.item1" class="form-control">
</div>
<div ng-messages="testForm.testMe.$error">
<div ng-message="validate">
Test string must be longer than four characters!
</div>
</div>
.directive('myUiValidate', [function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var validateExpr = attrs.myUiValidate;
if (!validateExpr){ return;}
ngModel.$validators.validate = scope[validateExpr];
}
};
}])
$scope.myTestFunction = function(value){
return value.length > 4 ;
};