mohammad mohammad - 3 years ago 173
Javascript Question

Angular Js Application is not Reponsing with Wcf REST Service

I am consuming wcf REST Service into Angular JS Application. I am creating user Login System by using Angular Js Application . I have some stored user information like username and password into Sql database. The Password is Encrypted. I am using POST Method to cheek your name and password from sql Database , if the username and password id correct the I want to redirect user into welcome page else user information is wrong I want to display message username or password id wrong . But when I clicked the login button it is not responding without any error message in console windows .

Here is Interface .

[OperationContract]
[WebInvoke(Method = "POST",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
//BodyStyle = WebMessageBodyStyle.WrappedRequest,
UriTemplate = "/AuthenticateUser")]
bool AuthenticateUser(UserLogin userLogin);


Here is Implementation ..

public bool AuthenticateUser(UserLogin userLogin)
{
// ConfigurationManager class is in System.Configuration namespace
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
// SqlConnection is in System.Data.SqlClient namespace
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spAuthenticateUser", con);
cmd.CommandType = CommandType.StoredProcedure;

//Formsauthentication is in system.web.security
string encryptedpassword = FormsAuthentication.HashPasswordForStoringInConfigFile(userLogin.Password, "SHA1");

//sqlparameter is in System.Data namespace
SqlParameter paramUsername = new SqlParameter("@UserName", userLogin.Username);
SqlParameter paramPassword = new SqlParameter("@Password", encryptedpassword);

cmd.Parameters.Add(paramUsername);
cmd.Parameters.Add(paramPassword);

con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
int RetryAttempts = Convert.ToInt32(rdr["RetryAttempts"]);
if (Convert.ToBoolean(rdr["AccountLocked"]))
{
return true;
}
else if (RetryAttempts > 0)
{
int AttemptsLeft = (4 - RetryAttempts);
//lblMessage.Text = "Invalid user name and/or password. " +
// AttemptsLeft.ToString() + "attempt(s) left";
}
else if (Convert.ToBoolean(rdr["Authenticated"]))
{
return true;
}

}
return false;
}
}


Here is Script code .

///// <reference path="../angular.min.js" />



var app = angular.module("WebClientModule", [])

.controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {

$scope.OperType = 1;

//1 Mean New Entry

//To Clear all input controls.
function ClearModels() {
$scope.OperType = 1;
$scope.Username = "";
$scope.Password = "";


}


$scope.login = function () {
var User = {
Username: $scope.Username,
Password: $scope.Password,


};
if ($scope.OperType === 1) {
var promisePost = myService.AuthenticateUser(User);
promisePost.then(function (pl) {
$scope.Id = pl.data.Id;
window.location.href = "/Login/WelcomePage";

ClearModels();
}, function (err) {
$scope.msg = "Password Incorrect !";
console.log("Some error Occured" + err);
});
}

};



}]);

app.service("myService", function ($http) {
// Create new record

this.AuthenticateUser = function (User) {
return $http.post("http://localhost:52098/HalifaxIISService.svc/AuthenticateUser", JSON.stringify(User));
}
})


Here is the HTML code..

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/LoginScript.js"></script>
</head>
<body>
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td>

</td>
</tr>
<tr>
<td>
<div style="color: red;">{{Message}}</div>
<table style="border: solid 4px Red; padding: 2px;">

<tr>
<td></td>
<td>
<span>Username</span>
</td>
<td>
<input type="text" id="username" data-ng-model="Username" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Password</span>
</td>
<td>
<input type="password" id="password" required data-ng-model="Password" require="" />
</td>
</tr>

<tr>
<td></td>
<td></td>
<td>
<input type="button" id="login" value="Login" data-ng-click="login()" />

</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/LoginScript.js"></script>


Here is the screen shot when I run the application.Click here to see the result

Any Help or suggestion will he highly appreciated.

Here is the network tap result in Google Chrome.
Click here to see the out put

clk clk
Answer Source

It looks like you need to add the ng-app directive to your html tag, with the name defined in angular.module in order to bootstrap the AngularJS app:

<html ng-app="WebClientModule">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download