CODEWITHSUNDEEP
javascriptc#angularjswcf
user8705895
user8705895

Reputation:

Angular JS Application failed to return Mesaage from Wcf Service

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 ";

Upvotes: 0

Views: 44

Answers (1)

Arunprasanth K V
Arunprasanth K V

Reputation: 21921

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>

Upvotes: 1

Related Questions