Objectives and outcomes

In this tutorial we are going to learn about ngAria module in angular-js and aria attributes. ARIA stands for Accessible Rich Internet Applications. The ngAria module is included in the application using dependency injection. The following directives are supported by ngAria:

output
(Image source: https://docs.angularjs.org/api/ngAria)

In the example below we are going to show how html element attributes value change when ngAria module is attached to application



To use ngAria module we have to link angular-aria.js file in our application.



If you have downloaded angular package on localhost

<script src="angular-1.4.6/angular-aria.js"></script>


Using CDN

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.js"></script>


Using npm

npm install angular-aria@1.4.6


Using bower

bower install angular-aria@1.4.6




HTML code:

<html>
<head>
<meta charset="utf-8">
<title>AngularJS ngAria</title>
<script src="angular-1.4.6/angular.min.js"></script>
<script src="angular-1.4.6/angular-aria.js"></script>
</head>
<body>
<div ng-app="aria_app" ng-controller="aria_control as obj">

<h3>Angular version: {{obj.angularVersion}}</h3>     
<h5>Interact with below form elements and observe the change</h5><br/>
      
<form ng-init="obj.radio='1'">

<label>Text-Input:</label>
<input show-attrs ng-model="obj.input"><br/>
 
<label>Textarea:</label>
<textarea show-attrs ng-model="obj.textarea"></textarea><br/> 
     
<label>Radio-button:</label><br/>
<input show-attrs type="radio" ng-model="obj.radio" value="1"><br/>
<input show-attrs type="radio" ng-model="obj.radio" value="2">
        
<label>Checkbox</label>
<input show-attrs type="checkbox" ng-model="obj.checkbox"><br/>
        
<label>Range</label><br/>
<input show-attrs type="range" ng-model="obj.range" min="0" max="25"><br/>
        
<input type="checkbox" ng-model="obj.show"><label>Hide/Show</label>&nbsp;
<input show-attrs ng-show="obj.show" ng-model="hidden">
        
<label>Email-input</label>&nbsp;
<input show-attrs type="email" ng-model="obj.email"><br/>

<label>Required-text-input</label>&nbsp;
<input show-attrs ng-model="obj.required" required><br/>
<input type="checkbox" ng-model="obj.disable">&nbsp;<label>Disable-button</label>
<button show-attrs type="submit" ng-disabled="obj.disable">Submit</button>

</form>
</div>
</body>
</html>




Javascript

<script>
var app = angular.module('aria_app', ['ngAria']);
	
app.controller('aria_control', function aria_control() 
{
'use strict'; 
var obj = this;
obj.angularVersion = angular.version.full;
obj.lessonTitle = 'How to use the ngAria module';  
});
	
app.directive('showAttrs', function() 
{
return function(scope, el, attrs) 
{
var pre = document.createElement('pre');
el.after(pre); 
scope.$watch(function() 
{
var attrs = {};
Array.prototype.slice.call(el[0].attributes, 0).forEach(function(item) 
{
if (item.name !== 'show-attrs') 
{
attrs[item.name] = item.value;
}
});
return attrs;
}, function(newAttrs, oldAttrs) 
{
pre.innerText = JSON.stringify(newAttrs, null, 2);
}, true);
}
});
</script>


Angular version: {{obj.angularVersion}}

Interact with below form elements and observe the change