Angular JS Application failed to return Mesaage from Wcf Service

Question

I am Consuming Wcf Service into Angular JS Application. My Wcf Service is working correctly and My Angular JS application are able to intract with wcf Service but I am facing one problem. I have an variable in script file called $scope.msg. Here what i trying to achieve if the username and password is correct then i want to redirect the user into next page otherwise if username or password is incorrect then i want to display the messaage that worng username or password . I am getting this error in console application of Google Chrome instaed of returing into Chorme console application i want to dispaly into Angular JS application but i can not ..

Here is the 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,


            };
               myService.AuthenticateUser(User).then(function (pl) {

                    $scope.msg = "Username and password is correct ";


                }, 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 ng-app="WebClientModule"> 
<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>

As far i understand add if statement on this line but i am not sure where i will add this ..

 myService.AuthenticateUser(User).then(function (pl) {

                    $scope.msg = "Username and password is correct ";

which backend service are you using ? is it php or any other languages ? — Arunprasanth K V, Oct 10 '17 at 05:24
check AuthenticateUser method is hitting or not. If yes check the response of the service. — Arunprasanth K V, Oct 10 '17 at 05:31
is it AuthenticateUser method is hitting ?? place a console.log in it and check whether its hitting or not — Arunprasanth K V, Oct 10 '17 at 08:31
It is hitting but if username or password is incorrect then I want to display error message into angular js application. The messages is not displaying into angular js application — , Oct 10 '17 at 08:33
ok , if you want to display the message in UI then you have to create a div with modal name as msg then it will display in UI. — Arunprasanth K V, Oct 10 '17 at 09:25
use this code inside your HTML page
{{msg}}
then the error message will be displayed in it — Arunprasanth K V, Oct 10 '17 at 09:33
Angular JS Application is Transcation Filed with Wcf Service?? — , Oct 10 '17 at 10:24
I am using sql transcation method to update two account balances. But its not reponsing . That what i am asking — , Oct 10 '17 at 10:32
how can I guess the issue without seeing any information ? so its better to post it as a new question and add relevant code or information on that. Definitely you will get a solution — Arunprasanth K V, Oct 10 '17 at 10:35
This is new question i posted . This is the tittle of the question ..Angular JS Application is Transcation Filed with Wcf Service?? — , Oct 10 '17 at 10:37
I think its better to create a new question with more details. The issue now you are telling is not directly related to this question. Without seeing your code we cannot identify the issue. post a new question and place your code there — Arunprasanth K V, Oct 10 '17 at 10:41
Angular JS Application is Transcation Filed with Wcf Service??. This is new question i posted on this site . Search it with tittle i mentioned — , Oct 10 '17 at 10:46

score 1 · Accepted Answer · answered Oct 10 '17 at 10:34

The issue is you missed to include the error message display code in your html. SO you can include it just like

<div>
    {{msg}}
</div>

Here your full html code

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="WebClientModule">
<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;">{{msg}}</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>

Arunprasanth KV..when i run the application and click the submit button its always display "Username and password is correct " never goes on this line "Password Incorrect !"; if ii enter wrong username or password — , Oct 12 '17 at 00:30
that means your error function is not working at all.Your api is giving success response always, so it wont go to error function. So what you can do is you can return a result based on your authentication and based on result you can show the error message and success message, or else configure the api like when username and password is incorrect then return an error response — Arunprasanth K V, Oct 12 '17 at 04:31
How to do it. Please provide code or suggestions where i have to change — , Oct 12 '17 at 09:44

Angular JS Application failed to return Mesaage from Wcf Service

1 Answers1