AngularJS – How to Create a Custom Slugify Filter for SEO friendly URL

Leave a Comment / php / By

AngularJS – How to Create a Custom Slugify Filter for SEO friendly URL

In this post we will give you information about AngularJS – How to Create a Custom Slugify Filter for SEO friendly URL. Hear we will give you detail about AngularJS – How to Create a Custom Slugify Filter for SEO friendly URLAnd how to use it also give you demo for it if it is necessary.

In this tutorial, I will tell you how to generate SEO friendly URL by creating custom slugify filter in AngularJS.

There are some built in filters in angularjs that cover many common use cases such as formatting dates, search etc.

You can create custom filter by using app.filter method by passing custom filter name. Filters are only function which gets input and apply some logics over input then return an output – transform input to an output.

In this example, I will create custom filter that can be used for converting a string into sluggable URL.

First, I will show you how to create simple custom filter for converting each character into lower case.


Simple custom filter for converting each character into lower case 

  1. <!DOCTYPEhtml>
  2. <htmlng-app="myApp">
  3. <head>
  4. <title>AngularJS - Custom Filter for converting each character into lower case</title>
  5. <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  6. <scripttype="text/javascript">
  7.     var myApp=angular.module('myApp',[]);
  8.     myApp.filter('toLowerCase', function () {
  9.     return function (input) {
  10.         if (!input)
  11.             return;
  13.         // make lower case
  14.         var slug = input.toLowerCase();
  16.         return slug;
  17.     };
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <h3>Custom Filter for converting each character into lower case</h3>
  23. <inputtype="text"ng-model="slug">
  24. <br>
  25. {{slug | toLowerCase}}
  26. </body>
  27. </html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS - Custom Filter for converting each character into lower case</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.filter('toLowerCase', function () {
    return function (input) {
        if (!input)
            return;
 
        // make lower case
        var slug = input.toLowerCase();
 
        return slug;
    };
});
  </script>
</head>
<body>
<h3>Custom Filter for converting each character into lower case</h3>
<input type="text" ng-model="slug">
<br>
{{slug | toLowerCase}}
</body>
</html>




Create a Custom Slugify Filter for SEO friendly URL 

  1. <!DOCTYPEhtml>
  2. <htmlng-app="myApp">
  3. <head>
  4. <title>AngularJS - How to Create a Custom Slugify Filter for SEO friendly URL</title>
  5. <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  6. <scripttype="text/javascript">
  7.     var myApp=angular.module('myApp',[]);
  8.     myApp.filter('slugify', function () {
  9.     return function (input) {
  10.         if (!input)
  11.             return;
  13.         // make lower case and trim
  14.         var slug = input.toLowerCase().trim();
  16.         // replace invalid chars with spaces
  17.         slug = slug.replace(/[^a-z0-9s-]/g, '');
  19.         // replace multiple spaces or hyphens with a single hyphen
  20.         slug = slug.replace(/[s-]+/g, '-');
  22.         return slug;
  23.     };
  24. });
  25. </script>
  26. </head>
  27. <body>
  28. <h3>Custom Slugify Filter for SEO friendly URL</h3>
  29. <inputtype="text"ng-model="slug">
  30. <br>
  31. {{slug | slugify}}
  32. </body>
  33. </html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS - How to Create a Custom Slugify Filter for SEO friendly URL</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.filter('slugify', function () {
    return function (input) {
        if (!input)
            return;
 
        // make lower case and trim
        var slug = input.toLowerCase().trim();
 
        // replace invalid chars with spaces
        slug = slug.replace(/[^a-z0-9s-]/g, '');
 
        // replace multiple spaces or hyphens with a single hyphen
        slug = slug.replace(/[s-]+/g, '-');
 
        return slug;
    };
});
  </script>
</head>
<body>
<h3>Custom Slugify Filter for SEO friendly URL</h3>
<input type="text" ng-model="slug">
<br>
{{slug | slugify}}
</body>
</html>

Show Demo

Hope this code and post will helped you for implement AngularJS – How to Create a Custom Slugify Filter for SEO friendly URL. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

48  +    =  52

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US