Full Trust European Hosting

BLOG about Full Trust Hosting and Its Technology - Dedicated to European Windows Hosting Customer

AngularJS Hosting Europe - HostForLIFE.eu :: Angular Data Binding

clock October 16, 2020 07:42 by author Peter

Binding is basically the process of connecting data between the view of your application and it's code behind.
In Angular, the view of the application is the HTML page and the code behind is the Component class written in typescript code.
 
There are different types of data binding in Angular,
 
Component to View using interpolation
This is one of the ways of bindings provided by the Angular framework. For this one, we need to have a class level property in our Component class which we use in our HTML using double curly braces.
 
For example, the below code snippet shows a piece of code in the component class. There are 3 properties: department, imgURL and
showspinner, out of which imgURL and showspinner are already initialized, whereas department is just declared.
    department: Any;  
    imgURL: string = "assets/photos/Department.jpg";  
    showSpinner: boolean = false;   


In our HTML file, these properties are used inside double curly braces to render these values directly on the browser. In our case, the imgURL represents the source of the image so that has to be used in the below manner, as shown in the below code snippet.
    <image src = {{imgURL}} >  

When the application gets rendered on the browser, {{imgURL}} gets replaced by assets/photos/Department.jpg.
 
In the real time application, this property is initialized dynamically at runtime.
 
Component to View using property binding
Just like interpolation, this is another type of one way binding. Just like the prior one, in property binding also, we need a class level property that has to be bound with an HTML control on the View. However, the syntax is a little different.
 
Let's use the same example to apply to property binding.
    department: Any;  
    imgURL: string = "assets/photos/Department.jpg";  
    showSpinner: boolean = false;  

To use the property binding we need to use the below syntax. We need to enclose the property of the HTML control inside the square braces and enclose the Component property inside the quotes.
    <image [src] = 'imgURL' >  

Note
While rendering the data on UI, interpolation converts the data into string, whereas property binding does not change the type and renders it as it is.
 
View to Component using event binding
 
This type of binding is used to bind data from View to Component i.e. from the HTML page to the Component class. This one is similar to the events of simple javascript. It can either be a simple click event, a keyup, or any other. The only difference is that the events in Angular have to be put inside circular braces, the rest all is same.
 
As shown in the below code snippet, there are 3 buttons with their respective click events. The methods handling those events are in the code behind file.
    <button (click) = 'addDepartment()' >Add </button>  
    <button (click) = 'editDepartment()' >Edit </button>  
    <button (click) = 'deleteDepartment()' >Delete </button>  

To Bind View and Component Simultaneously (two-way binding)
 
This type of binding is a little different from other frameworks. The two-way binding keeps the property in the Component class and the value of the HTML control in sync. Whenever we change the value of HTML control, the value of the property of the Component class also
changes.
 
To implement this type of binding in Angular, we use a special directive with a little bit different of a syntax.
    <input required [(ngModel)] = 'departmentName' name = 'departmentName' >  

As you can see in the above code snippet, a directive ngModel has been used inside 2 types of braces. The two braces signify two different bindings. The square brace is for property binding that we discussed as the second type and the circular is for event binding, the third one
that we discussed.
 
Lets talk a little about this textbox, whenever there is any change in the value of this textbox an event gets triggered, and by means of the event binding the value gets passed to the Component property and it gets updated and similarly whenever there is any change in the property value, the value of the textbox will also get updated by means of property binding.

The Component property associated with this textbox in the above code is departmentName.
 
Take an example, when we are fetching some data by making an API call, at the beginning the textbox won't have any value but as soon as the value of the property in the Component class gets updated, the value of textbox will also get updated simultaneously.
 
Note
In order to use [(ngModel)] for two-way binding, the name attribute is a must. The Angular framework internally uses the name attribute to map the value of HTML control with the Component property.

HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

 



AngularJS Hosting Europe - HostForLIFE.eu :: How to Create Strong Password for AngularJS Pages?

clock September 18, 2020 08:28 by author Peter

In this post, let me explain you how to create strong password for AngularJS. For choosing a password we need combination of special characters, Capital letter , small letters, digits etc to make it strong. Write the following code:

    <!DOCTYPE html> 
    <html> 
    <head> 
        <title>Strong Password for Angular UI Pages</title>            
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>   
        <script> 
            var app = angular.module("myApp", []); 
            app.controller("myCtrl", function ($scope) {        
                var strongRegularExp = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[[email protected]#\$%\^&\*])(?=.{8,})");        
                var mediumRegularExp = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");        
                $scope.checkpwdStrength = { 
                    "width": "150px", 
                    "height": "25px", 
                    "float": "right" 
                };        
                $scope.validationInputPwdText = function (value) { 
                    if (strongRegularExp.test(value)) { 
                        $scope.checkpwdStrength["background-color"] = "green"; 
                        $scope.userPasswordstrength = 'You have a Very Strong Password now'; 
                    } else if (mediumRegularExp.test(value)) { 
                        $scope.checkpwdStrength["background-color"] = "orange"; 
                        $scope.userPasswordstrength = 'Strong password, Please give a very strong password';  
                    } else { 
                        $scope.checkpwdStrength["background-color"] = "red"; 
                        $scope.userPasswordstrength = 'Weak Password , Please give a strong password'; 
                    }                  
};        
           }); 
        </script> 
    </head> 
    <body ng-app="myApp"> 
        <div ng-controller="myCtrl" style="border:5px solid gray; width:800px;"> 
            <div> 
                <h3>Strong Password for Angular UI Pages </h3> 
            </div> 
            <div style="padding-left:25px;">                  
<div ng-style="checkpwdStrength"></div> 
                <input type="password" ng-model="userPassword" ng-change="validationInputPwdText(userPassword)" class="class1" /> 
                <b> {{userPasswordstrength}}</b> 
            </div> 
            <br /> 
            <br /> 
            <br /> 
        </div> 
    </body> 
    </html> 

HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: AngularJS: $http

clock August 21, 2019 12:35 by author Peter

In this tutorial, I will tell you about $http in AngularJS. I am gonna show you AngularJS Basic Filters. $http is a service for reading data from web services. It will use get (service URL) method for the process. Now, write the following code:

<div ng-app="httpApp" ng-controller="httpController"> 
     <ul> 
        <li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }} 
</li> 
    </ul> 
</div>

In the below code, we've an Angular app httpApp and a controller httpController. currently we want to make our controller part, right?
    < script > 
    var app = angular.module('httpApp', []); 
    app.controller('httpController', function($scope, $http) {          $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=- 22.4&west=55.2&lang=de&username=demo") 
            .success(function(response) { 
            $scope.details = response.geonames; 
        }); 
    }); < /script> 


In the preceding code we are using the $http.get() technique of Angular. within the url part we've got given a sample web service url of geo data. you'll get these free net services here. So within the success part we tend to are returning the response of the web service. Now if you write the response.geonames within the success in the browser console as follows, you'll get the array as shown on the following code:

console.log(response.geonames); 

Once it is returned we are showing the response data to the UI using the repeat directive.
And here is the complete HTML
    <!DOCTYPE html> 
    <html 
        xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <title>Angular $http</title> 
            <style> 
             li { 
                border: 1px solid #ccc; 
                border-right: none; 
                border-left: none; 
                padding: 2px; 
                text-align: center; 
                list-style:none; 
              }  
             </style> 
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
       </head> 
        <body> 
            <div ng-app="httpApp" ng-controller="httpController"> 
                <ul> 
                    <li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }} </li> 
                </ul> 
            </div> 
           <script>  
                var app = angular.module('httpApp', []); 
                app.controller('httpController', function ($scope, $http) { 
                $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=peter") 
                .success(function (response) {  
                   $scope.details = response.geonames;  
                   console.log(response.geonames); 
                   }); 
             }); 
             </script> 
        </body> 
    </html> 


You can add the following CSS to your page.
    < style > li { 
        border: 1px solid#ccc; 
        border - right: none; 
        border - left: none; 
        padding: 2px; 
        text - align: center; 
        list - style: none; 
    } < /style>

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.



AngularJS Hosting - HostForLIFE.eu :: How to Binding Table with JSON String using AngularJS?

clock September 14, 2015 06:39 by author Peter

Today, let me tell you about binding table with JSON String using Angular.This is a really easy Javascript function, that helps to convert Json String to a hypertext mark-up language Table by using AngularJS Frameworks. Define a well structured Json string as shown below, this Json string contains the information of two IT departments with the following code:

var dept1 = {  
    "data": [{  
            "Name": "Robert",  
            "City": "London",  
            "Country": "United Kingdom"  
    },  
            {  
            "Name": "Scott",  
            "City": "Manchester",  
            "Country": "United Kingdom"  
    },  
            {  
            "Name": "Rebecca",  
            "City": "Liverpool",  
            "Country": "United Kingdom"  
    },                    
            {  
            "Name": "Peter",  
            "City": "Bristol",  
            "Country": "United Kingdom"  
    },                    
            {  
            "Name": "Thomas",  
            "City": "Leeds",  
            "Country": "United Kingdom"  
    }]  
}  
var dept2 = {        
    "data": [  
            {  
            "Name": "Ethan",  
            "City": "Cardiff",  
            "Country": "United Kingdom"  
    },               
            {  
            "Name": "David",  
            "City": "Southampton",  
            "Country": "United Kingdom"  
    },                
            {  
            "Name": "Suzan",  
            "City": "Norwich",  
            "Country": "United Kingdom"  
    }  
]  
}
 

JS (Functions)
var app = angular.module('myApp', []);  
 
app.controller('employees', function($scope, $http) {  
    $scope.names = dept1.data;  
    $scope.next = function() {  
        $scope.names = dept2.data;  
    }  
     $scope.prev = function() {  
        $scope.names = dept1.data;  
    }  
});


HTML
<div ng-app="myApp" ng-controller="employees">    
    <input type="button" value="Development" ng-click="prev();">    
          <input type="button" value="Testing" ng-click="next();">    
    <table>    
        <tr ng-repeat="x in names">    
            <td>{{ x.Name }}</td>    
            <td>{{ x.Country }}</td>    
        </tr>    
    </table>    
</div>   
            

CSS
table {    
    border-collapse: collapse;    
    width: 100%;    
}    
th, td {    
    padding: 0.25rem;    
    text-align: left;    
    border: 1px solid #ccc;    
}    
tbody tr:hover {    
    background: yellow;    
}    

HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



AngularJS Hosting - HostForLIFE.eu :: How to Custom DropDown Control Using Bootstrap and AngularJS?

clock July 2, 2015 10:47 by author Peter

When we wish to develop a web-based application using AngularJs, it usually needs a dropdown control with some extra features like search text and then on. however like classic ASP.NET, always a ready-made control isn't available in the AngularJs Framework. but really, if we would like to create a custom dropdown control, we are able to produce it easily. using this article, we'll find out how to create a custom dropdown control.

For that, we are going to first open Visual Studio and make a blank ASP.NET web application. we then have to be compelled to install some Nuget packages like AngularJs, Bootstrap and Angular UI.

Now produce a html file named DropDown.html. it's the template file for the dropdown directive. in this file, add the following code:
<div class="btn-group" dropdown is-open="status.isopen" style="width:{{DropDownParam.Width}};"> 
<div style="float:left;width:100%;"> 
<input type="text" class="form-control" style="width:90%;" ng-disabled="DropDownParam.Disabled" 
id="{{TextControlID}}" placeholder="{{DropDownParam.placeholder}}" value="{{SelectText}}"  
ng-model="SelectText" ng-change="toggleDropdown();" ng-model-options="{debounce:1000}"> 
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="DropDownParam.Disabled" 
id="{{ButtonControlID}}" ng-click="fnShowDropDown();"> 
<span class="caret"></span> 
</button> 
</div> 
<ul class="dropdown-menu" role="menu" style="height:{{DropDownParam.height}};overflow:auto;overflow-x:hidden;width:95%;"> 
<li ng-repeat="item in DropDownParam.source | filter: {Text : SelectText}" data-ng-click="selectItem(item)"> 
<a><span tabindex="-1" style="cursor:pointer;" data-ng-click="selectItem(item)">{{item.Text}}</span></a> 
</li> 
</ul> 
</div>  


Now add another file named "DemoDropDown.html" that shows the functionality of the dropdown control. in that file, we will use the reference of Angular.min.js file and bootstrap.js file. Also, we will use the reference of the bootstrap.css file. Write the following code in this HTML file:
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Drop Down Demo</title> 
<script src="../RefScript/angular.min.js"></script> 
<script src="../RefScript/ui-bootstrap.min.js"></script> 
<script src="../PageScript/CustomCtrlApp.js"></script> 
<script src="../DirectiveScript/DropDown.js"></script> 
<script src="../PageScript/DropDownDemo.js"></script> 

<link href="../RefStyle/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<body ng-app="CustomCtrlApp"> 
<div ng-controller="DropDownDemo"> 
<h2>{{Heading1}}</h2> 
<div> 
<table style="width:100%;column-span:all;" cellpadding="5" cellspacing="10" > 
<tr> 
<td style="width:40%;">Basic Drop Down </td> 
<td style="width:60%;"><ng-drop-down dropdown-setting="ComboSetting" callbackfunction="fnChange"></ng-drop-down></td> 
</tr> 
<tr> 
<td colspan="2"> 
<span>Select Item : {{SelectText}}</span> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<input type="button" value="Get Text" ng-click="fnGetText();" /> 
<input type="button" value="Get Text" ng-click="fnGetValue();" /> 
<input type="button" value="Clear Selection" ng-click="fnClearItem();" /> 
<input type="button" value="Clear Combo" ng-click="fnClear();" /> 
<input type="button" value="Enable Combo" ng-click="fnEnable(true);" /> 
<input type="button" value="Disable Combo" ng-click="fnEnable(false);" /> 
</td> 
</tr> 
<tr> 
<td><input type="text" ng-model="SetValue" /></td> 
<td> 
<input type="button" value="Set Item by Value" ng-click="fnSetItem();" /> 
<input type="button" value="Set Item by Index" ng-click="fnSetIndex();" /> 
</td> 
</tr> 
</table> 
</div>        
</div> 
</body> 
</html>  

Now it's time to add our own JavaScript file. First, we need to create an Angular App file named "CustomCtrlApp.Js" and add the following code:
var CustomCtrlApp = angular.module('CustomCtrlApp', ['ui.bootstrap']);  

Next step, we will add another JavaScript file named "DropDown.js" that is the controller file of the dropdown directive to define the attribute, events and methods of the dropdown control. Then, write the following code:
CustomCtrlApp.directive("ngDropDown", [function () { 
this; 
return { 
restrict: "EA", 
scope: { 
DropDownSetup: '=dropdownSetting', 
callbackfunction: '=' 
}, 
templateUrl: '../HTMLTemplate/DropDown.html', 
controller: function ($scope, $element, $attrs) { 
$scope.DropDownParam = $scope.DropDownSetup.attribute; 
$scope.TextControlID = "txt" + $scope.DropDownSetup.attribute.id; 
$scope.ButtonControlID = "btn" + $scope.DropDownSetup.attribute.id; 
$scope.showDropDown = false; 
$scope.SelectText = ''; 

if ($scope.DropDownParam.Width != #ff0000) { 
var width = $scope.DropDownParam.Width.substr(0, $scope.DropDownParam.Width.length - 1); 
$scope.BoxWidth = Math.round(width * 0.95, 0) + '%'; 

else { 
$scope.BoxWidth = '95%'; 


if ($scope.DropDownParam.Enabled != undefined) { 
$scope.DropDownParam.Disabled = !$scope.DropDownParam.Enabled; 

else { 
$scope.DropDownParam.Disabled = false; 


if ($scope.DropDownSetup.events == undefined) { 
$scop.DropDownSetup.events = {}; 


$scope.fnShowDropDown = function () { 
if ($scope.DropDownParam.source.length > 0) { 
$scope.showDropDown = !$scope.showDropDown; 

else { 
$scope.showDropDown = false; 



$scope.selectItem = function (item) { 
$scope.SelectText = item.Text; 
$scope.DropDownSetup.attribute.Text = item.Text; 
$scope.DropDownSetup.attribute.Value = item.Value; 
$scope.showDropDown = false;                 
$scope.DropDownSetup.events.selectedIndexChange(item); 


function assignDropDownMethod() { 
$scope.DropDownSetup.method = { 
clearSelection: function () { 
    $scope.SelectText = ''; 
}, 
clear: function () { 
    $scope.DropDownParam.source = ''; 
    $scope.SelectText = ''; 
}, 
selectItemByValue: function (value) { 
    var result_obj = objectFindByKey($scope.DropDownParam.source, 'Value', value); 
    if (result_obj != null) { 
        $scope.selectItem(result_obj); 
    } 
}, 
selectItemByIndex: function (index) { 
    var result_obj = $scope.DropDownParam.source[index]; 
    if (result_obj != null) { 
        $scope.selectItem(result_obj); 
    } 
}, 
setEnable: function (param) { 
    $scope.DropDownParam.Disabled = !param; 




assignDropDownMethod(); 

function objectFindByKey(array, key, value) { 
for (var i = 0; i < array.length; i++) { 
if (array[i][key] === value) { 
    return array[i]; 


return null; 


$scope.fnHideDropDown = function () { 
$scope.showDropDown = false; 


$scope.status = { 
isopen: false 
}; 

$scope.toggleDropdown = function () { 
if ($scope.DropDownParam.source.length > 0) { 
$scope.showDropDown = !$scope.showDropDown; 
$scope.status.isopen = !$scope.status.isopen; 

else { 
$scope.showDropDown = false; 
$scope.status.isopen = false; 


}; 


}]);  

Run the project and check the output here.

HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



AngularJS Hosting - HostForLIFE.eu :: Create Signup and Login Page with AngularJS

clock June 23, 2015 07:48 by author Peter

In this article, I will tell you about how to Create Signup and Login Page with AngularJS. Here is the design:

Html code For Signup
This code in use a angularjs and bootstrap
<div class="form-horizontal" id="singup" name="myForm" ng-show="Registration" ng-hide="true"> 
<p style="margin-left: 185px; font-size: 200%; font-weight: bold"> 
New User Registration</p> 
<div class="form-group" style="margin-top: 30px"> 
<label class="col-sm-3 control-label"> 
Enter UserName</label> 
<div class="col-sm-4"> 
    <input type="text" id="uname" name="uname" ng-model="uname" placeholder="User Name" 
class="form-control" /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Address</label> 
<div class="col-sm-4"> 
    <textarea ng-model="add" name="add" id="add" class="form-control" placeholder="Enter Address"></textarea> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Phone Number</label> 
<div class="col-sm-4"> 
    <input type="text" ng-model="phone" id="phone" placeholder="Phone Number" class="form-control" /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Education</label> 
<div class="col-sm-4"> 
    <select ng-model="edu" id="edus"> 
Select 
        <option value="BCA">BCA</option> 
        <option value="BBA">BBA</option> 
        <option value="BCOM">BCOM</option> 
        <option value="MCA">MCA</option> 
        <option value="MBA">MBA</option> 
        <option value="MCOM">MCOM</option> 
    </select> 
    <br /> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 
Gender</label> 
<div class="col-sm-4"> 
    <input type="radio" name="gender" ng-model="age" value="Male" /> 
Male 
    <input type="radio" name="gender" ng-model="age" value="Female" /> 
Female 
    <br /> 
    <tt id="gen" ng-hide="true">{{age | json}}</tt> 
    <br /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Password</label> 
<div class="col-sm-4"> 
    <input type="password" ng-model="pass" id="pass" placeholder="Enter Password" class="form-control" /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Re-Password</label> 
<div class="col-sm-4"> 
    <input type="password" ng-model="repass" id="repass" placeholder="ReEnter Password" 
class="form-control" /> 
</div> 
</div> 
<button type="button" class="btn btn-primary btn-lg" ng-click="saveUser()" style="margin-left: 150px;"> 
<span class="glyphicon glyphicon-save"></span>Registration 

</button> 
<button type="button" id="cbtn" class="btn btn-danger btn-lg" ng-click="cancel_r()"> 
Cancel  
<span class="glyphicon glyphicon-off"></span> 
</button> 
<br /> 
<br /> 
<br /> 
</div>

Here is the ASP.NET code for Signup. You should save data using webMethod:
<Services.WebMethod()> 
Public Shared Function SaveUser(ByVal uname As String, ByVal add As String, ByVal phone As String, ByVal edu As String, ByVal age As String, ByVal pass As String, ByVal repass As String) As String 
'Insert 
Dim Users As New StrategicAlliance2.User3 
Dim UsersDit1 As New StrategicAlliance2.UserRegistrationObject 
'Users.GetUserDetailsByID(id) 
UsersDit1.Username = uname 
UsersDit1.Address = add 
UsersDit1.Phone_No = phone 
UsersDit1.Education = edu 
UsersDit1.Gender = age 
UsersDit1.Password = pass 
UsersDit1.Re_Password = repass 
Users.InsertUserDetails(UsersDit1) 
End Function


The following Js Code is for Signup. The below code for saveUser Butoon click:
$scope.saveUser = function()  

strErrorMsg = ""; 
notEmpty(document.getElementById('uname'), '-Enter your UserName.'); 
notEmpty(document.getElementById('add'), '-Enter your Address'); 
notEmpty(document.getElementById('phone'), '-Enter your Phone Number'); 
notEmpty(document.getElementById('pass'), '-Enter Password'); 
notEmpty(document.getElementById('edus'), '-Enter Education'); 
notEmpty(document.getElementById('repass'), '-Enter Re-Password'); 
ValidMno(document.getElementById('phone'), '-Enter Valid Phone Number'); 
checkPass(document.getElementById('repass'), '-Password Not Match') 
if (strErrorMsg == '') 

$.ajax({ 
    type: "POST", 
    url: "UserLogin.aspx/SaveUser", 
    contentType: "application/json; charset=utf-8", 
    data: JSON.stringify({ 
        uname: $scope.uname, 
        fName: $scope.fName, 
        add: $scope.add, 
        phone: $scope.phone, 
        edu: $scope.edu, 
        age: $scope.age, 
        pass: $scope.pass, 
        repass: $scope.repass 
    }), 
    success: function(data)  
    { 
        alert("Registration Success"); 
        // window.location.href = "UserLogin.aspx"; 
        $scope.login = true; 
        $scope.Registration = false; 
        $scope.$apply(); 
    } 

}); 

}; 


Now, it's time to create Login Page
Html Code for Login. The following code in use a Angularjs & Bootstrap
<div class="form-horizontal" ng-show="login" ng-hide="false"><%--  
<a class="btn btn-info btn-lg" ng-click="UserR()" style="margin-left: 375px;"> 
    <span 
class="glyphicon glyphicon-user"></span>User Registration  
</a>--%> 
<h1 class="form-signin-heading text-muted" style="margin-top: 10px"> 
Sign In</h1> 
<div class="form-group" style="margin-top: 30px"> 
    <label class="col-sm-2 control-label"> 
User Name:</label> 
    <div class="col-sm-2"> 
        <input type="text" class="form-control" id="login_User" name="login_User" ng-model="login_User" 
placeholder="User Name" autofocus="" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-2 control-label"> 
Password:</label> 
    <div class="col-sm-2"> 
        <input type="password" class="form-control" id="login_Pass" name="login_Pass" ng-model="login_Pass" 
placeholder="Password" /> 
    </div> 
</div> 
<button type="button" class="btn btn-primary" ng-click="Login()" style="margin-left: 200px;"> 
    <span class="glyphicon glyphicon-log-in"></span>Sign In 

</button> 
<button type="button" class="btn btn-danger" ng-click="cancel()"> 
    <span class="glyphicon glyphicon-cancel"></span>Cancel 

</button> 
<br /> 
<a href="" style="font-size: 20px; color: Red; margin-left: 135px; margin-top: 20px" 
ng-click="UserR()">If you are not Registered Then click here </a> 
<br /> 
<p style="font-size: 20px; color: Blue; margin-left: 180px; margin-top: 10px"> 
One account is all you need 
</p> 
<p style="font-size: 16px; color: Black; margin-left: 90px;"> 
A single username and password gets you into everything Google. 
</p> 
<img style="margin-left: 75px" src="Images/logo_strip_sign_up_2x.png" height="50px" 
width="350px" /> 
</div> 


Code for Login with ASP.NET
The below code is to fatch data from database using webmethod and match with the entered data.
< Services.WebMethod() > Public Shared Function UserLogin() As StrategicAlliance2.UserRegistrationObject() 
Dim Users As New StrategicAlliance2.User3 
Dim details As New List(Of StrategicAlliance2.UserRegistrationObject) 
For Each dtrow As DataRow In Users.GetTableOfUserDetails.Rows 
Dim user As New StrategicAlliance2.UserRegistrationObject 
user.Username = dtrow("Username").ToString() 
user.Password = dtrow("password").ToString() 
details.Add(user) 
Next 
Return details.ToArray() 
End Function 


Js Code for Login
In this code in login button and cancel button
$scope.Login = function()  

strErrorMsg = ""; 
notEmpty(document.getElementById('login_User'), '-Enter your UserName.'); 
notEmpty(document.getElementById('login_Pass'), '-Enter your Password'); 
if (strErrorMsg == '')  

$.ajax({ 
type: "POST", 
contentType: "application/json; charset=utf-8", 
url: "UserLogin.aspx/UserLogin", 
data: "{}", 
dataType: "json", 
success: function(data)  

    for (var i = 0; i < data.d.length; i++)  
    { 
        User = data.d[i].Username; 
        Password = data.d[i].Password; 
        a = (User); 
        b = (Password); 
        if ($scope.login_User == a && $scope.login_Pass == b) { 
            window.location.href = "Default.aspx"; 
        } 
    } 
    if ($scope.login_Pass != b)  
    { 
        alert("Enter Valid ID And Password"); 
        $scope.login_User = ''; 
        $scope.login_Pass = ''; 
        $scope.$apply(); 
    } 

}); 

if (strErrorMsg != '') 

alert('\n' + strErrorMsg); 
} else  


}; 
$scope.cancel = function()  

$scope.login_User = ''; 
$scope.login_Pass = ''; 
}; 

HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



AngularJS Hosting - HostForLIFE.eu :: How to Filtering and Sorting HTML Table Data With AngularJS?

clock May 27, 2015 08:08 by author Peter

Now, I am going to tell you about How to Filtering and Sorting HTML Table Data With AngularJS. There should be three cascading dropdowns to filter the data in the table. You should also be able to sort the table. And here is the following code:

    angular.module('tableApp', []) 
    .controller('tableCtrl', ['$scope', '$http', '$timeout',function($scope, $http)  
    {                
         $http.get('tableData/practionerData.json').success(function(data) 
         { 
             $scope.practionerData = data;                        
         } 
         ); 
         $http.get('tableData/practionerType.json').success(function(practionerdata) 
         { 
              $scope.practionerType = practionerdata;      
         }           
         );
         $http.get('tableData/practionersByType.json').success(function(practionersByType) 
         { 
               $scope.practionersByType = practionersByType;       
         }           
         );
         $http.get('tableData/OrganizationByPractioners.json').success(function(OrganizationByPractioners) 
         { 
               $scope.OrganizationByPractioners = OrganizationByPractioners;                
         }  
         ); 
      }   
    ]) 


Next step, I am going to populating the data in $scope with the JSON file. I can do it with the web service also. I can also post the scope data to the server with the web service. And here is the HTML page code:
    <!DOCTYPE html> 
    <html lang='en' ng-app='tableApp'> 
    <head>      
    <title>Table Example</title>     
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js'></script>     
        <script src='js/controller.js' type='text/javascript'></script> 
        <link href='style.css' type='text/css' rel='stylesheet' /> 
    </head>    
    <body ng-controller='tableCtrl'>   

   <div id="content">     
    <table id='practitioner_table'  > 
                       <tr> 
                <th colspan="7" style="text-align:right">         
                        <i class="fa fa-search">search  
                           <select ng-model="searchObj.practitionerType" ng-options="item.practitionerTypeID as item.practitionerTypeID for item in practitionerType"> 
                        <option value="">--Select--</option> 
                    </select> 
                              <select ng-disabled="!searchObj.practitionerType" ng-model="searchObj.practitioner_master_id" ng-options="item.practitioner_master_id as item.practitioner_name for item in practitionersByType| filter: {practitionerTypeID:searchObj.practitionerType}"> 
                        <option value="">--Select--</option> 
                    </select>        
                    <select ng-disabled="!searchObj.practitioner_master_id" ng-model="searchObj.organizationName" ng-options="item.organizationName as item.organizationName for item in OrganizationByPractitioners|filter:{practitioner_master_id:searchObj.practitioner_master_id}"> 
                        <option value="">--Select--</option> 
                    </select>        
                    </i>  
                    </th> 
               </tr>   
            <tr>          
                <th><a href="#" ng-click="predicate = 'practitionerType';reverse=!reverse">Practitioner Type</a> </th>           
                <th><a href="#" ng-click="predicate = 'practitioner_name';reverse=!reverse">Practitioner Name</a></th>  
                <th><a href="#" ng-click="predicate = 'organizationName';reverse=!reverse">Organization Name</a></th>                                      
               </tr>  
            <tr ng-repeat="practitioner in practitionerData | orderBy:predicate:reverse| filter: {practitionerType:searchObj.practitionerType,practitioner_master_id:searchObj.practitioner_master_id,organizationName:searchObj.organizationName}">           
              <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.practitionerType}}</td>            
                <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.practitioner_name}}</td>           
                <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.organizationName}}</td>                
           </tr>                      
    </table>   
    </div>     
    </body> 


Finally, I am populating the dropdown and table with scope data. Remember that the <select> tag and I am cascading the dropdowns using “filter” in “ng-options”. “ng-disabled” is used to keep the child dropdown disabled until the parent dropdown has the value.

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Make Facebook Style AutoComplete in AngularJS with ASP.NET MVC?

clock May 19, 2015 10:31 by author Peter

In this tutorial, I will explain you how to make facebook style autocomplete in AngulaJS with MVC. First step, you must include the following libraries, AngularJS and ui-bootstrap-tpls.

After that, create a new ASP.NET MVC project and then Add a Home Controller. Add a Index view. Now, write the following code to your index view:
<html ng-app="myApp">
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls.min.js"></script>
    <script src="~/Scripts/AutoCompleteDemo.js"></script>
    <link href="~/Css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div ng-controller="myCtrl" class="row-fluid">
            <form class="row-fluid">
                <div class="container-fluid">
                    Code <input type="text" ng-model="selectedCode" />
                    City <input type="text" typeahead-on-select="setcode($item)" ng-model="selected" typeahead="Cityx.CityName for Cityx in City | filter:$viewValue" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Now, binding typeahead directive to our input field. Make a js file and name it as AutoCompleteDemo.
Write the below code to it:
angular.module('myApp', ['ui.bootstrap'])
    .controller("myCtrl", function ($scope) {
        $scope.selected = '';
        $scope.City = [
                    { code: 'AL', CityName: 'Alabama' },
                    { code: 'ID', CityName: 'Idaho' },
                    { code: 'CA', CityName: 'California' },
                    { code: 'NV', CityName: 'Nevada' },
                    { code: 'NY', CityName: 'New York' },
                    { code: 'FL', CityName: 'Florida' },
                    { code: 'KS', CityName: 'Kansas' },
                    { code: 'OH', CityName: 'Ohio' },
                    { code: 'TX', CityName: 'Texas' },
        ];
       $scope.setcode = function (selection) {
            $scope.selectedCode = selection.code;
        };

});

In above code.
a) First Inject the dependency on ui.bootstrap module.
b) Create sample list of city with their code to see AutoComplete.

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Upload a Picture Using AngularJS with ASP.NET 5?

clock May 5, 2015 11:24 by author Peter

Today, I will show you how to upload a picture using AngularJS with ASP.NET 5. First, you must create a new project and then write the following code:

Web.config File
    <appSettings> 
       <add key="Filesize" value="50KB"/> 
       <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" /> 
    </appSettings>


Asp File
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    Try 
    Response.Clear() 
    Dim fileid As String = System.Guid.NewGuid.ToString() 
    Dim imgsize As String = ConfigurationManager.AppSettings("Filesize") 
    Dim a As String = Context.Request.Files.Get(0).ContentLength.ToString 
    Dim b As String = Math.Round(a / 1024) 
    Dim c As String = imgsize.Replace(("KB").ToString, "") 
    If Val(b) < Val(c) Then 
        Context.Request.Files.Get(0).SaveAs("D:\manish\Project\Project\upload\" & fileid & ".jpg") 
        Response.Write("True|" & fileid) 
    Else 
        Response.Write("False|Select File Less Then " + imgsize + " || Your File Size is " + b + " KB") 
    End If 
    Response.End() 
    Catch ex As ArgumentOutOfRangeException 
    MsgBox("'Select A File' Then Click On Upload Button") 
    End Try 
    End Sub 

JS File
    var myApp = angular.module('myApp', ['ui.bootstrap']); 
    //upload a file code 
    myApp.directive('fileModel', ['$parse', function($parse) { 
       return { 
            restrict: 'A', 
            link: function(scope, element, attrs) { 
                var model = $parse(attrs.fileModel); 
                var modelSetter = model.assign; 
                element.bind('change', function() { 
                    scope.$apply(function() { 
                        modelSetter(scope, element[0].files[0]); 
                    }); 
                }); 
            } 
        }; 
    }]); 
    myApp.service('fileUpload', ['$http', function($http) { 
        this.uploadFileToUrl = function(file, uploadUrl) { 
            var fd = new FormData(); 
            fd.append('file', file); 
            $http.post(uploadUrl, fd, { 
                transformRequest: angular.identity, 
                headers: { 
                    'Content-Type': undefined 
                }        
            }) 
                      .success(function(data) { 
                if (data.split("|")[0] == "True") { 
                    $("#getimg").attr('src', 'upload/' + data.split("|")[1] + '.jpg'); 
                    $("#hid").val(data.split("|")[1] + ".jpg"); 
                   var img = $("#hid").val(); 
                    if (img == "noimage.jpg") { 
                        $("#Remov").hide(); 
                    } else { 
                        $("#Remov").show(); 
                    }        
                } else if (data.split("|")[0] == "False") { 
                    alert(data.split("|")[1]); 
                    var ab = $("#hid").val(); 
                    $("#getimg").attr('src', 'upload/' + ab); 
                    var img = $("#hid").val(); 
                    if (img == "noimage.jpg") { 
                        $("#Remov").hide(); 
                    } else { 
                        $("#Remov").show(); 
                    } 
                      } 
            })                  
.error(function() { 
                if ($(myFile).val() == "") { 
                    alert("Select a file"); 
                } else { 
                    alert("Select a image file"); 
                } 
            }); 
        } 
    }]);        
    $scope.uploadFile = function() { 
        var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp']; 
        if ($(myFile).val() == "") { 
            alert("Select a file"); 
        } else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) { 
            alert("Select a image file"); 
            $(myFile).val(''); 
            $("#hid").val("noimage.jpg"); 
        } else { 
            var file = $scope.myFile; 
            var uploadUrl = "Image_Upload.aspx"; 
            fileUpload.uploadFileToUrl(file, uploadUrl); 
            $scope.myFile = ""; 
            $scope.remove = true; 
            var reader = new FileReader(); 
            reader.onload = function(e) { 
                scope.image = e.target.result; 
                scope.$apply(); 
            } 
        } 
              elem.on('change', function() { 
            reader.readAsDataURL(elem[0].files[0]); 
        }); 
        return false; 
    }; 

I hope this post wil works for you. Good luck!

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Checkout Utility Methods on AngularJS?

clock April 28, 2015 08:15 by author Peter

In this tutorial, I will tell you about how to checkout some utility methods that returns BOOLEAN values on call. In AngularJS you can find many utility method like isObject, isString, isDefined, etc to check the type of the input.

All these method has similar signature like isXxxxx(). In the following code, will show you some utility methods that are present inside the angular object.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-8">
 <title> How to Checkout Utility Methods on AngularJS? </title>
</head>
<body ng-controller="MyController" ng-cloak>
<h3>angular.isArray : {{isArray}}</h3>
<h3>angular.isDate: {{isDate}}</h3>
<h3>angular.isDefined : {{isDefined}}</h3>
<h3>angular.isElement : {{isElement}}</h3>
<h3>angular.isFunction : {{isFunction}}</h3>
<h3>angular.isNumber : {{isNumber}}</h3>
<h3>angular.isObject : {{isObject}}</h3>
<h3>angular.isString : {{isString}}</h3>
<h3>angular.isUndefined : {{isUndefined}}</h3>

<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope",
function($scope) {
var fruitList = ["Apple", "Orange"];
$scope.isArray = angular.isArray(fruitList);
$scope.isDate = angular.isDate(new Date());
$scope.isDefined = angular.isDefined(fruitList);
$scope.isElement = angular.isElement("Hello");
$scope.isFunction = angular.isFunction(new Date().getFullYear);
$scope.isNumber = angular.isNumber(5);
$scope.isObject = angular.isObject({});
$scope.isString = angular.isString("Peter");
$scope.isUndefined = angular.isUndefined(null); } ]); </script>
</body>
</html>

And here is the output from the above code:

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2016 Hosting, ASP.NET Core 2.2.1 Hosting, ASP.NET MVC 6 Hosting and SQL 2017 Hosting.


Tag cloud

Sign in