Parse URL using AngularJS

by amitrdx

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<input type="text" ng-model="url" value="">
<br/>{{url}}
<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> <a href="#" ng-click="clicklink">click me</a>

CSS

input {
    width:100%
}

JavaScript

function ctrl($scope) {

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

    $scope.init = function () {
        $scope.parser = document.createElement('a');
        $scope.url = "http://127.0.0.1/ps3/app/index.html#/titledetail/55e3fba9-bb73-42d1-b8da-857848e073b0";;
    }

    $scope.count = 0;
    var unbind = $scope.$watch("count", function () {
        if ($scope.count >= 5) {
            console.log("unbind call")
            unbind();
        }
    })
    $scope.clicklink = function () {
        $scope.count++;
        console.log("clicked " + count + " times");
    }

}