CODEWITHSUNDEEP
javascripthtmlangularjs
Eugene Ustimenko
Eugene Ustimenko

Reputation: 322

Angular JS: I have empty page after success response from server

I'm new at Angular (1.5 is used) and have the trouble with empty page after REST response from the server.

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link href="app-content/app.css" rel="stylesheet" />
</head>
<body>

    <div class="jumbotron">
        <div class="container">
            <div class="col-sm-8 col-sm-offset-2">
                <div ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error' }" ng-if="flash" ng-bind="flash.message"></div>
                <div ng-view></div>
            </div>
        </div>
    </div>
    <div class="credits text-center">
        <p>
            <a href="http://54.171.49.176:8081/swagger/index.html">Swagger REST documentation</a>
        </p>
    </div>

    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//code.angularjs.org/1.5.0/angular.js"></script>
    <script src="//code.angularjs.org/1.5.0/angular-route.js"></script>
    <script src="//code.angularjs.org/1.5.0/angular-cookies.js"></script>

    <script src="app.js"></script>
    <script src="app-services/authentication.service.js"></script>
    <script src="app-services/flash.service.js"></script>

    <script src="app-services/user.service.js"></script>

    <script src="home/home.controller.js"></script>
    <script src="login/login.controller.js"></script>
</body>
</html>

There are another html template at ng-view:

<h2>Hi {{vm.user.fullname}}!</h2>
<p>You're logged in!!</p>
<p>{{vm.error}}</p>
<h3>All registered users:</h3>
<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Full name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in vm.allUsers">
                <td>{{user.email}}</td>
                <td>{{user.fullname}}</td>
            <td><a href="#" ng-click="vm.deleteUser(user.id)">Delete</a></td>
            </tr>
        </tbody>
    </table>
</div>
<h3>Add new user:</h3>
<div class="container">
    <div class="form-group">
        <label for="first_name">Full name:</label>
        <input type="text" class="form-control" id="first_name" ng-model="vm.newUser.fullname"/>
    </div>
    <div class="form-group">
        <label for="email">E-mail:</label>
        <input type="text" class="form-control" id="email" ng-model="vm.newUser.email"/>
    </div>
    <p><a href="#" class="btn btn-success" ng-click="vm.addNewUser()">Add new user</a></p>
</div>
<p>&nbsp;</p>
<p><a href="#/login" class="btn btn-primary">Logout</a></p>

JS

Service and Controller

(function () {
    'use strict';

    angular
        .module('app')
        .controller('HomeController', HomeController);

    HomeController.$inject = ['UserService', '$rootScope'];
    function HomeController(UserService, $rootScope) {
        var vm = this;

        vm.user = null;
        vm.allUsers = [];
        vm.newUser = null;
        vm.error = null;
        vm.deleteUser = deleteUser;
        vm.addNewUser = addNewUser;

        ...

        function addNewUser() {
            UserService.Create(vm.newUser)
                .then(function (user) {
                    vm.allUsers.push(user);
                    vm.newUser = null;
                });
        }
    }

})();

Service method is 

function Create(user) {
            return $http.post('http://localhost:8081/api/users', user).then(handleSuccess, handleError('Error creating user'));
        }

Routing

config.$inject = ['$routeProvider', '$locationProvider'];
    function config($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                controller: 'HomeController',
                templateUrl: 'home/home.view.html',
                controllerAs: 'vm'
            })

            .when('/login', {
                controller: 'LoginController',
                templateUrl: 'login/login.view.html',
                controllerAs: 'vm'
            })
            .otherwise({ redirectTo: '/login' });
    }


The user is returned successfully at debugger and pushed into users successfully too, but the page is empty instead of footer from index.html.
I tried to use $scope insteed of vm, but it is not helpful.

Any ideas how to fix it? I think I do not know something simple.

Before adding/removing user

After adding/removing user

Upvotes: 0

Views: 242

Answers (2)

Sravan
Sravan

Reputation: 18647

As suggested in one answer, From your service, just return the $http.post call which returns a promise back to the controller.

But you can handle success and response in the controller itself.

Please check the below code.

Service:

function Create(user) {
    return $http.post('http://localhost:8081/api/users', user);
}

Now, In your controller you can handle that promise and you will get the success and error call backs using then.

Controller:

function addNewUser() {
    UserService.Create(vm.newUser)
        .then(function success(user) { // this is success callback
            vm.allUsers.push(user);
            vm.newUser = null;
        },function error(user) // this is error callback
        {
            console.log(user);
        });
}

As you can see, you can even handle the error in the callback.

Since you are using ng-route and routeProvider, it mostly deals with hashURL's. so remove href="#" from the anchor tag.

<a href="#" class="btn btn-success" ng-click="vm.addNewUser()">Add new user</a>

Should be

<a class="btn btn-success" ng-click="vm.addNewUser()">Add new user</a>

Upvotes: 1

Faly
Faly

Reputation: 13346

Putting a then in the $http.post consume the promise in your service so its not returned to the caller of the service (your HomeController). You have to just return the promise by your service instead of consuming it. Use catch if you want to manage error in the service.

function Create(user) {
    return $http.post('http://localhost:8081/api/users', user)
                .catch(handleError('Error creating user'));
}

Upvotes: 0

Related Questions