.
107 Ionic Creator Url Shortener Form
This tutorial continues from:
You need to create a web api first (refer the above tutorial) before working on this tutorial.
1. Create a new project
Project Name= ShortenUrl
Template=Blank
2. Add Components
PassCode
Data type=password
ng-model=data.passcode
Long Url
Data type=text
ng-model=data.longurl
Shorten Url
ng-click = doShortenUrl()
Short Url
Data type=text
ng-model=data.shorturl
ng-show=is.shortened
Click To Copy
ng-click=doCopyUrl()
ng-show=is.shortened
|
3. Add Controller Codes
Controller
function ($scope, $stateParams,DataService,$ionicLoading,$ionicPopup) {
$scope.data={}
$scope.is={}
$scope.copieddata=''
$scope.is.shortened=false
$scope.showAlert = function(strTitle,strMessage) {
var alertPopup = $ionicPopup.alert({
title: strTitle,
template: strMessage
});
alertPopup.then(function(res) {
// Custom functionality....
});
};
$scope.doShortenUrl=function(){
var invalidcheck=0;
objData={};
if ($scope.data.passcode=='' || $scope.data.passcode==undefined){
$scope.showAlert ('error','invalid passcode');
invalidcheck++;
}else{
objData.passcode=$scope.data.passcode;
}
if ($scope.data.longurl=='' || $scope.data.longurl==undefined){
$scope.showAlert ('error','invalid long url');
invalidcheck++;
}else{
objData.longurl=$scope.data.longurl;
}
if (invalidcheck==0){ /*if login data valid*/
objData.cmd="shorten";
var sendparameters=Object.keys(objData).map((i)=>i+'='+objData[i]).join('&');
$ionicLoading.show();
DataService.requestPost(sendparameters)
.then(function(response){
switch(response.data.result){
case 'success':
if(response.data.content.rescode==100){
$scope.showAlert ('success',response.data.content.resdesc);
$scope.is.shortened=true
$scope.data.shorturl=response.data.content.resshort
}
break;
case 'error':
$scope.showAlert ('error','unknown input');
break;
default:
$scope.showAlert ('error','unknown error');
}
console.log(response.data.content);
console.log(response);
})
.finally(function(){
$scope.person={};
$ionicLoading.hide();
});
}/*if login data valid*/
}
$scope.doCopyUrl=function(){
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = "0";
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
/*
switch (sourceCode){
case "providerSource":
textArea.value = this.providerSource;
break;
case "pageSource":
textArea.value = this.providerSource;
break;
}
*/
textArea.value = $scope.data.shorturl;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
$scope.showAlert ('clipboard',msg);
//alert('Copied ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
}
|
For var sendparameters=Object.keys(objData).map((i)=>i+'='+objData[i]).join('&');
Alternatively, we can write as follows
var sendparameters= Object.keys(objData).map(function(key){
return encodeURIComponent(key) + '=' + encodeURIComponent(objData[key]); }).join('&'); |
4. Add Service Codes
DataService
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('DataService', ['$http',function($http){
var api_url='https://script.google.com/macros/s/AKfycbyYhj7gWw3Qse9ULBY1ouqS7F1u-N3vhFOrTOGySWAcDy_NDEI/exec?';
return {
requestPost: function(requestparam){
return $http({
method : 'POST',
url : api_url,
data : requestparam, //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function(response) {
//console.log(response);
return response;
if (data.errors) {//data.errors
} else {//data.message
return(data);
}
});
},/*RequestPost*/
}
}]);
|
.
.
So nice post! I create short link by using free url shortener. Have you another site like it. Please share.
ReplyDeleteThank you
Nice blog, thanks for sharing. Create Short URL
ReplyDelete