Skip to content

Commit ef68038

Browse files
ylliethyllieth
committed
angular-url-parser ... with demo application
1 parent b7a7736 commit ef68038

File tree

5 files changed

+368
-0
lines changed

5 files changed

+368
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.idea/
2+
.DS_Store
3+
/bower_components/

‎angular-url-parser.js

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
angular
2+
.module('angular-url-parser', [])
3+
.factory('urlParser', function () {
4+
'use strict';
5+
6+
function urlParser(url) {
7+
var parser = document.createElement('a'), searchObject = {}, queries, split, i;
8+
9+
// Let the browser do the work
10+
parser.href = url;
11+
12+
// Convert query string to object
13+
queries = parser.search.replace(/^\?/, '').split('&');
14+
15+
for( i = 0; i < queries.length; i++ ) {
16+
split = queries[i].split('=');
17+
searchObject[split[0]] = split[1];
18+
}
19+
20+
return {
21+
protocol: parser.protocol, // ex: http:
22+
host: parser.host, // ex: localhost:3000
23+
hostname: parser.hostname, // ex: localhost
24+
port: parser.port, // ex: 3000
25+
pathname: parser.pathname, // ex: /models
26+
search: parser.search,
27+
searchObject: searchObject,
28+
hash: parser.hash
29+
};
30+
}
31+
32+
return {
33+
/**
34+
* Returns the protocol part of the given url
35+
*
36+
* Example:
37+
* > Input: 'http://localhost:3000/models?sort=asc'
38+
* > Output: 'http:'
39+
*
40+
* @param {string} [url] - location.href if not specified
41+
* @returns {string}
42+
*/
43+
getProtocol: function (url) {
44+
url = url || window.location.href;
45+
return urlParser(url).protocol;
46+
},
47+
48+
/**
49+
* Returns the host part of the given url
50+
*
51+
* Example:
52+
* > Input: 'http://localhost:3000/models?sort=asc'
53+
* > Output: 'localhost:3000'
54+
*
55+
* @param {string} [url] - location.href if not specified
56+
* @returns {string}
57+
*/
58+
getHost: function (url) {
59+
url = url || window.location.href;
60+
return urlParser(url).host;
61+
},
62+
63+
/**
64+
* Returns the hostname part of the given url
65+
*
66+
* Example:
67+
* > Input: 'http://localhost:3000/models?sort=asc'
68+
* > Output: 'localhost'
69+
*
70+
* @param {string} [url] - location.href if not specified
71+
* @returns {string}
72+
*/
73+
getHostname: function (url) {
74+
url = url || window.location.href;
75+
return urlParser(url).hostname;
76+
},
77+
78+
/**
79+
* Returns the port of the given url
80+
*
81+
* Example:
82+
* > Input: 'http://localhost:3000/models?sort=asc'
83+
* > Output: '3000'
84+
*
85+
* @param {string} [url] - location.href if not specified
86+
* @returns {string}
87+
*/
88+
getPort: function (url) {
89+
url = url || window.location.href;
90+
return urlParser(url).port;
91+
},
92+
93+
/**
94+
* Returns the pathname part of the given url
95+
*
96+
* Example:
97+
* > Input: 'http://localhost:3000/models?sort=asc'
98+
* > Output: '/models'
99+
*
100+
* @param {string} [url] - location.href if not specified
101+
* @returns {string}
102+
*/
103+
getRoute: function (url) {
104+
url = url || window.location.href;
105+
return urlParser(url).pathname;
106+
},
107+
108+
/**
109+
* Returns the list of element in the pathname part of the given url
110+
*
111+
* Example:
112+
* > Input: 'http://localhost:3000/models/047256ce-850c-4408-83eb-4da873690b1c?sort=asc'
113+
* > Output: ['models', '047256ce-850c-4408-83eb-4da873690b1c']
114+
*
115+
* @param {string} [url] - location.href if not specified
116+
* @returns {Array}
117+
*/
118+
getRouteAttributes: function(url) {
119+
return this.getRoute(url).split('/');
120+
},
121+
122+
/**
123+
* Returns the query part of the given url
124+
*
125+
* Example:
126+
* > Input: 'http://localhost:3000/models?sort=asc'
127+
* > Output: '?sort=asc'
128+
*
129+
* @param {string} [url] - location.href if not specified
130+
* @returns {string}
131+
*/
132+
getQuerystring: function (url) {
133+
url = url || window.location.href;
134+
return urlParser(url).search;
135+
},
136+
137+
/**
138+
* Returns a single option or the whole query string of the given url
139+
*
140+
* Example:
141+
* > Input: 'http://localhost:3000/models?sort=asc'
142+
* > Output: {sort: 'asc'}
143+
*
144+
* > Input: 'http://localhost:3000/models?sort=asc' - sort
145+
* > Output: 'asc'
146+
*
147+
* @param {string} [param] -
148+
* @param {string} [url] - location.href if not specified
149+
* @returns {object} if param is not defined
150+
* @returns {string} if param is a valid parameter of the given url
151+
*/
152+
getOption: function (param, url) {
153+
url = url || window.location.href;
154+
155+
var searchOject = urlParser(url).searchObject;
156+
157+
if (typeof param === 'string') {
158+
return (searchOject.hasOwnProperty(param) === true)
159+
? searchOject[param]
160+
: null;
161+
} else {
162+
return searchOject;
163+
}
164+
},
165+
166+
/**
167+
* Returns the hash part of the given url
168+
*
169+
* Example:
170+
* > Input: 'http://localhost:3000/models?sort=asc#quantiles'
171+
* > Output: 'quantiles'
172+
*
173+
* @param {string} [url] - location.href if not specified
174+
* @returns {string}
175+
*/
176+
getHash: function (url) {
177+
url = url || window.location.href;
178+
return urlParser(url).hash;
179+
}
180+
};
181+
});

‎app/app.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
angular
2+
.module('demo-angular-url-parser', ['angular-url-parser'])
3+
.controller('demoCtrl', function($scope, urlParser) {
4+
'use strict';
5+
6+
this.example = {
7+
ex1: 'http://localhost',
8+
ex2: 'http://localhost:3000',
9+
ex3: 'http://localhost:3000/profile/yllieth',
10+
ex4: 'http://localhost:3000/profile/yllieth?page=1&sort=asc',
11+
ex5: 'http://localhost:3000#personal_information',
12+
current: location.href
13+
};
14+
15+
this.selectedUrl = this.example.current;
16+
17+
this.changeUrl = function(url) {
18+
this.protocol = urlParser.getProtocol(url);
19+
this.host = urlParser.getHost(url);
20+
this.hostname = urlParser.getHostname(url);
21+
this.port = urlParser.getPort(url);
22+
this.route = urlParser.getRoute(url);
23+
this.routeAttributes = urlParser.getRouteAttributes(url);
24+
this.queryString = urlParser.getQuerystring(url);
25+
this.option = urlParser.getOption(undefined, url);
26+
this.hash = urlParser.getHash(url);
27+
};
28+
29+
this.changeUrl(this.selectedUrl);
30+
});

‎app/index.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
8+
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
9+
</head>
10+
<body ng-app="demo-angular-url-parser">
11+
12+
<div class="container" ng-controller="demoCtrl as Demo">
13+
<div class="jumbotron">
14+
<h1>Angular Url Parser</h1>
15+
<p class="lead">Start parsing your url in the simpliest way</p>
16+
<p>
17+
<a class="btn btn-lg btn-success" href="https://github.com/yllieth/angular-url-parser" role="button">
18+
<i class="fa fa-github"></i>
19+
View on github
20+
</a>
21+
</p>
22+
</div>
23+
24+
<div class="row">
25+
<div class="col-lg-6">
26+
<h2>Url examples</h2>
27+
28+
<div class="row" style="margin-top: 20px">
29+
<div class="col-lg-1"><input type="radio" ng-model="Demo.selectedUrl" ng-value="Demo.example.current" ng-change="Demo.changeUrl(Demo.example.current)"></div>
30+
<div class="col-lg-11"><strong>Current url : </strong><code><small>{{ Demo.example.current }}</small></code></div>
31+
</div>
32+
33+
<div class="row" style="margin-top: 20px">
34+
<div class="col-lg-1"><input type="radio" ng-model="Demo.selectedUrl" ng-value="Demo.example.ex1" ng-change="Demo.changeUrl(Demo.example.ex1)"></div>
35+
<div class="col-lg-11"><code><small>{{ Demo.example.ex1 }}</small></code></div>
36+
</div>
37+
38+
<div class="row" style="margin-top: 20px">
39+
<div class="col-lg-1"><input type="radio" ng-model="Demo.selectedUrl" ng-value="Demo.example.ex2" ng-change="Demo.changeUrl(Demo.example.ex2)"></div>
40+
<div class="col-lg-11"><code><small>{{ Demo.example.ex2 }}</small></code></div>
41+
</div>
42+
43+
<div class="row" style="margin-top: 20px">
44+
<div class="col-lg-1"><input type="radio" ng-model="Demo.selectedUrl" ng-value="Demo.example.ex3" ng-change="Demo.changeUrl(Demo.example.ex3)"></div>
45+
<div class="col-lg-11"><code><small>{{ Demo.example.ex3 }}</small></code></div>
46+
</div>
47+
48+
<div class="row" style="margin-top: 20px">
49+
<div class="col-lg-1"><input type="radio" ng-model="Demo.selectedUrl" ng-value="Demo.example.ex4" ng-change="Demo.changeUrl(Demo.example.ex4)"></div>
50+
<div class="col-lg-11"><code><small>{{ Demo.example.ex4 }}</small></code></div>
51+
</div>
52+
53+
<div class="row" style="margin-top: 20px">
54+
<div class="col-lg-1"><input type="radio" ng-model="Demo.selectedUrl" ng-value="Demo.example.ex5" ng-change="Demo.changeUrl(Demo.example.ex5)"></div>
55+
<div class="col-lg-11"><code><small>{{ Demo.example.ex5 }}</small></code></div>
56+
</div>
57+
</div>
58+
59+
<div class="col-lg-6">
60+
<h2>API</h2>
61+
62+
<!-- getProtocol -->
63+
<div>
64+
<div><strong><kbd>urlParser.getProtocol( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
65+
<div><pre>{{ Demo.protocol | json }}</pre></div>
66+
</div>
67+
68+
<!-- getHost -->
69+
<div>
70+
<div><strong><kbd>urlParser.getHost( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
71+
<div><pre>{{ Demo.host | json }}</pre></div>
72+
</div>
73+
74+
<!-- getHostname -->
75+
<div>
76+
<div><strong><kbd>urlParser.getHostname( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
77+
<div><pre>{{ Demo.hostname | json }}</pre></div>
78+
</div>
79+
80+
<!-- getPort -->
81+
<div>
82+
<div><strong><kbd>urlParser.getPort( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
83+
<div><pre>{{ Demo.port | json }}</pre></div>
84+
</div>
85+
86+
<!-- getRoute -->
87+
<div>
88+
<div><strong><kbd>urlParser.getRoute( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
89+
<div><pre>{{ Demo.route | json }}</pre></div>
90+
</div>
91+
92+
<!-- getRouteAttributes -->
93+
<div>
94+
<div><strong><kbd>urlParser.getRouteAttributes( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
95+
<div><pre>{{ Demo.routeAttributes | json }}</pre></div>
96+
</div>
97+
98+
<!-- getQuerystring -->
99+
<div>
100+
<div><strong><kbd>urlParser.getQuerystring( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
101+
<div><pre>{{ Demo.queryString | json }}</pre></div>
102+
</div>
103+
104+
<!-- getOptions -->
105+
<div>
106+
<div><strong><kbd>urlParser.getOption( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
107+
<div><pre>{{ Demo.option | json }}</pre></div>
108+
</div>
109+
110+
<!-- getHash -->
111+
<div>
112+
<div><strong><kbd>urlParser.getHash( <small>{{ Demo.selectedUrl }}</small> )</kbd></strong></div>
113+
<div><pre>{{ Demo.hash | json }}</pre></div>
114+
</div>
115+
116+
</div>
117+
</div>
118+
119+
<footer class="footer">
120+
<hr/>
121+
<p>© Yllieth 2016</p>
122+
</footer>
123+
124+
</div>
125+
126+
<script type="application/javascript" src="../angular-url-parser.js"></script>
127+
<script type="application/javascript" src="app.js"></script>
128+
</body>
129+
</html>

‎bower.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "angular-url-parser",
3+
"version": "0.0.1",
4+
"homepage": "https://github.com/yllieth/angular-url-parser",
5+
"authors": [
6+
"Sylvain RAGOT <sylvnimes@hotmail.com>"
7+
],
8+
"description": "Url parsing methods",
9+
"main": "angular-url-parser.js",
10+
"keywords": [
11+
"angular",
12+
"module",
13+
"url",
14+
"parser"
15+
],
16+
"license": "MIT",
17+
"ignore": [
18+
"**/.*",
19+
"node_modules",
20+
"bower_components"
21+
],
22+
"dependencies": {
23+
"angular": "^1.5.8"
24+
}
25+
}

0 commit comments

Comments
 (0)