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/":
• 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 ?