AngularJS Training

Day 9
By
George

Agenda
Form & Validation
Control variables in forms
Routes
$routeParams
$routeProvider

Modularization
Value
Constants

Form & Validation

Client-side form validations are one of the coolest features inside of

AngularJS
AngularJS form validation enables you to write a modern HTML5 form that
is interactive and responsive from the start.
AngularJS makes it pretty easy for us to handle client-side form validations
without adding a lot of extra effort

To use form validations, we first must ensure that the form has
a name associated with it

Form & Validation

All input fields can validate against some basic
validations, like minimum length, maximum
length, etc. These are all available on the new
HTML5 attributes of a form.
It is usually a great idea to use
the novalidate flag on the form element. This will
prevent the browser from submitting the form.

Required attribute
To validate that a form input has been
filled out, simply add the html5
tag: required to the input field:

Minimum & Maximum length

Minimum Length:
To validate that a form input input is at least a {number} of
characters, add the AngularJS directive ng-minlength="{number}" to
the input field:

Maximum Length:
To validate that a form input is equal to or less than a number of
characters, add the AngularJS directive ng-maxlength="{number}":

Matches a pattern
To ensure that an input matches a regex pattern, use the AngularJS
directive: ng-pattern="/PATTERN/":

Email

To validate an email address in an input field, simply set the input type
to email, like so:

Number
To validate an input field has a number, set the input type to number:

Url
To validate that an input represents a url, set the input type to url:

Control variables in forms

AngularJS makes properties available on
the containing $scope object available to
us as a result of setting a form insidle the
DOM

Routes

AngularJS routes enables you to show different content depending

on what route is chosen

A route is specified in the URL after the # sign

When the browser loads these links, the same AngularJS

application will be loaded (located
athttp://myangularjsapp.com/index.html), but AngularJS will look at
the route (the part of the URL after the#) and decide what HTML
template to show.

Routes

Including the AngularJS Route

Module
The AngularJS Route module is contained
in its own JavaScript file. To use it we must
include in our AngularJS application.

Declaring a Dependency on the

AngularJS Route Module
The second thing to notice is that the
applications's AngularJS module
(called sampleApp) declares a
dependency on the AngularJS route
module:

The application's module needs to declare

this dependency in order to use
the ngRoute module.

The ngView Directive

The third thing to notice in the example above is
the use of the ngView directive:

Inside the div with the ngView directive (can also

be written ng-view) the HTML template specific
to the given route will be displayed.

Configuring the $routeProvider

The fourth thing to notice in the example shown at the beginning of this text is the
configuration of the$routeProvider.
The $routeProvider is what creates the $route service.
By configuring the $routeProvider before the $route service is created we can set
what routes should result in what HTML templates being displayed.

Links to Routes
The final thing to notice in this example is the two links in the
HTML page:

Notice how the part of the URLs after the # matches the routes
configured on the $routeProvider.
When one of these links is clicked, the URL in the browser
window changes, and the div with the ngViewdirective will show
the HTML template matching the route path.

Route Parameters
You can embed parameters into the route
path. Here is an AngularJS route path
parameter example:

$routeParams
controller functions can get access to
route parameters via the AngularJS
$routeParams service like this

AngularJS comes with a built-in dependency injection mechanism.

You can divide your application into multiple different types of components which
AngularJS can inject into each other.

Modularizing your application makes it easier to reuse, configure and test the
components in your application.

AngularJS contains the following core types of objects and components:

Value
Factory
Service
Provider
Constant

Value

A value in AngularJS is a simple object.

It can be a number, string or JavaScript object.

Values are typically used as configuration which is injected into factories, services or controllers.

A value has to belong to an AngularJS module. Here are three examples that add values to an AngularJS
module:

The values are defined using the value() function on the module.
The first parameter is the name of the value, and the second parameter is the value itself.
Factories, services and controllers can now reference these values by their name.

Injecting a Value
Injecting a value into an AngularJS
controller function is done simply by
adding a parameter with the same name
as the value (the first parameter passed to
the value() function when the value is
defined).

Constants
Unfortunately you cannot inject values into
the module.config() function. Instead you
can inject constants.

Minification Safe Dependency

Injection in AngularJS
To make your AngularJS code minification
safe, you need to provide the names of
the objects to inject as strings

Any Questions ?