SpreadJSは、クライアント側でTypeScriptを使用するWebアプリケーションフレームワークであるAngularをサポートします。

AngularJSをSpreadJSで使用するには、次の手順を実行します。

1.  SpreadJS AngularJSモジュールをアプリケーションのjsファイル（/scripts/interop/angular.gc.spread.sheets.xxx.js）に追加します。
2.  gcspreadsheetsモジュールをアプリケーションのjsファイルに追加します。たとえば、「myApp」という名前のng-app属性によって作業範囲が示される場合は、次のようなコードをアプリケーション定義jsファイルに追加します。

   angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

3. HTMLページに、gc-spread-sheetsタグを追加します。 次に、シートを追加し、シートに列を追加します。 Spread、シート、または列に対する属性を設定できます。 次に、例を示します。

   JavaScript	コードのコピー
   <gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">      <worksheets>          <worksheet frozen-column-count="1">          </worksheet >      </worksheets>  </gc-spread-sheets>

Spread、Sheet、およびcolumnは、タグ階層における基本要素です。 これらの基本要素を設定することで、その他の要素も機能します。 主なタグ階層は次のとおりです。

要素の設定が単純型である場合、または単純な文字列として設定できる場合は、要素の属性として設定します。 単純型には、number、string、Boolean、enum、font、lineBorderなどがあります。

要素の設定がオブジェクト型であり、単純な文字列として設定できない場合は、基本要素の子要素として設定します。 子要素は、別の子要素を持つこともできます。 次に、例を示します。

以下の各トピックでは、要素のさまざまなディレクティブについて説明します。

• Gc-spread-sheets要素
• SheetとSheets要素
• Column、ColumnsとGroup要素
• Style要素
• Cell要素
• Validator要素

属性名では大文字と小文字は区別されず、単語間の区切りには「-」を使用できます。 たとえば、以下のコードはすべて同じ結果となります。

<column dataField="country"></column>
<column datafield="country"></column>
<column DATAFIELD="country"></column>
<column data-field="country"></column>
<column Data-Field="country"></column>

属性値には、"{{binding}}"を使用して、作業範囲のデータをバインドできます。 次に、例を示します。 この列では、列幅がcolumnWidthにバインドされています。

<column width={{columnWidth}} >

次に、ng-modelを使用してcolumnWidthをバインドするHTML input要素を示します。

Column Width: <input ng-model="columnWidth"  />

input要素に数値を入力すると、列幅が自動的にサイズ変更されます。

Spreadディレクティブ要素または属性を、要素のディレクティブに従っていない別の要素に追加しても、効果はありません。 HTMLタグで定義されている列は、並べ替え、挿入、または削除することはできません。 これらを行うと、値のバインドエラーとなります。