More Related Content
Similar to AngularJS+TypeScriptを試してみた。 (20)
More from Toshio Ehara (20)
AngularJS+TypeScriptを試してみた。
- 14. 型定義情報
///<reference path='xxx/typings/angularjs/angular.d.ts' />
module Sample {
継承して作ります
export interface Scope extends ng.IScope {
text: string;
clickEvent: Function;
使用するScopeの型定義
}
export class SampleCtr {
constructor(public $scope: Scope ) {
public付くと インスタンス変数に
this.$scope.text = “"; // 初期化
this.$scope.clickEvent = angular.bind(this, this.click);
}
click() {
this.$scope.text += " click!! ";
}
bindでメソッドと
$scopeを紐づけます
}
}
!
angular.module("app.controller", [])
.controller("SampleCtr", Sample.SampleCtr);
!
angular.module("app", ["app.controller"]);
moduleへの定義は
JSとまったく同じです。
- 18. Controllerで使用する為定義を読込!
///<reference path='xxx/typings/angularjs/angular.d.ts' />
///<reference path='../service/SampleSrvModule.ts' />
module Sample {
// ・・・省略・・・
export class SampleCtr {
srv 文字列で登録している
サービスのインスタンスを呼び出し
constructor(public $scope:Scope,public srv: Srv.SampleSrv) {
// ・・・省略・・・
}
srv 文字列で登録している
サービスのインスタンスを呼び出し
click() {
this.$scope.text = this.srv.addText(this.$scope.text);
}
}
}
JSと同じ書き方でcontrollerモジュールに
serviceモジュールを依存させます
!
angular.module("app.controller", ["app.service"])
.controller("SampleCtr", Sample.SampleCtr);
!
angular.module("app", ["app.controller"]);
- 20. IDirectiveインターフェースを実装してクラスを作ります。
///<reference path='./libs/typings/angularjs/angular.d.ts' />
!
module MyDirective {
export class NsStyle implements ng.IDirective {
restrict: string = "A";
replace: boolean = false;
scope: any = false;
compile(elem:ng.IAugmentedJQuery, attrs:ng.IAttributes):any {
elem.addClass("nishi");
}
このDirectiveがつけられたタグのclass名に nishi が追加されます
}
}
!
Directiveの定義は オブジェクトなので new します。
!
angular.module("app.directive", [])
.directive("nStyle", () => new MyDirective.NsStyle() );
!
angular.module("app", ["app.controller", "app.directive"]);