个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 05:11:01 24 4
gpt4 key购买 nike

我是 Angular 新手(使用 1.5)，在服务器发出 REST 响应后出现空白页面问题。

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

服务和 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;
                });
        }
    }

})();

服务方式为

function Create(user) {
            return $http.post('<a href="http://localhost:8081/api/users" rel="noreferrer noopener nofollow">http://localhost:8081/api/users</a>', 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，但它没有帮助。

有什么解决办法吗？我想我不知道一些简单的事情。

Before adding/removing user

After adding/removing user

最佳答案

正如一个答案中所建议的，从您的服务中，只需返回 $http.post调用将 promise 返回给 Controller 。

但是您可以在 Controller 本身中处理成功和响应。

请检查以下代码。

服务:

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

现在，在你的 Controller 中，你可以处理这个 promise ，你将得到 success和error使用 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);
        });
}

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

由于您正在使用ng-route和routeProvider ，主要涉及 hashURL's 。所以删除href="#"来自 anchor 标记。

<强> <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>

关于javascript - Angular JS : I have empty page after success response from server，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41822441/

24 4 0
文章推荐： javascript - 对象是如何创建的？
文章推荐： javascript - 在 Mocha 测试套件中标记测试
文章推荐： javascript - Azure存储授权失败或格式错误
文章推荐： javascript - 如何在 Angularjs 中使用 ng-file 上传库上传二进制格式的文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com