7. Validations
AngularJS forms and controls can validate input data.
AngularJS forms and controls can provide validation services and notify users of invalid data.
Example-7 Showing Validations
- <!DOCTYPE html>
- <html>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <body>
- <h2>Validation Example</h2>
- <form ng-app="myApp" ng-controller="validateCtrl"
- name="myForm" novalidate>
- <table style="border: 1px solid gray; width: 500px;">
- <tr>
- <td colspan="2">
- <span style="color: red; padding-left:100px; border: 3px;">Log In </span>
- </td>
- </tr>
- <br />
- <tr>
- <td>Username:
- </td>
- <td>
- <input type="text" name="user" ng-model="user" required>*
- <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
- <span ng-show="myForm.user.$error.required">Username is required.</span>
- </span>
- </td>
- </tr>
- <tr>
- <td>Email:
- </td>
- <td>
- <input type="email" name="email" ng-model="email" required>*
- <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
- <span ng-show="myForm.email.$error.required">Email is required.</span>
- <span ng-show="myForm.email.$error.email">Invalid email address.</span>
- </span>
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <p>
- <input type="submit"
- ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
- myForm.email.$dirty && myForm.email.$invalid">
- </p>
- </td>
- </tr>
- </table>
- </form>
- <script>
- var app = angular.module('myApp', []);
- app.controller('validateCtrl', function ($scope) {
- $scope.user = 'Pradeep K';
- $scope.email = '[email protected]';
- });
- </script>
- </body>
- </html>
Output
8. Filters
- Filters are used to extend the behaviour of binding expressions and directives.
- Filters allow formatting the data to be displayed on the DOM.
- Filters are invoked in the HTML with the | (pipe) character inside expressions {{ }}.
- They are used to format values or to apply certain conditions. They are executed whenever the value bound in the binding expression is updated.
Example-7 Showing Filter example
- <html>
- <head>
- <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <script>
- var app = angular.module('myApp', []);
- app.controller("namesCtrl", function ($scope) {
- $scope.friends = [
- { name: "Karl", age: 27, city: "Bangalore" },
- { name: "Lewis", age: 55, city: "Newyork" },
- { name: "Adarsh", age: 20, city: "London" },
- { name: "John", age: 21, city: "Newyork" },
- { name: "David", age: 20, city: "Chenai" },
- { name: "Miller", age: 32, city: "Paris" }
- ];
- });
- </script>
- </head>
- <div ng-app="myApp" ng-controller="namesCtrl">
- <p>Filtering input:</p>
- <p>
- <input type="text" ng-model="test">
- </p>
- <ul>
- <li ng-repeat="x in friends | filter:test | orderBy:'name'">
- {{ (x.name | uppercase) + ', ' + x.age +','+x.city }}
- </li>
- </ul>
- </div>
- </html>
Output
9. Services
If you need to share state across your application, or need a solution for data storage or cache, think of Services. Services are singletons and can be used by other components such as directives, controllers, filters and even other services. Services do not have a scope of their own, so it is permissible to add eventlisteners in Services using $rootScope.
There are the following few services that we use frequently:
- $http – Used for Ajax calls for server communications
- $window-Provide a reference to a DOM object.
- $Location- Provides reference to the browser location
- $timeout –Provides a reference to window.settimeout function
- $Log- Used for logging
- $sanitize- used to avoid script injections and display raw html in page
- $Rootscope –Used for scope hierarchy manipulation
- $Route –used to display browser based path in browser URL.
- $Filter –Used for providing filter access.
- $resource- used to work with Restful API
- $document – used to access window. Document object
- $exceptionHandler- used for handling exceptions.
- $q- provides a promise object
10. Routing
AngularJS Routing helps you to divide your app into multiple views and bind multiple views to Controllers. The magic of Routing is taken care by an AngularJS service $routeProvider. The $routeProvider service provides the methods when() and otherwise() to define the routes for your app. Routing has dependency on the ngRoute module.
It helps us to divide a Single Page Application (SPA) into multiple views. Dividing a SPA into multiple views helps to logically divide the app and make it more manageable. Routing in an Angular application is taken care of by a service provider known as “$routeProvider”. The $routeProvider is configured in app the module's config() function. $routeProvider provides the following two methods:
- when(): that matches a pattern
- otherwise(): otherwise() method to define a
- default route.
- App.config(['$routeProvider',
- function($routeProvider)
- {
- $routeProvider.
- when('/List',
- {
- templateUrl: 'Views/list.html',
- controller: 'ListController'
- }).
- when('/Add',
- {
- templateUrl: 'Views/add.html',
- controller: 'AddController'
- }).
- otherwise({
- redirectTo: '/List'
- });
- }]);
11. Dependency Injection
Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. Dependency injection helps us to create a loosely-coupled architecture. Dependency Injection is designed on the following two principles.
A. High-level modules should not depend on low-level modules. Both should depend on abstractions.
B. Abstractions should not depend on details. Details should depend on abstractions.
The Angular injector subsystem is in charge of creating components, resolving their dependencies and providing them to other components when needed. Components such as services, directives, filters and animations are defined by an injectable factory method or constructor function. These components can be injected with "service" and "value" components as dependencies. AngularJS has a built-in dependency injector that keeps track of all components (services, values and so on) and returns instances of needed components using dependency injection. The Dependency injector of AngularJS works based on names of the components.
A simple case of dependency injection in Angular js:
- AppModule.controller("AppController", function($scope, $window, $log,$http)
- {
-
- });
Here, $scope, $window and $log, $http are passed into the controller using dependency injection.
12. Testing
As said before, Angular components supports dependency injections. This dependency injections allows Angular codes to be testable. Use any kind of component in Angular, it can't be written without getting some of the external components injected in. The testing framework like Jasmine and Karma are the most widely used testing framework with Angular. These two frameworks support mocking and are highly configurable using a JSON file and the use of various plug-ins.
In the next article I will return with each concept in details. I hope you now have a basic understanding of AngularJS contents. Thanks for reading!