在AngularJS框架中处理数据建模的方式解析

我们知道，AngularJS并没有自带立等可用的数据建模方案。而是以相当抽象的方式，让我们在controller中使用JSON数据作为模型。但是随着时间的推移和项目的成长，我意识到这种建模的方式不再能满足我们项目的需求。在这篇文章中我会介绍在我的AngularJS应用中处理数据建模的方式。

为Controller定义模型

让我们从一个简单的例子开始。我想要显示一个书本(book)的页面。下面是控制器(Controller)：

BookController

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

这个控制器创建了一个书本的模型，我们可以在后面的模板中(templage)中使用它。

template for displaying a book

<div ng-controller="BookController">  Id: <span ng-bind="book.id"></span>     Name:<input type="text" ng-model="book.name" />     Author: <input type="text" ng-model="book.author" /></div>

假如我们需要从后台的api获取书本的数据，我们需要使用$http:
BookController with $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，或者判断书本是否有效。这些方法都可以被定义在控制器中。

BookController with several book actions

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

然后在我们的模板中：

template for displaying a complete book

<div ng-controller="BookController">  <div ng-style="{ backgroundImage: 'url(' + getBookImageUrl(100, 100) + ')' }"></div>  Id: <span ng-bind="book.id"></span>     Name:<input type="text" ng-model="book.name" />     Author: <input type="text" ng-model="book.author" />     Is Available: <span ng-bind="isAvailable() ? 'Yes' : 'No' "></span>     <button ng-click="deleteBook()">Delete</button>     <button ng-click="updateBook()">Update</button></div>