I am consuming Wcf Service into Angular Js Application . I have one Boolean function inside the wcf service to accept the username and password. I am trying to create user login system by using Angular Js Application but when I enter the correct username and password its does not working according my expectation. There are no errors showing in Google Chrome 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 false; } 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 = "/Welcome/Index"; 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.
Any Help or suggestion will he highly appreciated.
2 Answers
Answers 1
I ran your example in jsfiddle to see what's going on and I changed this:
<body ng-app="WebClientModule"> I added the ng-app attribute and now is working properly.
See the full example below:
Answers 2
You are not initialising the angular module in html side, you should add
data-ng-app="WebClientModule" 
0 comments:
Post a Comment