How do I URL encode strings in AngularJS?

Use JavaScript's built-in encodeURI() and decodeURI() functions wrapped in an Angular service for reusability across modules. Create a simple component that exposes these functions, allowing you to encode strings for use in URLs (such as mailto: links with pre-filled subjects and bodies) or decode URL-encoded strings received from external sources. This approach leverages native JavaScript functionality while maintaining Angular's dependency injection pattern.

When do I need to URL encode strings in web applications?

URL encoding is necessary when creating dynamic links that include user-generated content, such as mailto: links with pre-filled subjects, social sharing URLs with custom messages, or query parameters containing special characters. Characters like spaces, ampersands, question marks, and other symbols must be properly encoded to prevent breaking URLs. The encodeURI() function handles this automatically, converting special characters to percent-encoded representations that safely transmit through URLs.

Published: February 13, 2016

Updated: October 3, 2025

Angular URL Encoding

Reading time: 1min

Recently a project I was working on required the ability to URL-encode various strings in order to create mailTo: links on the fly. Because more than one of our modules needed this ability, I decided to create a simple component to share the code between modules.

This is dead simple thanks to JavaScript's encodeURI and decodeURI. Take a look:

Feel free to grab it on GitHub or offer any improvements.

Build, Scale, Succeed

Join others receiving expert advice on
engineering and product development.

No data sharing. Unsubscribe at any time.

Benjamin
Charity

Angular URL Encoding

Further Reading

Build, Scale, Succeed

Further Reading

Build, Scale, Succeed

Newsletter Subscription

Related Articles