Downloaded 12 times
![1. module モジュール(名前空間みたいな)の作成、登録、取得を グローバル空間で行う // JavaScript例 // module生成 modu1に依存します angular.module( "app", [ "modu1"]); // “app”moduleを参照してcontrollerを追加 angular.module( "app").controller( …](https://image.slidesharecdn.com/typescriptangularnpro20140302-140302163535-phpapp01/75/AngularJS-TypeScript-9-2048.jpg)
![TypeScriptでmoduleを書くと…あまり変わらないですね // TypeScript // module生成 modu1に依存します angular.module( "app", [ "modu1"]); // “app”moduleを参照してcontrollerを追加 angular.module( "app").controller( …](https://image.slidesharecdn.com/typescriptangularnpro20140302-140302163535-phpapp01/75/AngularJS-TypeScript-10-2048.jpg)
![// JavaScript例 angular.module("app.controller", ["app.service"]) .controller("SampleCtr", function($scope) { $scope.text = ""; $scope.clickEvent = function(){ $scope.text += " click!! "; }; });](https://image.slidesharecdn.com/typescriptangularnpro20140302-140302163535-phpapp01/75/AngularJS-TypeScript-12-2048.jpg)
![型定義情報 ///<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とまったく同じです。](https://image.slidesharecdn.com/typescriptangularnpro20140302-140302163535-phpapp01/75/AngularJS-TypeScript-14-2048.jpg)
![注）angularのモジュールではないです。 TypeScriptは名前空間の機能があります。 ///<reference path='xxx/typings/angularjs/angular.d.ts' /> module Srv { ! export class SampleSrv { ! constructor() { } ! addText(text:string):string { return text + " [add text]"; } } angularのモジュールにサービス機能として登録します。 } ! angular.module("app.service", []) .service("srv", Srv.SampleSrv); サービスは各Controllerの共通処理を記述します。](https://image.slidesharecdn.com/typescriptangularnpro20140302-140302163535-phpapp01/75/AngularJS-TypeScript-17-2048.jpg)
![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"]);](https://image.slidesharecdn.com/typescriptangularnpro20140302-140302163535-phpapp01/75/AngularJS-TypeScript-18-2048.jpg)
![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"]);](https://image.slidesharecdn.com/typescriptangularnpro20140302-140302163535-phpapp01/75/AngularJS-TypeScript-20-2048.jpg)
Uploaded byToshio Ehara
AngularJS＋TypeScriptを試してみた。
第7回西区プログラム勉強会 http://www.zusaar.com/event/3507006 twitterハッシュ: #nishipro
AngularJS＋TypeScriptを試してみた。
- 1. AngularJS＋TypeScriptを試してみた。 2014/3/2(日) 第7回西区プログラム勉強会 Photo byWeb制作向け無料写真素材／ぱくたそ http://www.pakutaso.com
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. 1. module モジュール(名前空間みたいな)の作成、登録、取得を グローバル空間で行う // JavaScript例 //module生成 modu1に依存します angular.module( "app", [ "modu1"]); // “app”moduleを参照してcontrollerを追加 angular.module( "app").controller( …
- 10. TypeScriptでmoduleを書くと…あまり変わらないですね // TypeScript // module生成modu1に依存します angular.module( "app", [ "modu1"]); // “app”moduleを参照してcontrollerを追加 angular.module( "app").controller( …
- 11. 2. controller ビュー(DOM)に割り当てるコントローラー // ViewDOM sample <div ng-controller="SampleCtr" > <h1 ng-click="clickEvent()" >{{text}}</h1> <input type="text" ng-model="text" /> </div>
- 12. // JavaScript例 angular.module("app.controller", ["app.service"]) .controller("SampleCtr",function($scope) { $scope.text = ""; $scope.clickEvent = function(){ $scope.text += " click!! "; }; });
- 13.
- 14. 型定義情報 ///<reference path='xxx/typings/angularjs/angular.d.ts' /> moduleSample { 継承して作ります 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とまったく同じです。
- 15. 例えばIntelliJで 定義に飛ぶと こんな感じで見れます。 ///<reference path='xxx/typings/angularjs/angular.d.ts' /> moduleSample { export interface Scope extends ng.IScope {
- 16.
- 17. 注）angularのモジュールではないです。 TypeScriptは名前空間の機能があります。 ///<reference path='xxx/typings/angularjs/angular.d.ts'/> module Srv { ! export class SampleSrv { ! constructor() { } ! addText(text:string):string { return text + " [add text]"; } } angularのモジュールにサービス機能として登録します。 } ! angular.module("app.service", []) .service("srv", Srv.SampleSrv); サービスは各Controllerの共通処理を記述します。
- 18. Controllerで使用する為定義を読込！ ///<reference path='xxx/typings/angularjs/angular.d.ts' /> ///<referencepath='../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"]);
- 19.
- 20. IDirectiveインターフェースを実装してクラスを作ります。 ///<reference path='./libs/typings/angularjs/angular.d.ts' /> ! moduleMyDirective { 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"]);
- 21.
- 22.
- 23.
- 24.