0

I'm attempting to create a simple guestbook with AngularJS, and read and write the names to a simple file. Trouble is, I can't seem to get my code to even read from the file.

This is my directory structure:

Directory Structure

This is 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>

This is user.js (Based off this question/answer):

function UserCtrl($scope) {

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

And this is my users file:

John,Jacob,James

I'm expecting this outcome:

Welcome!

  • John
  • Jacob
  • James

But instead, all I get is:

Welcome!

So my question is, how can I populate $scope.users with the names in the users file?

I know I've got my AngularJS set up correctly because I was able to get the desired result when I hard-coded it:

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

I've also spent a lot of time googling and searching Stack Overflow for how to read and write to a file with JavaScript and/or AngularJS, but:

  1. No one seems to be trying to do exactly what I'm trying to do;
  2. The instructions are either confusing or not really applicable to what I'm trying to do.

I'm also not sure where to begin to write code that will persist names to the users file -- but I'll be happy if I can just read the file for now, and ask how to write to it later in a separate question. (But extra gratitude if you do also show me how to write to it.)

4

4 回答 4

4

首先尝试将 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);
            }
        });
    });
}

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

编辑：刚刚意识到 $(function ... 部分没有意义。

于 2013-10-10T15:20:52.753 回答
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 将设置一个watchon$scope.users变量。如果以后的任何时间值发生$scope.users变化，angular 会自动更新视图。

编辑 -

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

使用终端进入项目目录并输入

python -m SimpleHTTPServer对于蟒蛇

或者

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）。

于 2013-10-10T15:26:32.743 回答
0

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

这对我来说很好：

function UserCtrl($scope, $http) {
    $scope.users = []
    $http.get('data/users.txt').success(function(data, status, headers, config) {
        $scope.users = data.split(',')
    })}
于 2014-03-13T15:28:12.667 回答
0

事实证明，我不能像我试图做的那样做我想做的事。JavaScript 本身无法读取服务器端的文件，只能在客户端读取文件。为了读取和保存数据，JavaScript 必须调用“后端”或服务器，用 Java 之类的东西编写，它不仅仅是一种浏览器脚本语言。

于 2013-10-11T17:03:22.827 回答