CODEWITHSUNDEEP
angularjs
user911
user911

Reputation: 1559

Issue in simple angularjs SPA

I have written a simple SPA(Single Page Application) with a username/password and submit button on top. When user is successfully logged in , according to his role , he should see details(employeeid , designation etc) on the rest(bottom) of the page.My Problem is that the bottom part of the page gets loaded even before user is logged in . So when user submits the login credentials , the bottom of the page is not getting reloaded with the data I have fetched from the server.

To be precise in my below code u1.UserDetails.firstName , u1.UserDetails.designation and u1.UserDetails.employeeId should be reloaded after user submits the login credential. But it's not happening currently and I get a blank screen. Can anyone please help me. I know I am missing something very silly here. I am sorry for that as I am new to UI development.

index.html (body of my html page)

<div class="navbar navbar-inverse">
    <form class="form-inline" ng-submit="submitLoginData()" ng-controller="LoginController">

        <div class="form-group">
         <!--   <label class="sr-only" for="exampleInputEmail2">Email address</label> -->
            <input type="email" class="form-control"  placeholder="Enter email" ng-model="emailId"/>
        </div>
        <div class="form-group">
          <!--  <label class="sr-only" for="exampleInputPassword2">Password</label> -->
            <input type="password" class="form-control" placeholder="Password" ng-model="password"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Remember me
            </label>
        </div>
       <!-- <button type="submit" class="btn btn-default">Sign in</button> -->
        <input type="submit" class="btn btn-default" id="SignIn" value="Sign In">
    </form>

</div>


<div class="container">
    <div class="row">
        <div class="col-lg-2">
                    <img ng-src="{{imageSource}}" class="img-thumbnail">
        </div>
      <div class="col-lg-10" >
            <table ng-table="tableParams" class="table">
                <tr>
                    <td >
                        {{u1.UserDetails.firstName}}
                    </td>
                    <td>{{u1.UserDetails.designation}}
                    </td>
                    <td>{{u1.UserDetails.employeeId}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

controller.js

myApp.controller('LoginController' ,
['$scope','LoginService' ,'$http' , function($scope , LoginService, $http ){

    $scope.submitLoginData = function(LoginService) {

        var tempStr= "userName:" +$scope.emailId + ", password:" + $scope.password ;

        $http.get('http://localhost:8181/RestCXF7/services/UserInfo/1').
            success(function(data , status , headers, config) {
                alert("Http service" + data);

                $scope.u1 = data;
                $scope.imageSource = 'img/tests.JPG';

            }).
            error(function (data, status, headers, config) {
                alert("error" + status);
            });

    };
}]);

Upvotes: 1

Views: 84

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32357

You need to wrap all elements with the ng-controller div.

Only child elements inside the controller's directive get's it's scope: The problem with your code is that only the form contents gets the right scope.

<div ng-controller="LoginController">

    <div class="navbar navbar-inverse">
        <form class="form-inline" ng-submit="submitLoginData()">
            <!-- more --> 
        </form>

    </div>


    <div class="container">
        <div class="row">
            <!-- the code below -->
        </div>
    </div>

</div>

UPDATE:

I created a demo plunker with jade: http://plnkr.co/edit/FNk45ekzeT1xBaphKrjp?p=preview

Upvotes: 1

Related Questions