🌙 🈵 🤰 AngularJS। डेटा संगठन 👩🏾‍🏫 💪🏽 🖤

जैसे ही एप्लिकेशन बढ़ता है, JSON ऑब्जेक्ट्स के एक सेट के रूप में डेटा प्रस्तुत करना कम सुविधाजनक हो जाता है। इस लेख में, मैं अपने अनुप्रयोगों में डेटा के साथ काम को व्यवस्थित करने के तरीके के बारे में बात करूंगा।

एक सरल उदाहरण से शुरू करते हैं। पुस्तक के बारे में जानकारी के साथ एक पेज बनाएँ। नियंत्रक:

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

नियंत्रक पुस्तक मॉडल को इनिशियलाइज़ करता है, जिसका उपयोग दृश्य में किया जाता है:

 <div ng-controller="BookController"> 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" /> </div>

जब पुस्तक डेटा को बैक-एंड सर्वर से प्राप्त करने की आवश्यकता होती है, तो आप $ 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 ऑब्जेक्ट है।

हमें सबसे अधिक डेटा को हेरफेर करने की आवश्यकता है। उदाहरण के लिए

पुस्तकों को हटाएं, उनके बारे में जानकारी अपडेट करें या हमारे द्वारा आवश्यक आकारों के अनुसार, कवर यूआरएल उत्पन्न करें। इसे करने की अनुमति देने वाले तरीकों को नियंत्रक कोड में परिभाषित किया जा सकता है।

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

हम इन तरीकों का उपयोग दृश्य में करते हैं:

 <div ng-controller="BookController"> <div ng-style="{ backgroundImage: 'url(' + getBookImageUrl(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="isAvailable() ? 'Yes' : 'No' "></span> <br/> <button ng-click="deleteBook()">Delete</button> <br/> <button ng-click="updateBook()">Update</button> </div>

कई नियंत्रकों के साथ मॉडल का उपयोग करना

यदि हमारे तरीकों और पुस्तक डेटा का उपयोग केवल एक नियंत्रक द्वारा किया जाता है, तो काम किया जाता है।

हालाँकि, जैसे-जैसे एप्लिकेशन बढ़ता है, कई नियंत्रकों में एक मॉडल का उपयोग करना आवश्यक हो जाता है। कई नियंत्रकों के लिए इसे उपलब्ध कराने के लिए, हम पुस्तक सेवा का निर्माण करेंगे, जो उन वस्तुओं का प्रोटोटाइप होगी जो पुस्तकों के राज्य और व्यवहार का वर्णन करती हैं।

 app.factory('Book', ['$http', function($http) { function Book(bookData) { if (bookData) { this.setData(bookData): } //-,       }; Book.prototype = { setData: function(bookData) { angular.extend(this, bookData); }, load: function(id) { var scope = this; $http.get('ourserver/books/' + bookId).success(function(bookData) { scope.setData(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; }]);

हम नियंत्रक में सेव्रिस बुक का उपयोग करते हैं।

 app.controller('BookController', ['$scope', 'Book', function($scope, Book) { $scope.book = new Book(); $scope.book.load(1); }]);

अब जब सभी तर्क मॉडल में डाल दिए गए हैं, तो नियंत्रक कोड में केवल दो लाइनें शेष हैं: पुस्तक ऑब्जेक्ट बनाना और बैक-एंड सर्वर से डेटा प्राप्त करना। डेटा लोड हो जाने के बाद, यह दृश्य में दिखाई देगा, जो अब इस तरह दिखता है:

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

तो, हमारे पास बुक सेवा और कई नियंत्रक हैं जो पुस्तकों के साथ काम करते हैं। प्रस्तुत वास्तुकला में एक खामी है। यदि दो नियंत्रक एक ही पुस्तक में हेरफेर करने में सक्षम हों तो क्या होगा?

कल्पना करें कि दो पृष्ठ हैं: एक पुस्तकों की सूची के साथ, और दूसरा पुस्तक प्रबंधन रूप के साथ। प्रत्येक पृष्ठ के लिए एक नियंत्रक बनाया जाता है। पहला नियंत्रक बैक-एंड सर्वर से पुस्तकों की एक सूची प्राप्त करता है, और उनमें से एक के बारे में दूसरी जानकारी। उपयोगकर्ता दूसरे पृष्ठ पर जाता है, पुस्तक का नाम बदलता है और "सहेजें" बटन पर क्लिक करता है। अद्यतन सफल है, और पुस्तक का शीर्षक बदल जाता है। हालांकि, यदि वह पहले पृष्ठ पर जाता है, तो वह पुस्तकों की सूची में पुराना नाम देखेगा। यह इसलिए हुआ क्योंकि एक ही पुस्तक की दो प्रतियां थीं: एक पुस्तक लिस्टिंग पृष्ठ के लिए, और दूसरी पुस्तक प्रबंधन पृष्ठ के लिए। उपयोगकर्ता ने केवल पुस्तक प्रबंधन पृष्ठ के लिए बनाए गए इंस्टेंस में नाम बदल दिया, दूसरी प्रति अपरिवर्तित रही।

इस समस्या को हल करने के लिए, सभी नियंत्रकों को पुस्तक ऑब्जेक्ट के एक ही उदाहरण का उपयोग करना होगा। इस मामले में, यदि आप दूसरे पृष्ठ पर पुस्तक का नाम बदलते हैं, तो यह पुस्तक के बारे में जानकारी का उपयोग करके पहले और दूसरे सभी पृष्ठों पर दोनों को बदल देगा।

समाधान को लागू करने के लिए, हम bookManager सेवा बनाएंगे (सेवा का नाम बड़े अक्षर के साथ नहीं लिखा गया है, क्योंकि यह वारिस के बिना एक वस्तु होगी), जो पुस्तकों का प्रबंधन करेगी और डेटा प्राप्त करने के लिए जिम्मेदार होगी। यदि अनुरोधित पुस्तक लोड नहीं हुई है, तो BookManager इसे लोड करेगा, अन्यथा यह पहले से लोड की गई प्रतिलिपि लौटा देगा। ध्यान रखें कि बैक-एंड सर्वर से पुस्तकें प्राप्त करने के सभी तरीके केवल बुकमैन सेवा में परिभाषित किए जाएंगे, क्योंकि यह एकमात्र घटक होना चाहिए जो यह डेटा प्रदान करता है।

 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(); }); }, /* */ /*    */ 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; }, /*    */ 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; }, /*  */ 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; }]);

सबमिशन कोड नहीं बदलेगा।

अब प्रत्येक पुस्तक के लिए केवल एक ऑब्जेक्ट संग्रहीत किया जाएगा, और इस ऑब्जेक्ट के सभी परिवर्तन सभी पृष्ठों पर प्रदर्शित होंगे जो इसका उपयोग करते हैं।

मूल: www.webdeveasy.com/angularjs-data-model

AngularJS। डेटा संगठन

More articles: