If you are new to angular js application, then this demonstration would help you a lot.
In below demo, i have used some angular js directive.
DirectiveName
{
width:30%;
}
| ng-app | By adding this, we declare the scope of the angular js application. This means the application starts here. |
| ng-controller | This handles the application. |
| ng-model | This binds the input values to the application data. |
| ng-disableed | This is used to enable/disable a html control. |
| ng-click | This handles the click event. |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Angular demo</title>
</head>
<body>
<div ng-app="LoginApp" ng-controller="LoginCtrl">
<input type="text" ng-model="user.firstName" />
<input type="text" ng-model="user.lastName" />
<input type="submit" ng-click="Login()" value="Login" ng-disabled="!user.firstName && !user.lastName" />
{{status}}
{{!user.firstName}}
</div>
{{status}}
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("LoginApp", []);
app.controller("LoginCtrl", function ($scope, $http) {
$scope.Login = function () {
if ($scope.user.firstName != "" && $scope.user.lastName != "") {
$http.get("Login.svc/IsUserExist?firstName=" + $scope.user.firstName + "&lastName=" + $scope.user.lastName)
.success(function (result) {
$scope.status = result.d;
if (result.d) {
alert("The user is exist in server");
}
});
}
}
});
</script>
</body>
</html>
Sibasis Jena 