Parse URL using AngularJS

Parse URL Using AngularJS AngularJS provides a very compatible service $location for acccessing and modifying browser URLs, but still if we need a basic function that can parse a URL string and returns the hostname/ protocol/ port etc we can use this basic code to get it using a variable and a $watch on this variable, so whenever it changes we get all the different values.
Have some HTML that can accept a URL as input. Also set some lables to show the Host/ Port etc…


<h3>Parse URL using AngularJS | open and free</h3>

url: <input type="text" ng-model="url" value="" style="width:780px;">

<li>href = {{parser.href}}</li>
<li>protocol = {{parser.protocol}}</li>
<li>host = {{}}</li>
<li>hostname = {{parser.hostname}}</li>
<li>port = {{parser.port}}</li>
<li>pathname = {{parser.pathname}}</li>
<li>hash = {{parser.hash}}</li>
<li>search = {{}}</li>


As we are done with the HTML part, let us create a small angularjs controller to parse the URL and provide distinct properties from it.


function AppCtrl($scope) {

$scope.$watch('url', function () {
$scope.parser.href = $scope.url;

$scope.init = function () {
$scope.parser = document.createElement('a');
$scope.url = '';



You can play with a full example here: Parse URL using AngularJS | Fiddle


Say something : I accept all the "Humer&Critic"

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s