We are going to create a very simple yet powerful web app using AngularJS from Google. Our app will take any input and will convert it into URL format instantly. We will be creating a filter named “clean” . We can use this filter anywhere in our application like following piece of code

<input class="col-md-9 search" ng-model="inputString" type="text"></input>  
<span class="col-md-9" style="color:green"> {{inputString | clean}}</span>  

Live Demo Download

As a very simple application we will require much less coding using AngularJS. We need only 1 javascript file from angularjs.org. We don’t need any kind of dependency. Hence our module injection will be blank. But we just need a AngularJS *filter *which will filter the input string and convert it into url format.

index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
<script>  
angular.module('myApp',[])  
.filter('clean', function(){
return function (input){  
  if(input){
  return input.toLowerCase()
    .replace(/s+/g, '-')
    .replace(/[^a-z0-9-]/ig,'');
         }
       }
});
</script>