[Note of Angular 2] 在 Angular 2 中使用 Lovefield

發表於   |   分類於

title: ‘[Note of Angular 2] Using Lovefield in Angular 2’

簡介

Lovefield是什麼呢? 簡單來說就是google出品的工具，可以幫助開發者們在客戶端來儲存結構化的資料，並且可以透過SQL的語法來進行查詢。

安裝

1
2
npm install lovefield --save
typings install dt~lovefield --global --save

設定

在index.html檔案中加入以下script

1
<script src="node_modules/lovefield/dist/lovefield.min.js"></script>

在typings.json的globalDependencies區塊中加入以下兩行

1
2
"es6-promise": "registry:dt/es6-promise#0.0.0+20160423074304",
"lovefield": "registry:dt/lovefield#2.0.62+20160317120654"

使用方法

參考官方的範例，todo_typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function main(): void {
  var schemaBuilder: lf.schema.Builder = lf.schema.create('todo', 1);

  schemaBuilder.createTable('Item').
      addColumn('id', lf.Type.INTEGER).
      addColumn('description', lf.Type.STRING).
      addColumn('deadline', lf.Type.DATE_TIME).
      addColumn('done', lf.Type.BOOLEAN).
      addPrimaryKey(['id'], false).
      addIndex('idxDeadline', ['deadline'], false, lf.Order.DESC);

  var todoDb: lf.Database = null;
  var dummyItem: lf.schema.Table = null;
  var connectOptions: lf.schema.ConnectOptions = {
    storeType: lf.schema.DataStoreType.MEMORY
  };
  schemaBuilder.connect(connectOptions).then(
      function(db) {
        todoDb = db;
        dummyItem = db.getSchema().table('Item');
        var row = dummyItem.createRow({
          'id': 1,
          'description': 'Get a cup of coffee',
          'deadline': new Date(),
          'done': false
        });

        return db.insertOrReplace().into(dummyItem).values([row]).exec();
      }).then(
      function() {
        var column: lf.schema.Column = (<any>dummyItem).done;
        return todoDb.select().from(dummyItem).where(column.eq(false)).exec();
      }).then(
      function(results) {
        results.forEach(function(row) {
          console.log((<any>row).description, 'before',  (<any>row).deadline);
          document.body.textContent =
              (<any>row).description + ' before ' + (<any>row).deadline;
        });
      });
}