Purpose
A lot of times, I am connected to internet in public place
and don't know from where internet signals are coming, I may visit Get Your
Location in the main navigation and track down internet signal source. This
page in the application takes user's location from browser and gives driving
direction to the location, which is identified by his IP address used to access
internet.
Sometimes, I don't want to open a website from xxxx country,
country name of hosting itself limelight authenticity of a website. I could
visit Search Domain or IP Location in the main navigation to track down hosting
location of an IP/domainName. This page in the application takes user's location
from browser (source) and gives driving direction to the location, which is
identified by IP address given as input / IP address of the domainName
(Destination)
Code
myservice.js: This contains the main angular custom
services built driving controllers in visitorlocation.js , searchip.js and contactus.js
Custom Services in the js file myservice.js -->
geoipService- Talks to external geoIP service to get IP and details like latitude/longitude.
googleService- Talks to external Google map API's , reference for which is added in index.html.
myGeolocation-is used to get latitude and longitude of user's browser.
See comments section (click here) in code for further details.
Custom Services in the js file myservice.js -->
geoipService- Talks to external geoIP service to get IP and details like latitude/longitude.
googleService- Talks to external Google map API's , reference for which is added in index.html.
myGeolocation-is used to get latitude and longitude of user's browser.
See comments section (click here) in code for further details.
index.html: This is the single page, which loads
the entire html based on controller requested. This app may be very well termed
as a single page app containing only one page - index.html which loads required
components. Default load for index.html is introduction.html.
introduction.html: [current html you are viewing] This
view simply welcomes a user. It also list details of the project and its
components. There is no associated controller for this view.
visitorlocation.html: This
view is associated with controller in visitorlocation.js.
Actions in this controller achieved with help of services-
See comments section (click here) in code for further details.
See comments section (click here) in code for further details.
searchip.html: This view is associated with
controller in searchip.js.
User enter a domainName or IP address. This value is processed in the function callTheMagic further on click of search.
Actions in this function achieved with help of services-
See comments section (click here) in code for further details.
User enter a domainName or IP address. This value is processed in the function callTheMagic further on click of search.
Actions in this function achieved with help of services-
See comments section (click here) in code for further details.
contactus.html: This view is associated with
controller in contactus.js.
It gives driving directions to Fort Hays State University.
myapp.js: The routes are defined here.
Weakness
Loading wheels would have been basic requirement not catered here.
Loading wheels would have been basic requirement not catered here.
Languages / Libraries
JQuery (2.1.4), AngularJS (1.4.2) with
Angular-route (1.4.2) for single page app backbone.
freegeoip.net for location by IP.
maps.googleapis.com to get user's current
device/browser location , and detect/display driving directions.
Bootstrap (3.3.5) with sb-admin-2 theme, font-awesome,
metisMenu for desktop/mobile friendly UI.
Demo
Test with saucelabs on Linux + Opera 12: https://youtu.be/5udO_3X9cR0
Test with saucelabs on iOS 10.0 + iPhone 6s: https://youtu.be/VqfjTC6AjJw
Test with saucelabs on iOS 9.3 + iPhone 4s : https://youtu.be/udfi3afwPkY
