{"id":952,"date":"2024-04-14T14:31:57","date_gmt":"2024-04-14T14:31:57","guid":{"rendered":"https:\/\/www.appfinz.com\/blogs\/?p=952"},"modified":"2025-05-15T04:46:24","modified_gmt":"2025-05-15T04:46:24","slug":"angularjs-slugify-filter","status":"publish","type":"post","link":"https:\/\/www.appfinz.com\/blogs\/angularjs-slugify-filter\/","title":{"rendered":"AngularJS \u2013 Slugify Filter"},"content":{"rendered":"\n

A custom AngularJS filter for converting a string into a url slug. A slug is a url & seo friendly string containing only lowercase alphanumeric characters and hyphens \u201c-\u201c. Slugs are often used for including titles in URLs for SEO. URL slug in angular js <\/p>\n\n\n\n

app.filter('slugify', function() {\n  return function(input) {\n    if (!input) return '';\n\n    \/\/ Convert the string to lowercase\n    var slug = input.toLowerCase();\n\n    \/\/ Remove special characters\n    slug = slug.replace(\/[^a-z0-9\\s-]\/g, '');\n\n    \/\/ Replace spaces and underscores with hyphens\n    slug = slug.replace(\/[\\s_]+\/g, '-');\n\n    \/\/ Remove any leading or trailing hyphens\n    slug = slug.replace(\/^-+|-+$\/g, '');\n\n    return slug;\n  };\n});\n<\/pre><\/div>\n\n\n\n
Use the Slug Filter in Your Controller or View<\/p>\n\n\n\n
Once you have the filter in place, you can use it in your AngularJS controller or directly in the view.<\/p>\n\n\n\n
In Controller:<\/strong><\/p>\n\n\n\n
app.controller('MyController', function($scope, $filter) {\n  $scope.title = "My Awesome Blog Post!";\n  $scope.slug = $filter('slugify')($scope.title);\n});\n<\/pre><\/div>\n\n\n\n
In View:<\/p>\n\n\n\n
<div ng-controller="MyController">\n  <p>Original Title: {{ title }}<\/p>\n  <p>URL Slug: {{ title | slugify }}<\/p>\n<\/div>\n<\/pre><\/div>\n\n\n\n
Example<\/h3>\n\n\n\n
If your original title is \"Angular js slug creation!\"<\/code>, the slug generated would be angular-js-slug-creation.<\/code><\/p>\n\n\n\n
Explanation:<\/h3>\n\n\n\n