This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

AngularJS data model

Home/AngularJS/AngularJS data model

angularjs_service-factory_model_main-3b03d4b4785d6ac60d5772079b669bdf

As we already know, AngularJS doesn’t come with an out of the box solution for data modeling. In the most abstract way, AngularJS lets us use JSON data as a model in the controller. As the time passed and my application grew, I realized that this modeling method isn’t powerful enough to fit my application’s needs. In this article I will present the way I dealt with data modeling in my AngularJS application.

 

 

app  
    .controller('EditableBookController', 
['$scope', 'booksManager', function($scope, booksManager) { booksManager.getBook(1).then(function(book) { $scope.book = book }); }]) .controller('BooksListController', ['$scope', 'booksManager', function($scope, booksManager) { booksManager.loadAllBooks().then(function(books) { $scope.books = books }); }]);

 

app.factory('booksManager', ['$http', '$q', 'Book', function($http, $q, Book) {  
    var booksManager = {
        _pool: {},
        _retrieveInstance: function(bookId, bookData) {
            var instance = this._pool[bookId];

            if (instance) {
                instance.setData(bookData);
            } else {
                instance = new Book(bookData);
                this._pool[bookId] = instance;
            }

            return instance;
        },
        _search: function(bookId) {
            return this._pool[bookId];
        },
        _load: function(bookId, deferred) {
            var scope = this;

            $http.get('ourserver/books/' + bookId)
                .success(function(bookData) {
                    var book = scope._retrieveInstance(bookData.id, bookData);
                    deferred.resolve(book);
                })
                .error(function() {
                    deferred.reject();
                });
        },
        /* Public Methods */
        /* Use this function in order to get a book instance by it's id */
        getBook: function(bookId) {
            var deferred = $q.defer();
            var book = this._search(bookId);
            if (book) {
                deferred.resolve(book);
            } else {
                this._load(bookId, deferred);
            }
            return deferred.promise;
        },
        /* Use this function in order to get instances of all the books */
        loadAllBooks: function() {
            var deferred = $q.defer();
            var scope = this;
            $http.get('ourserver/books)
                .success(function(booksArray) {
                    var books = [];
                    booksArray.forEach(function(bookData) {
                        var book = scope._retrieveInstance(bookData.id, bookData);
                        books.push(book);
                    });

                    deferred.resolve(books);
                })
                .error(function() {
                    deferred.reject();
                });
            return deferred.promise;
        },
        /*  This function is useful when we got somehow the book data and we wish to store it or update the pool and get a book instance in return */
        setBook: function(bookData) {
            var scope = this;
            var book = this._search(bookData.id);
            if (book) {
                book.setData(bookData);
            } else {
                book = scope._retrieveInstance(bookData);
            }
            return book;
        },

    };
    return booksManager;
}]);
app.factory('Book', ['$http', function($http) {  
    function Book(bookData) {
        if (bookData) {
            this.setData(bookData):
        }
        // Some other initializations related to book
    };
    Book.prototype = {
        setData: function(bookData) {
            angular.extend(this, bookData);
        },
        delete: function() {
            $http.delete('ourserver/books/' + bookId);
        },
        update: function() {
            $http.put('ourserver/books/' + bookId, this);
        },
        getImageUrl: function(width, height) {
            return 'our/image/service/' + this.book.id + '/width/height';
        },
        isAvailable: function() {
            if (!this.book.stores || this.book.stores.length === 0) {
                return false;
            }
            return this.book.stores.some(function(store) {
                return store.quantity > 0;
            });
        }
    };
    return Book;
}]);
<div ng-controller="BookController">  
    <div ng-style="{ backgroundImage: 'url(' + book.getImageUrl(100, 100) + ')' }"></div>
    Id: <span ng-bind="book.id"></span>
    <br/>
    Name:<input type="text" ng-model="book.name" />
    <br/>
    Author: <input type="text" ng-model="book.author" />
    <br/>
    Is Available: <span ng-bind="book.isAvailable() ? 'Yes' : 'No' "></span>
    <br/>
    <button ng-click="book.delete()">Delete</button>
    <br/>
    <button ng-click="book.update()">Update</button>
</div>
By | 2017-03-23T21:32:21+00:00 March 11th, 2015|AngularJS|Comments Off on AngularJS data model

Share This Story, Choose Your Platform!

About the Author: