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:

(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:

<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>
<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'">

<input show-attrs ng-model="obj.input"><br/>
<textarea show-attrs ng-model="obj.textarea"></textarea><br/> 
<input show-attrs type="radio" ng-model="obj.radio" value="1"><br/>
<input show-attrs type="radio" ng-model="obj.radio" value="2">
<input show-attrs type="checkbox" ng-model="obj.checkbox"><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">
<input show-attrs type="email" ng-model="obj.email"><br/>

<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>



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');
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);

Angular version: {{obj.angularVersion}}

Interact with below form elements and observe the change