admin管理员组

文章数量:1346053

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:

This is index.html:

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="ISO-8859-1">
        <title>GuestBook</title>
        <script src=".0.0rc3.min.js"></script>
        <script type="text/javascript" src="javascript/user.js"></script>
    </head>
    <body>
        <h1>Wele!</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 oute:

Wele!

  • John
  • Jacob
  • James

But instead, all I get is:

Wele!

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.)

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:

This is index.html:

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="ISO-8859-1">
        <title>GuestBook</title>
        <script src="http://code.angularjs/angular-1.0.0rc3.min.js"></script>
        <script type="text/javascript" src="javascript/user.js"></script>
    </head>
    <body>
        <h1>Wele!</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 oute:

Wele!

  • John
  • Jacob
  • James

But instead, all I get is:

Wele!

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.)

  • javascript
  • angularjs
  • filereader
Share Improve this question edited May 23, 2017 at 10:32 CommunityBot 11 silver badge asked Oct 10, 2013 at 14:51 James DunnJames Dunn 8,29414 gold badges54 silver badges87 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4

Try injecting angular's $http service into your controller first of all. And make sure you add a '/' before your 'data/users' path. (/data/users)

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

You can check your console to see what kind of data is being returned. (Network tab)

edit: just realized the $(function ... part didn't make sense.

The problem with your code is in this stub -

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

Here $scope.users is not the array variable. Instead, it is whatever $() returns. Your anonymous function is passed only as a parameter to $ function.

Rewrite your controller this way - 

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(',')
    })
}

And now, since you have

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

in your view, angular will set up a watch on $scope.users variable. If the value of $scope.users changes anytime in the future, angular will automatically update the view.

EDIT -

Along with the above edit, you need to make sure all the files are being served via a web server on the same host:port. Browsers limit AJAX access to another domain:port. Here is a quick way to do start a http server -

Go to the project directory using terminal and type in

python -m SimpleHTTPServer for python

or

ruby -run -e httpd -- -p 8000 . for ruby.

Both will start a basic HTTP server at port 8000, serving content from that particular directory. Having done this, your index.html will be at http://localhost:8000/index.html and your data file should be accessibe as http://localhost:8000/data/user.js (your javascript can still use /data/user.js).

It turns out I can't do what I'm trying to do the way I'm trying to do it. JavaScript by itself can't read files on the Server-Side, only on the Client-Side. To read and persist data, JavaScript has to make calls to a "Back-end" or server, written in something like Java, which isn't just a Browser scripting language.

you entered 'users' instead of 'users.txt' as filename.

This works just fine to me:

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

本文标签： javascriptReading and writing to a serverside file in AngularJSStack Overflow

版权声明：本文标题：javascript - Reading and writing to a server-side file in AngularJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743821751a2544911.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。