欢迎您！

Question

我正在尝试使用AngularJS创建一个简单的留言簿，并将名称读写到一个简单的文件中。麻烦的是，我似乎无法让我的代码甚至从文件中读取。

这是我的目录结构：

Directory Structure

这是index.html：

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="ISO-8859-1">
        <title>GuestBook</title>
        <script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
        <script type="text/javascript" src="javascript/user.js"></script>
    </head>
    <body>
        <h1>Welcome!</h1>
        <div ng-controller="UserCtrl">
            <ul class="unstyled">
                <li ng-repeat="user in users">
                    {{user}}
                </li>
            </ul>
        </div>
    </body>
</html>

这是user.js（基于this question/answer}）：

function UserCtrl($scope) {

    $scope.users = $(function() {
        $.get('data/users', function(data) {
            var array = data.split(',');
            console.log(array);
        });
    });
}

这是我的用户文件：

John,Jacob,James

我期待这个结果：

欢迎您！

约翰
雅各
詹姆斯

但相反，我得到的只是：

欢迎您！

所以我的问题是，如何使用users文件中的名称填充$ scope.users？

我知道我的AngularJS设置正确，因为当我对其进行硬编码时，我能够获得所需的结果：

$scope.users =[John,Jacob,James];

我还花了很多时间谷歌搜索和搜索Stack Overflow如何使用JavaScript和/或AngularJS读取和写入文件，但是：

似乎没有人试图完成我正在尝试做的事情;
说明要么令人困惑，要么不适用于我正在尝试做的事情。

我也不确定从哪里开始编写将名称保存到用户文件的代码 - 但是如果我现在可以只读取该文件，我会很高兴，并询问如何在以后写入该文件一个单独的问题。（但如果你也告诉我如何写它，还要特别感激。）

Answer 1

首先尝试将angular的$ http服务注入您的控制器。并确保在“数据/用户”路径之前添加“/”。（/数据/使用者）

function UserCtrl($scope, $http) {
    $scope.users = [];
    $http.get('/data/users')
        .success(function(data, status, headers, config) {
            if (data && status === 200) {
                $scope.users = data.split(',');
                console.log($scope.users);
            }
        });
    });
}

您可以检查控制台以查看返回的数据类型。（网络标签）

编辑：刚刚意识到$（功能......部分没有意义。

Answer 2

您的代码存在问题 -

$scope.users = $(function() {
    $.get('data/users', function(data) {
        var array = data.split(',');
        console.log(array);
    });
});

此处$scope.users不是array变量。相反，它是$()返回的任何内容。您的匿名函数仅作为参数传递给$函数。

以这种方式重写你的控制器 -

function UserCtrl($scope, $http) {
    $scope.users = [] // Initialize with an empty array

    $http.get('data/users').success(function(data, status, headers, config) {
        // When the request is successful, add value to $scope.users
        $scope.users = data.split(',')
    })
}

现在，既然你有

<li ng-repeat="user in users">
    {{user}}
</li>

在您的视图中，angular将在watch变量上设置$scope.users。如果$scope.users的值在将来的任何时间发生变化，则会自动生成角度更新视图。

编辑 -

除上述编辑外，您还需要确保通过同一主机上的Web服务器提供所有文件：端口。浏览器限制AJAX访问另一个域：端口。这是一个快速启动http服务器的方法 -

使用终端转到项目目录并输入

python -m SimpleHTTPServer for python

或

ruby -run -e httpd -- -p 8000 .代表红宝石。

两者都将在端口8000启动基本HTTP服务器，从该特定目录提供内容。完成此操作后，您的index.html将位于http://localhost:8000/index.html，您的数据文件应为http://localhost:8000/data/user.js（您的javascript仍然可以使用/data/user.js）。

Answer 3

事实证明，我不能按照我试图做的方式去做。 JavaScript本身无法读取服务器端的文件，只能在客户端读取。为了读取和保存数据，JavaScript必须调用“后端”或服务器，用Java编写，这不仅仅是一种浏览器脚本语言。

Answer 4

您输入'users'而不是'users.txt'作为文件名。

对我来说这很好用：

function UserCtrl($scope, $http) {
    $scope.users = []
    $http.get('data/users.txt').success(function(data, status, headers, config) {
        $scope.users = data.split(',')
    })}

读取和写入AngularJS中的服务器端文件

欢迎您！

欢迎您！

4 个答案: