I am new in angular js. I want to get geolocation in my application. Suppose will enter the address in form displays the with an address to geolocation. Please help me. Please follow the code. //Address HTML page.
<div>
<div class="modal-header" id="mod-header">
<h3 class="modal-title" >Address</h3>
</div>
<div class="modal-body">
<form name='addressForm'>
<div class="row input" >
<div class="col-sm-12" id="mod-col">
<div class="col-sm-5">
<div>
<google-map class="mymap" id="mymap"
gm-center="center"
gm-zoom="zoom"
ng-model="address.entity.mymap"
draggable="true"
mark-click="false">
<markers>
<marker ng-repeat="marker in markers" coords="marker">
</marker>
</markers>
</google-map>
</div>
<!--<div id="map"></div>-->
<!--This is for Address Type-->
<div class="block">
<label>Id</label>
<input type="text" disabled value="" ></input>
</div>
<!--This is for Office Number-->
<div class="block">
<label>Address Type</label>
<select id="mod-dropdown" ng-model="address.entity.atype">
<option value="" selected="selected">Choose Address Type</option>
<option value="H">Home</option>
<option value="B">Business</option>
<option value="G">Guest House</option>
</select>
</div>
<div class="block">
<label>ShareLink</label>
<input type="text" ng-model="address.entity.sharelink"></input>
</div>
<!--This is for Contact Number-->
<div class="block">
<label>Contact Number</label>
<input
type="text"
name="cnum"
ng-model="address.entity.cnum"
ng-minlength="10"
ng-maxlength="10"
ng-pattern="/^[1-9][0-9]{9}$/"
required>
</input>
<span ng-show="addressForm.cnum.$error.pattern">Please enter valid number!</span>
</div>
<!--This is for D.No-->
<div class="block">
<label>D.No</label>
<input
type="text"
ng-model="address.entity.dno"
required>
</input>
</div>
<!--This is for Block-->
<div class="block">
<label>Block</label>
<input
type="text"
ng-model="address.entity.block"
required>
</input>
</div>
</div>
<div class="col-sm-5">
<!--This is for City-->
<div class="block">
<label>Street Name</label>
<input
type="text"
ng-model="address.entity.street"
required>
</input>
</div>
<!--This is for Office Number-->
<div class="block">
<label for="city" >City </label>
<input
type="text"
name="city"
ng-model="address.entity.city" required>
</input>
</div>
<!--This is for State-->
<div class="block">
<label for="state" >State </label>
<input
type="text"
name="state"
ng-model="address.entity.state"required>
</input>
</div>
<!--This is for Country-->
<div class="block">
<label for="country" >Country </label>
<input
type="text"
name="country"
ng-model="address.entity.country"required >
</input>
</div>
<!--This is for Zipcode-->
<div class="block">
<label>Zipcode</label>
<input
type="text"
ng-model="address.entity.zipcode"
required>
</input>
</div>
<!--This is for Po.Box-->
<div class="block">
<label>Po.Box</label>
<input
type="text"
ng-model="address.entity.pobox"
required>
</input>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="address.save()">Save</button>
<button class="btn btn-primary" ng-click="address.remove()">Delete</button>
<button class="btn btn-primary" ng-click="$close()">Cancel</button>
</div>
</div>
//app.js
var app= angular.module("tryment", ["ui.router",
'ui.grid',
'ui.grid.moveColumns',
'ui.grid.selection',
'ui.grid.resizeColumns',
'ui.bootstrap',
'ui.grid.edit',
'ngAnimate'
])
app.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("signin", {
"url" : "/signin",
"templateUrl" : "templates/signin.html",
"controller" : "signinCtrl"
})
.state("list", {
"url" : "/list",
"templateUrl" : "templates/list.html",
"controller" : "MainController"
})
.state("item", {
"url" : "/item/:documentId",
resolve :{
"check" :function($rootScope,$location){
if(!$rootScope.loggedIn){
$location.path('/signin');
}
}
},
"templateUrl" : "templates/item.html",
"controller" : ""
})
.state("home", { "url" : "/home",
resolve :{
"check" :function($rootScope,$location){
if(!$rootScope.loggedIn){
$location.path('/signin');
}
}
},
"templateUrl" : "templates/home.html",
"controller" : "HomeCtrl"
})
.state("forgotpwd", {
"url" : "/forgotpwd",
"templateUrl" : "templates/forgotpwd.html",
"controller" : ""
})
.state("CATab", {
url : "/CATab",
templateUrl : "templates/CATab.html",
controller : 'CATabCtrl'
})
.state('CATab.register', {
url : "/register",
templateUrl : "templates/register.html"
})
.state('CATab.account', {
url : "/account",
templateUrl : "templates/account.html"
})
.state("CATab.confirm", {
url : "/confirm",
templateUrl : "templates/confirm.html"
})
.state("module", {
url : "/module",
templateUrl : "templates/module.html",
controller : 'ModuleCtrl'
})
.state("module.business", {
"url" : "/business",
"templateUrl" : "templates/business.html",
"controller" : "BusinessCtrl"
})
.state("module.expenses", {
"url" : "/expenses",
"templateUrl" : "templates/expenses.html",
"controller" : "ExpensesCtrl"
})
.state("module.invest", {
"url" : "/invest",
"templateUrl" : "templates/invest.html",
"controller" : "InvestCtrl"
})
.state("module.personal", {
"url" : "/personal",
"templateUrl" : "templates/personal.html",
"controller" : "PersonalCtrl"
})
.state ("module.agent", {
"url" : "/agent",
"templateUrl" : "templates/agent.html",
"controller" : "AgentCtrl"
})
.state("module.address", {
"url" : "/address",
"templateUrl" : "templates/address.html",
"controller" : "AddressCtrl"
})
.state("module.loan", {
"url" : "/loan",
"templateUrl" : "templates/loan.html",
"controller" : "LoanCtrl"
});
$urlRouterProvider.otherwise("signin");
});
app.controller("upload", ['$scope', '$http', 'uploadService', function($scope, $http, uploadService) {
$scope.$watch('file', function(newfile, oldfile) {
if(angular.equals(newfile, oldfile) )
{
return;
}
uploadService.upload(newfile).then(function(res){
// DO SOMETHING WITH THE RESULT!
console.log("result", res);
})
});
}])
app.service("uploadService", function($http, $q) {
return ({
upload: upload
});
function upload(file)
{
var upl = $http({
method: 'POST',
url: 'http://jsonplaceholder.typicode.com/posts', // /api/upload
headers: {
'Content-Type': 'multipart/form-data'
},
data: {
upload: file
},
transformRequest: function(data, headersGetter)
{
var formData = new FormData();
angular.forEach(data, function(value, key) {
formData.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return formData;
}
});
return upl.then(handleSuccess, handleError);
} // End upload function
// PRIVATE METHODS.
function handleError(response, data) {
if (!angular.isObject(response.data) ||!response.data.message) {
return ($q.reject("An unknown error occurred."));
}
return ($q.reject(response.data.message));
}
function handleSuccess(response) {
return (response);
}
})
app.directive("fileinput", [function() {
return {
scope: {
fileinput: "=",
filepreview: "="
},
link: function(scope, element, attributes) {
element.bind("change", function(changeEvent) {
scope.fileinput = changeEvent.target.files[0];
var reader = new FileReader();
reader.onload = function(loadEvent) {
scope.$apply(function() {
scope.filepreview = loadEvent.target.result;
});
}
reader.readAsDataURL(scope.fileinput);
});
}
}
}]);
app.controller("MainController",MainController);
app.controller('CATabCtrl', CATabCtrl);
app.controller("ModuleCtrl",ModuleCtrl);
// Business Controllers
app.controller('BusinessCtrl', BusinessCtrl);
app.controller('BusinessRowEditCtrl', BusinessRowEditCtrl);
app.service ('BusinessRowEditorService', BusinessRowEditorService);
// Expenses Controllers
app.controller('ExpensesCtrl', ExpensesCtrl);
app.controller('ExpensesRowEditCtrl', ExpensesRowEditCtrl);
app.service ('ExpensesRowEditorService', ExpensesRowEditorService);
//Invest Controllers
app.controller('InvestCtrl', InvestCtrl);
app.controller('InvestRowEditCtrl', InvestRowEditCtrl);
app.service ('InvestRowEditorService', InvestRowEditorService);
// Address Controllers
app.controller('AddressCtrl', AddressCtrl);
app.controller('AddressRowEditCtrl', AddressRowEditCtrl);
app.service ('AddressRowEditorService', AddressRowEditorService);
// Loan Controllers
app.controller('LoanCtrl', LoanCtrl);
app.controller('LoanRowEditCtrl', LoanRowEditCtrl);
app.service ('LoanRowEditorService', LoanRowEditorService);
//Agent Controllers
app.controller('AgentCtrl', AgentCtrl);
app.controller('AgentRowEditCtrl', AgentRowEditCtrl);
app.service ('AgentRowEditorService', AgentRowEditorService);
//Personal Controllers
app.controller('PersonalCtrl', PersonalCtrl);
//HomeCtrl Starts here
app.controller('HomeCtrl',function($state,$scope,$location,$rootScope,$http,$window)
{
function init() {
if ($window.sessionStorage["userInfo"]) {
userInfo = JSON.parse($window.sessionStorage["userInfo"]);
}
}
init();
//$scope.user = $rootScope.fName;
console.log ($rootScope.loggedIn);
$scope.logout = function () {
$location.path('/home');
};
});
//HomeCtrl Ends here
app.factory("authenticationSvc", ["$http","$q","$window",function ($http, $q,$scope, $window) {
var userInfo;
$scope.check = function()
{
var deferred = $q.defer();
$rootScope.uId = $scope.uName;
$rootScope.pwd = $scope.uPwd;
$rootScope.loggedIn = false;
$http(
{
method: "POST",
url: "/api/check",
data: {
uName : $scope.uName,
pwd : $scope.uPwd
}
})
.success(function(result)
{
if (result.length == 1 )
{
userInfo ={
resFname : result[0].fName,
resLname : result[0].lName
};
$window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
deferred.resolve(userInfo);
// console.log($window.sessionStorage["userInfo"]);
$rootScope.loggedIn = true;
$rootScope.user = userInfo.resFname +" " + userInfo.resLname;
$location.path('/home');
}},
function (error) {
deferred.reject(error);
});
console.log(deferred.promise);
return deferred.promise;
}
function getUserInfo() {
return userInfo;
}
function init() {
if ($window.sessionStorage["userInfo"]) {
userInfo = JSON.parse($window.sessionStorage["userInfo"]);
}
}
init();
return {
getUserInfo: getUserInfo
};
}]);
//Signin Controllers
app.controller('signinCtrl',function($state,$scope,$location,$rootScope,$q,$http,$window)
{
var fullName="";
var errortxt = "";
var deferred = $q.defer();
var userInfo;
$scope.check = function()
{
$rootScope.uId = $scope.uName;
$rootScope.pwd = $scope.uPwd;
$rootScope.loggedIn = false;
$http(
{
method: "POST",
url: "/api/check",
data: {
uName : $scope.uName,
pwd : $scope.uPwd
}
})
.success(function(result)
{
if (result.length == 1 )
{
userInfo ={
resFname : result[0].fName,
resLname : result[0].lName
};
$window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
deferred.resolve(userInfo);
$rootScope.loggedIn = true;
console.log($window.sessionStorage["userInfo"]);
$rootScope.user = result[0].fName + " "+result[0].lName;
console.log(result[0]);
$location.path('/home');
}
else if (result.length > 1)
{
alert("Duplicate Records Exists..Please contact Tryment");
}else{
$scope.errortxt = "Username or Password is incorrect";
}
},
function (error)
{
deferred.reject(error);
}
);
return deferred.promise;
error(function(error)
{
console.log(JSON.stringify(error));
alert ('failed'+ JSON.stringify(error));
});
};
function getUserInfo(){
return userInfo;
}
});
// signin controller ends here
app.run(["$rootScope", "$location", function ($rootScope, $location) {
$rootScope.$on("$routeChangeSuccess", function (userInfo) {
console.log(userInfo);
});
$rootScope.$on("$routeChangeError", function (event, current, previous, eventObj) {
if (eventObj.authenticated === false) {
$location.path("/signin");
}
});
}]);
CATabCtrl.$inject= [ '$scope','$http', '$state', '$stateParams'];
function CATabCtrl($scope,$http, $state,$stateParams)
{
$scope.register = {};
$scope.save = function(uName, pwd, cpwd, pin, cpin,fName, lName, dob, aadhaar, pan, email, gender, aType, mobile, pic,cDate,cBy,mDate,mBy)
{
$http(
{
method: "POST",
url: "/api/registersave",
data: {
uName : uName,
pwd : pwd,
cpwd : cpwd,
pin : pin,
cpin : cpin,
fName : fName,
lName : lName,
dob : dob,
aadhaar : aadhaar,
pan : pan,
email : email,
gender : gender,
aType : aType,
mobile : mobile,
pic : pic,
cDate : new Date(),
cBy : uName,
mDate : new Date(),
mBy : uName,
document_id : $stateParams.documentId
}
})
.success(function(result)
{
$state.go("list");
alert('Details saved successfully.');
})
.error(function(error)
{
console.log(JSON.stringify(error));
});
}
//function to process the form
$scope.processForm = function()
{
alert($scope.register.lName+$scope.register.uName);
};
}
//Module tab Controller..
ModuleCtrl.$inject= [ '$scope'];
function ModuleCtrl($scope)
{
//function to process the form
}
//Module tab Controller ends here..
MainController.$inject= [ '$scope', '$http', '$state', '$stateParams' ];
function MainController($scope, $http, $state, $stateParams)
{
$scope.items = {};
$scope.fetchAll = function()
{
$http(
{
method: "GET",
url: "/api/getAll"
}
)
.success(function(result)
{
for(var i = 0; i < result.length; i++)
{
$scope.items[result[i].id] = result[i];
}
})
.error(function(error)
{
console.log(JSON.stringify(error));
});
}
// Look up a document if we landed in the info screen for editing a document
if($stateParams.documentId)
{
$http(
{
method: "GET",
url: "/api/get",
params: {
document_id: $stateParams.documentId
}
}
)
.success(function(result) {
$scope.register = result[0];
})
.error(function(error) {
console.log(JSON.stringify(error));
});
}
$scope.delete = function(documentId)
{
$http(
{
method: "POST",
url: "/api/delete",
data: {
document_id: documentId
}
}
)
.success(function(result) {
delete $scope.items[documentId];
})
.error(function(error) {
console.log(JSON.stringify(error));
});
}
}
UserController.$inject= [ '$scope', '$http', '$state', '$stateParams' ];
function UserController($scope, $http, $state, $stateParams)
{
$scope.items = {};
$scope.fetch = function()
{
$http(
{
method: "GET",
url: "/api/userGet"
}
)
.success(function(result)
{
for(var i = 0; i < result.length; i++)
{
$scope.items[result[i].id] = result[i];
}
})
.error(function(error)
{
console.log(JSON.stringify(error));
});
}
// Look up a document if we landed in the info screen for editing a document
if($stateParams.documentId)
{
$http(
{
method: "GET",
url: "/api/get",
params: {
document_id: $stateParams.documentId
}
}
)
.success(function(result) {
$scope.register = result[0];
})
.error(function(error) {
console.log(JSON.stringify(error));
});
}
$scope.delete = function(documentId)
{
$http(
{
method: "POST",
url: "/api/delete",
data: {
document_id: documentId
}
}
)
.success(function(result) {
delete $scope.items[documentId];
})
.error(function(error) {
console.log(JSON.stringify(error));
});
}
}
//Address Controller
AddressCtrl.$inject = [ '$scope', '$http', '$modal', 'AddressRowEditorService', 'uiGridConstants','$state' ];
function AddressCtrl($scope, $http, $modal, AddressRowEditorService, uiGridConstants,$state)
{
var adrsctrllocal = this;
adrsctrllocal.adrsCtrlEditRow = AddressRowEditorService.AddressRowEditorServiceEditRow;
adrsctrllocal.serviceGrid = {
enableRowSelection : true,
enableRowHeaderSelection : false,
multiSelect : false,
enableSorting : true,
enableFiltering : true,
enableGridMenu : true,
rowTemplate : "<div ng-dblclick=\"grid.appScope.address.adrsCtrlEditRow(grid, row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>"
};
adrsctrllocal.serviceGrid.columnDefs = [
{
field : 'id',
displayName : 'Id',
enableSorting : true,
type : 'number',
enableCellEdit : false,
sort : {
direction : uiGridConstants.ASC,
priority : 1,
},
},
{
field : 'atype',
displayName : 'Address Type',
enableSorting : true,
enableCellEdit : false
},
{
field : 'sharelink',
displayName : 'ShareLink',
enableSorting : true,
enableCellEdit : false
},
{
field : 'cnum',
displayName : 'Contact Number',
enableSorting : true,
enableCellEdit : false
},
{
field : 'dno',
displayName : 'D.No',
enableSorting : true,
enableCellEdit : false
},
{
field : 'block',
displayName : 'Block',
enableSorting : true,
enableCellEdit : false
},
{
field : 'street',
displayName : 'Street Name',
enableSorting : true,
enableCellEdit : false
},
{
field : 'city',
displayName : 'City',
enableSorting : true,
enableCellEdit : false
},
{
field : 'state',
displayName : 'State',
enableSorting : true,
enableCellEdit : false
},
{
field : 'country',
displayName : 'Country',
enableSorting : true,
enableCellEdit : false
},
{
field : 'zipcode',
displayName : 'Zipcode',
enableSorting : true,
enableCellEdit : false
},
{
field : 'pobox',
displayName : 'Po.Box',
enableSorting : true,
enableCellEdit : false
}
];
$scope.adrsaddRow = function()
{
var newService ={
"id" : "",
"atype" : "",
"sharelink" : "",
"cnum" : "",
"dno" : "",
"block" : "",
"street" : "",
"city" : "",
"state" : "",
"country" : "",
"zipcode" : "",
"pobox" : ""
};
var rowTmp = {};
rowTmp.entity = newService;
adrsctrllocal.adrsCtrlEditRow($scope.address.serviceGrid, rowTmp);
};
}
AddressRowEditorService.$inject = [ '$http', '$rootScope', '$modal','$state' ];
function AddressRowEditorService($http, $rootScope, $modal,$state)
{
var AddressRowEditorService = {};
AddressRowEditorService.AddressRowEditorServiceEditRow = AddressRowEditorServiceEditRow;
function AddressRowEditorServiceEditRow(grid, row)
{
$modal.open({
templateUrl : 'templates/addresspopup.html',
controller : [ '$http', '$modalInstance', 'grid', 'row', AddressRowEditCtrl ],
controllerAs : 'address',
resolve : {
grid : function() {
return grid;
},
row : function() {
return row;
}
}
});
} return AddressRowEditorService;
}
function AddressRowEditCtrl($http, $modalInstance, grid, row,$state)
{
var adrslocal = this;
adrslocal.entity = angular.copy(row.entity);
adrslocal.save = save;
function save()
{
if (row.entity.id == '')
{
row.entity = angular.extend(row.entity, adrslocal.entity);
//real ID come back from response after the save in DB
row.entity.id = Math.floor(100 + Math.random() * 1000);
grid.data.push(row.entity);
}
else
{
row.entity = angular.extend(row.entity, adrslocal.entity);
}
$modalInstance.close(row.entity);
$http({
method : "POST",
url : "/api/addressSave",
data : {
atype : row.entity.atype,
sharelink : row.entity.sharelink,
cnum : row.entity.cnum,
dno : row.entity.dno,
block : row.entity.block,
street : row.entity.street,
city : row.entity.city,
state : row.entity.state,
country : row.entity.country,
zipcode : row.entity.zipcode,
pobox : row.entity.pobox
}
}).success(function(result)
{
$state.go("list");
alert('Details saved successfully.');
})
.error(function(error)
{
console.log(JSON.stringify(error));
});
}
adrslocal.remove = remove;
function remove()
{
console.dir(row)
if (row.entity.id != '0')
{
row.entity = angular.extend(row.entity, adrslocal.entity);
var index = grid.appScope.address.serviceGrid.data.indexOf(row.entity);
grid.appScope.address.serviceGrid.data.splice(index, 1);
}
$modalInstance.close(row.entity);
}
}
//Address Control ends here
//google maps
app.controller('MapCtrl', function($scope)
{
$scope.myMarkers =
{
"latitude":33.22,
"longitude":35.33
}
console.log(mymap);
alert(mymap);
$scope.center = {
latitude: 33.895497,
longitude: 35.480347,
};
$scope.zoom = 13;
$scope.markers = $scope.myMarkers;
$scope.fit = true;
});
via Yamini Sankar
No comments:
Post a Comment