August 11, 2016

AngularJs Encode URL

AngularJs Encode URL Example : We can use the javascript inbuilt function encodeURIComponent(string), encodeURI(string) or escape(string) to encode the url string. Here in this tutorial we are going to explain how you can encode url string with example and online demo.

AngularJs Encode URL Parameters | String | JavaScript | Example

Let us create a simple example to use the function encodeURIComponent(string) to encode the url parameters.

AngularJs Encode URL Parameters: Example

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
 var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
 
  $scope.url1 = 'http://demo.com/index.php?param1=john&param2=doe';
  $scope.url2 = '';
  $scope.encodeUrlStr = function() {
   $scope.url2 = "http://demo.com/index.php?url=" + encodeURIComponent($scope.url1);
  }
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController">  
    <button ng-click ="encodeUrlStr()" >Encode URL</button>
	<br>
	URL1 = {{url1}}<br>
	URL2 = {{url2}}
</div> 
</div>
</body>  
</html>

Try it »

If you run the above example it will produce output something like this –

AngularJs Encode URL

Note:

Keep in mind the difference between the three functions before using them.

escape(): This will not encode: @*/+
encodeURI(): This will not encode: ~!@#$&*()=:/,;?+’
encodeURIComponent(): This will not encode: ~!*()’

AngularJs Encode URL