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

在controllers之间共享model
如果书本的结构和方法只和一个控制器有关，那我们现在的工作已经可以应付。但是随着应用的增长，会有其他的控制器也需要和书本打交道。那些控制器很多时候也需要获取书本，更新它，删除它，或者获得它的图片url以及看它是否有效。因此，我们需要在控制器之间共享这些书本的行为。我们需要使用一个返回书本行为的factory来实现这个目的。在动手写一个factory之前，我想在这里先提一下，我们创建一个factory来返回带有这些book辅助方法的对象，但我更倾向于使用prototype来构造一个book类，我觉得这是更正确的选择：

book model service

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

这种方式下，书本相关的所有行为都被封装在book服务内。现在，我们在bookcontroller中来使用这个亮眼的book服务。

bookcontroller that uses book model

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

正如你看到的，控制器变得非常简单。它创建一个book实例，指派给scope，并从后台加载。当书本被加载成功时，它的属性会被改变，模板也随着被更新。记住其他的控制器想要使用书本功能，只要简单地注入book服务即可。此外，我们还要改变template使用book的方法。

template that uses book instance

<div ng-controller="bookcontroller">
  <div ng-style="{ backgroundimage: 'url(' + book.getimageurl(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="book.isavailable() ? 'yes' : 'no' "></span>
   
  <button ng-click="book.delete()">delete</button>
   
  <button ng-click="book.update()">update</button>
</div>

到这里，我们知道了如何建模一个数据，把他的方法封装到一个类中，并且在多个控制器*享它，而不需要写重复代码。
在多个控制器中使用相同的书本模型

我们定义了一个书本模型，并且在多个控制器中使用了它。在使用了这种建模架构之后你会注意到有一个严重的问题。到目前为止，我们假设多个控制器对书本进行操作，但如果有两个控制器同时处理同一本书会是什么情况呢？

假设我们页面的一块区域我们所有书本的名称，另一块区域可以更新某一本书。对应这两块区域，我们有两个不同的控制器。第一个加载书本列表，第二个加载特定的一本书。我们的用户在第二块区域中修改了书本的名称并且点击“更新”按钮。更新操作成功后，书本的名称会被改变。但是在书本列表中，这个用户始终看到的是修改之前的名称！真实的情况是我们对同一本书创建了两个不同的书本实例——一个在书本列表中使用，而另一个在修改书本时使用。当用户修改书本名称的时候，它实际上只修改了后一个实例中的属性。然而书本列表中的书本实例并未得到改变。

解决这个问题的办法是在所有的控制器中使用相同的书本实例。在这种方式下，书本列表和书本修改的页面和控制器都持有相同的书本实例，一旦这个实例发生变化，就会被立刻反映到所有的视图中。那么按这种方式行动起来，我们需要创建一个booksmanager服务（我们没有大写开头的b字母，是因为这是一个对象而不是一个类）来管理所有的书本实例池，并且富足返回这些书本实例。如果被请求的书本实例不在实例池中，这个服务会创建它。如果已经在池中，那么就直接返回它。请牢记，所有的加载书本的方法最终都会被定义在booksmanager服务中，因为它是唯一的提供书本实例的组件。

booksmanager service

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

下面是我们的editablebookcontroller和bookslistcontroller两个控制器的代码：

editablebookcontroller and bookslistcontroller that uses 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;
}]);

需要注意的是，模块（template）中还是保持原来使用book实例的方式。现在应用中只持有一个id为1的book实例，它发生的所有改变都会被反映到使用它的各个页面上。

angularjs 中的一些坑
ui的闪烁

angular的自动数据绑定功能是亮点，然而，他的另一面是：在angular初始化之前，页面中可能会给用户呈现出没有解析的表达式。当dom准备就绪，angular计算并替换相应的值。这样就会导致出现一个丑陋的闪烁效果。
上述情形就是在angular教程中渲染示例代码的样子：

<body ng-controller="phonelistctrl">
 <ul>
  <li ng-repeat="phone in phones">
   {{ phone.name }}
   <p>{{ phone.snippet }}</p>
  </li>
 </ul>
</body>

如果你做的是spa(single page application)，这个问题只会在第一次加载页面的时候出现，幸运的是，可以很容易杜绝这种情形发生: 放弃{{ }}表达式，改用ng-bind指令

<body ng-controller="phonelistctrl">
 <ul>
  <li ng-repeat="phone in phones">
   <span ng-bind="phone.name"></span>
   <p ng-bind="phone.snippet">optional: visually pleasing placeholder</p>
  </li>
 </ul>
</body>
 

你需要一个tag来包含这个指令，所以我添加了一个<span>给phone name.

那么初始化的时候会发生什么呢，这个tag里的值会显示(但是你可以选择设置空值).然后，当angular初始化并用表达式结果替换tag内部值，注意你不需要在ng-bind内部添加大括号。更简洁了！如果你需要符合表达式，那就用ng-bind-template吧，

如果用这个指令，为了区分字符串字面量和表达式，你需要使用大括号

另外一种方法就是完全隐藏元素，甚至可以隐藏整个应用，直到angular就绪。

angular为此还提供了ng-cloak指令，工作原理就是在初始化阶段inject了css规则，或者你可以包含这个css 隐藏规则到你自己的stylesheet。angular就绪后就会移除这个cloak样式，让我们的应用(或者元素)立刻渲染。

angular并不依赖jquery。事实上，angular源码里包含了一个内嵌的轻量级的jquery:jqlite. 当angular检测到你的页面里有jquery出现，他就会用这个jquery而不再用jqlite，直接证据就是angular里的元素抽象层。比如，在directive中访问你要应用到的元素。

angular.module('jqdependency', [])
 .directive('failswithoutjquery', function() {
  return {
   restrict : 'a',
   link : function(scope, element, attrs) {
        element.hide(4000)
       }
  }
});

但是这个元素jqlite还是jquery元素呢？取决于，手册上这么写的：

angular中所有的元素引用都会被jquery或者jqlite包装；他们永远不是纯dom引用

所以angular如果没有检测到jquery，那么就会使用jqlite元素，hide()方法值能用于jquery元素，所以说这个示例代码只能当检测到jquery时才可以使用。如果你(不小心)修改了angularjs和jquery的出现顺序，这个代码就会失效！虽说没事挪脚本的顺序的事情不经常发生，但是在我开始模块化代码的时候确实给我造成了困扰。尤其是当你开始使用模块加载器(比如 requirejs), 我的解决办法是在配置里显示的声明angular确实依赖jquery

另外一种方法就是你不要通过angular元素的包装来调用jquery特定的方法，而是使用$(element).hide(4000)来表明自己的意图。这样依赖，即使修改了script加载顺序也没事。

压缩

特别需要注意的是angular应用压缩问题。否则错误信息比如 ‘unknown provider:aprovider  <- a' 会让你摸不到头脑。跟其他很多东西一样，这个错误在官方文档里也是无从查起的。简而言之，angular依赖参数名来进行依赖注入。压缩器压根意识不到这个这跟angular里普通的参数名有啥不同，尽可能的把脚本变短是他们职责。咋办？用“友好压缩法”来进行方法注入。看这里：

module.service('myservice', function($http, $q) {
// this breaks when minified
});
to this:

module.service('myservice', [ '$http', '$q', function($http, $q) {
// using the array syntax to declare dependencies works with minification<b>!</b>
}]);

 

这个数组语法很好的解决了这个问题。我的建议是从现在开始照这个方法写，如果你决定压缩javascript，这个方法可以让你少走很多弯路。好像是一个automatic rewriter机制，我也不太清楚这里面是怎么工作的。

最终一点建议：如果你想用数组语法复写你的functions，在所有angular依赖注入的地方应用之。包括directives，还有directive里的controllers。别忘了逗号(经验之谈)

// the directive itself needs array injection syntax:
module.directive('directive-with-controller', ['myservice', function(myservice) {
  return {
   controller: ['$timeout', function($timeout) {
    
// but this controller needs array injection syntax, too! 
   }],
   link : function(scope, element, attrs, ctrl) {
 
   }
  }
}]);

注意：link function不需要数组语法，因为他并没有真正的注入。这是被angular直接调用的函数。directive级别的依赖注入在link function里也是使用的。

 

 directive永远不会‘完成'

在directive中，一个令人掉头发的事就是directive已经‘完成'但你永远不会知道。当把jquery插件整合到directive里时，这个通知尤为重要。假设你想用ng-repeat把动态数据以jquery datatable的形式显示出来。当所有的数据在页面中加载完成后，你只需要调用$(‘.mytable).datatable()就可以了。 但是，臣妾做不到啊！

为啥呢？angular的数据绑定是通过持续的digest循环实现的。基于此，angular框架里根本没有一个时间是‘休息'的。 一个解决方法就是将jquery datatable的调用放在当前digest循环外，用timeout方法就可以做到。

angular.module('table',[]).directive('mytable', ['$timeout', function($timeout) {
  return {
   restrict : 'e',
   template: '<table class="mytable">' +
          '<thead><tr><th>counting</th></tr></thead>' +
          '<tr ng-repeat="data in datas"><td></td></tr>' +
        '</table>',
   link : function(scope, element, attrs, ctrl) {
     scope.datas = ["one", "two", "three"]
     
// doesn't work, shows an empty table:
     
// $('.mytable', element).datatable() 
     
// but this does:
     $timeout(function() {
      $('.mytable', element).datatable();
     }, 0)
   }
  }
}]);