Showing posts with label AngularJS. Show all posts
Showing posts with label AngularJS. Show all posts

Wednesday, December 14, 2016

Get your location on google maps and find distance from a hosted IP/domain name.

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.
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.
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.
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.

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

Wednesday, April 9, 2014

Muliple Get, Put, Post, Delete under Web API calls to same Controller from Angular JS

In the example mentioned below , you could define multiple PUT to same Web API controller