Angularjs how to organize data persistence

N

naneri2014-05-23 13:46:46

JavaScript

naneri, 2014-05-23 13:46:46

shaping-up-with-angular-js-83ceb89bd5255
I am currently taking a course on Angular at codeschool and reading a tutorial on angularjs.org at the same time .
What I can not understand is how to organize data saving?
Going through the tutorial on angularjs.org - I just figured out how to get data. There is no information on shipping.
Also interesting - Let's say I have an application - the standard "Todo Application"what will happen if the data that the user adds is not sent (say, if the user suddenly lost his Internet), but at the same time he will be displayed. In principle, I understand what can be done so that the data appears on its page only after being delivered to the server, but then, in theory, there will be a slight delay due to waiting for delivery to the server (if I understand everything correctly, of course).
I want to organize a backend in php (I plan to use a microframework - silex or slim) and mysql.
Now, if my code for the todo application did it according to a tutorial on the net. The code pulls the to-do list from the todos.json file.

<!doctype html>
<html ng-app='todo'>
    <head>
        <meta charset ='utf-8'>
        <title>Todo App</title>
        <style>
            li {
                list-style-type: none;
            }
            .done {
                text-decoration: line-through;
                color: #ccc;
                
            }
        </style>
    </head>


    <body>


        <div ng-controller="todoController">
            <form name='form' ng-submit='addTodo()'>
                <input type='text' name='newTodo' ng-model='newTodo' required />
                <button ng-disabled='frm.$invalid'>Go</button>
            </form>

            <button ng-click='clearCompleted()'>Clear Completed</button>

            <ul>
                <li ng-repeat='todo in todos'>
                    <input type='checkbox' ng-model='todo.done'/>
                    <span ng-class="{'done':todo.done}">{{todo.title}}</span>
                </li>
            </ul>
        </div>



        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script>
                        var todo = angular.module('todo', []);
                        todo.controller('todoController', function($scope, $http) {
                                $http.get('todos/todos.json').success(function(data) {
                                    $scope.todos = data;
                                });

                                $scope.addTodo = function() {
                                    $scope.todos.push({'title': $scope.newTodo, 'done': false});
                                    $scope.newTodo = '';
                                };
                                $scope.clearCompleted = function() {
                                    $scope.todos = $scope.todos.filter(function(item) {
                                        return !item.done;
                                    });
                                };
                            });
        </script>
    </body>
</html>

Update
Tried to file interaction with the server. The computer has xampp, PHP (Codeigniter) + MySQL acts as a backend. There are two problems:
- when I manually stop MySQL - when I mark a job as completed - it becomes completed in the browser, but the change is not saved in the database. The next time you turn on MySQL and reload the page, all the marks disappear, because the value is pulled from the database.
- when I add new tasks - they appear only upon successful recall from the server, that is, the advantage of Angular flies to naught, because due to a small lag, the application ceases to look like a native one.
PS I apologize in advance if I worded something wrong somewhere.

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

T

TekVanDo, 2014-05-23
@TekVanDo

If you use the Rest model, then create a resource servise example
In order for the data not to be lost (the Internet is disconnected), you can duplicate it in local storage

P

Pavel Solovyov, 2014-05-23
@pavel_salauyou

it takes a couple of milliseconds to send data, the likelihood that the user will turn off the Internet in the interval in these couple of milliseconds is unlikely.

K

kompi, 2014-05-23
@kompi

Add a timeout for the promise. Accordingly, after the time has elapsed, make an automatic repetition of the request or wait for an event from the user.

S

Sergey, 2014-05-23
Protko @Fesor

Look in the direction of how it is organized in Backbone. Moreover, is it OK to use Backbone in the context of an angular-based application?