Revision: 69433
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at June 19, 2015 19:13 by w2ssolutions
Initial Code
<!doctype html>
<html ng-app="ionicApp"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<!-- ionic/angularjs CSS -->
<link href="css/ionic.css" rel="stylesheet">
<link href="css/ionic-custom.css" rel="stylesheet">
<!-- ionic/angularjs js bundle -->
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.data = {
"loginpassword" : ""
};
$scope.devList = [
{ text: "Keep me Logged in", checked: true }
];
});
</script>
</head>
<body ng-controller="MainCtrl">
<ion-nav-view animation="slide-left-right"><ion-view hide-nav-bar="true" class="pane">
<ion-content class="signin-wrapper scroll-content ionic-scroll" overflow-scroll="true">
<div class="scroll">
<div class="signin-page">
<div style="min-height:80px;"></div>
<div class="signin-logo"> <img src="images/logo.png" alt="" class="logo">
</div>
<form name="myForm" id ="myForm" novalidate ng-submit="submit()">
<div>
<a class="login" href="#">Login</a>
</div>
<div class="list list-inset user-input">
<label class="item item-input">
<img src="images/pwd.png" alt="" class="pwd">
<input type="password" class="loginuser" placeholder="Password" name="loginpassword" id="loginpassword" ng-model="data.loginpassword" required ng-minlength="4" ng-maxlength="10"/>
</label>
</div>
<div class="item errors">
<p ng-show="myForm.loginpassword.$error.required">Password is required</p>
<p ng-show="myForm.loginpassword.$error.minlength">Password is too short</p>
<p ng-show="myForm.loginpassword.$error.maxlength">Password is too long</p>
</div>
<div class="row">
<div class="col col-10">
</div>
<div align="center" class="col col-33">
<a class="button button-block" href="home.html" ng-disabled="myForm.$invalid">Sign In</a>
</div>
<div align="center" class="col col-50">
<div style="min-height: 20px;"></div>
<a class="forget" href="#">Forgot your password?</a>
</div>
<div class="col col-10">
</div>
</div>
<div class="row">
<div class="col col-10">
</div>
<div align="center" class="col col-20">
<ion-checkbox ng-repeat="item in devList"
ng-model="item.checked"
ng-checked="item.checked">
</ion-checkbox>
</div>
<div align="center" class="col col-50">
<a class="check_btn" href="#">Keep me logged in</a>
</div>
<div class="col col-10">
</div>
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>
</ion-nav-view>
</body></html>
Controller.JS
angular.module('starter.controllers', [])
.controller('LoginCtrl', function($scope, $log, $ionicModal, $timeout, $state, $http, $rootScope, ROOT_URL,nativeNotificationFactory,$q,md5) {
$scope.loginData = {};
$scope.loginData.appversion = "5.0";
$scope.CompanyResult = [];
$scope.languages = [];
$scope.langshow = false;
$scope.empid = false;
$scope.deviceshow = false;
$scope.loginData.companyID = "";
$scope.loginData.emailpin="";
$scope.devicePlatform=device.platform;
$scope.signup=false;
$scope.dURL = 'https://api.w2ssolutions.com';
window.plugins.imeiplugin.getImei(callback);
function callback(imei){
$scope.loginData.imei = imei;
$scope.ImeiNoEN = md5.createHash(imei);
};
$scope.doLogin = function(isValid) {
if (!isValid) {
nativeNotificationFactory.showAlert("All fields are required");
}else {
var rData = {
"Form_Code": "",
"Code": "MOB_COM_SEARCH",
"MobileInfo":
{
"IMEINO": $scope.loginData.imei,
"UICulture": "en-CA",
"CompanyID": "MOBTRIAL",
"Token": "test",
"LanguageCode": "ENG"
}
,
"Search_Text": $scope.loginData.company
};
$http.post(ROOT_URL + "login.asmx",
rData,{headers: {
"Content-Type": "application/json"
}}).then(function(response) {
var data = response.data;
},handleNetworkError);
}
}
$scope.select = function(value){
}
$scope.signupStatus = function(){
var rData = {
"MobileInfo":
{
"IMEINO": $scope.loginData.imei,
"UICulture": "en-CA",
"CompanyID": $scope.loginData.companyID,
"Token": "test",
"LanguageCode": 'ENG'
},
"ImeiNo":$scope.loginData.imei,
"EmpId":$scope.loginData.empid
};
$http.post($scope.dURL + "Signup.asmx",
rData,{headers: {
"Content-Type": "application/json"
}}).success(function(response) {
var data = response;
var jData = angular.fromJson(data.d);
var device = jData.Data[0];
if(device == true){
$state.go("signin");
}else{
getDeviceDetails();
}
});
}
function getRequestSignup(){
var rData = {
"MobileInfo":
{
"IMEINO": $scope.loginData.imei,
"UICulture": "en-CA",
"CompanyID": $scope.loginData.companyID,
"Token": "test",
"LanguageCode": 'ENG',
"LoginSource":"Mobile"
},
"EmpID":$scope.loginData.empid,
"ImeiNo":$scope.loginData.imei,
"ImeiNoEN":$scope.ImeiNoEN,
"OSName":$scope.devicePlatform
};
$http.post($scope.dURL + "Requestsignup.asmx",
rData,{headers: {
"Content-Type": "application/json"
}}).success(function(response) {
var data = response;
var jData = angular.fromJson(data.d);
var device = jData.Data[0];
nativeNotificationFactory.showAlert(device);
$scope.signup = true;
}).error(function(data, status, headers, config) {
nativeNotificationFactory.showAlert("error");
});
}
$scope.callbacks = [];
$scope.autocomplete_options = {
suggest:function(request,response){
var semaphore = false;
var result = checktest();
var results = [];
return $q.all([result]).then(function(responses){
var data = responses[0];
var jData = angular.fromJson(data.d);
var companies = jData.Data[0];
angular.forEach(companies, function(value, key) {
var label = value.Text_Field;
var value = value.Value_Field;
results.push({ label: label, value: value });
});
return results;
});
},
on_select:chooseLanguage
};
handleNetworkError = function(response){
nativeNotificationFactory.showAlert(response.status);
};
})
Initial URL
http://www.w2ssolutions.com
Initial Description
Cross platform development is usually an interesting puzzle to solve. Developers will have to concentrate on meeting the requirement and also focus on getting it done for multiple platforms. We would like to showcase a small html and control file that uses ionic framework. Ofcourse the base app development tool is Adobe Phonegap. Ionic framework provides us the flexibility to use Angular JS and HTML 5. Here is a sample code for an UI and the controller.js file. The controller uses a dropdown that fetch values dynamically from a Webservice.
Initial Title
fetch drop down values from API using ionic
Initial Tags
mobile, Development
Initial Language
iPhone