[Из песочницы] AngularJS. Организация данных09.06.2014 18:33

По мере того как растет приложение, представление данных в виде набора JSON объектов становится все менее удобным. В этой статье я расскажу про способ организации работы с данными в своих приложениях.Начнем с простого примера. Создадим страницу с информацией о книге. Контроллер:

app.controller ('BookController', ['$scope', function ($scope) { $scope.book = { id: 1, name: 'Harry Potter', author: 'J.K. Rowling', stores: [ { id: 1, name: 'Barnes & Noble', quantity: 3}, { id: 2, name: 'Waterstones', quantity: 2}, { id: 3, name: 'Book Depository', quantity: 5} ] };}]);

Контроллер инициализирует модель книги, которая используется в представлении:

    Id:
    Name:
    Author:

Когда данные о книге нужно получить от бэк-энд сервера, можно использовать $http сервис:

app.controller ('BookController', ['$scope', '$http', function ($scope, $http) { var bookId = 1; $http.get ('ourserver/books/' + bookId).success (function (bookData) { $scope.book = bookData; }); }]);

Обратите внимание, что bookData все еще JSON объект.

Нам скорее всего понадобится манипулировать данными. Например, уадлять книги, обновлять информацию о них или генерировать url обложки, в соответствии с нужными нам размерами. Методы, которые позволят это сделать, могут быть определены в коде контроллера.

app.controller ('BookController', ['$scope', '$http', function ($scope, $http) { var bookId = 1; $http.get ('ourserver/books/' + bookId).success (function (bookData) { $scope.book = bookData; }); $scope.deleteBook = function () { $http.delete ('ourserver/books/' + bookId); }; $scope.updateBook = function () { $http.put ('ourserver/books/' + bookId, $scope.book); }; $scope.getBookImageUrl = function (width, height) { return 'our/image/service/' + bookId + '/width/height'; }; $scope.isAvailable = function () { if (!$scope.book.stores || $scope.book.stores.length === 0) { return false; } return $scope.book.stores.some (function (store) { return store.quantity > 0; }); }; }]);

Используем эти методы в представлении:

       Id:
       Name:
       Author:
       Is Available:

Delete

Update

Использование модели несколькими контроллерами

Если наши методы и данные о книге используются только одним контроллером, дело сделано.Однако по мере роста приложения появится необходимость использовать одну модель в нескольких контроллерах. Для того, чтобы сделать ее доступной для нескольких контроллеров, мы создадим сервис Book, который будет прототипом объектов, описывающих состояние и поведение книг.

Теперь, когда вся логика вынесена в модель, в коде контроллера осталось всего две строчки: создание объекта книги и получение данных от бэк-энд сервера. Как только данные будут загружены, они отобразятся в представлении, которое теперь выглядит так: