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>

ng-view还有另一个html模板：

<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

服务和控制器

(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;
                });
        }
    }

})();

服务方法为

function Create(user) {
            return $http.post('documentation on Coalesce', user).then(handleSuccess, handleError('Error creating user'));
        }

路由

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' });
    }

用户在调试器中成功返回并成功推送到用户，但页面为空而不是index.html的页脚我尝试使用$scope vm，但没有帮助。

任何想法如何解决？我想我不知道简单的事情。

http://localhost:8081/api/users

Answer 1

正如在一个答案中所建议的那样，从您的服务中，只需返回$http.post调用，该调用将一个承诺返回给控制器。

但是你可以在控制器本身处理成功和响应。

请检查以下代码。

<强>服务

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

现在，在您的控制器中，您可以处理该承诺，并且您将使用success获得error和then回拨。

<强>控制器：

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);
        });
}

如您所见，您甚至可以处理回调中的错误。

由于您使用的是ng-route和routeProvider，因此它主要处理hashURL's。所以从锚标记中删除href="#"。

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

应该是

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

Answer 2

在$ http.post中放一个then会消耗你服务中的promise，所以它不会返回给服务的调用者（你的HomeController）。您必须通过服务返回承诺而不是消费它。如果要管理服务中的错误，请使用catch。

＆＃13;

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

＆＃13;

Angular JS：服务器成功响应后我有空页面

HTML

JS

服务和控制器

路由

2 个答案: