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;">

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

.

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 = 'https://17path.wordpress.com/2015/10/22/the-ellen-show-vs-other-shows/';
}

}

.

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