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 ?