AngularJS+TypeScriptを試してみた。

3,629 views

Published on

第7回西区プログラム勉強会
http://www.zusaar.com/event/3507006

twitterハッシュ: #nishipro

Published in: Technology
2 Comments
5 Likes
Statistics
Notes
  • I can't read Japanese, but the beauty of code makes this one of the cleanest examples of Typescript modules connecting to angular modules! Nice work!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • english please :D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,629
On SlideShare
0
From Embeds
0
Number of Embeds
195
Actions
Shares
0
Downloads
12
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

AngularJS+TypeScriptを試してみた。

  1. 1. AngularJS+TypeScriptを試してみた。 2014/3/2(日) 第7回西区プログラム勉強会 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
  2. 2. -自己紹介株式会社キャムの江原と申します。 プログラムしてます。 @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
  3. 3. 会社で作る新しいサービスの技術基盤を色々検証してます。 そこでAngularJSの検証をしています。
  4. 4. でも JavaScriptで大規模って言うとこういう印象が…
  5. 5. JavaScript × 大規模 ≒ デスマーチ
  6. 6. そこでTypeScriptは、どうかな?話になりました。
  7. 7. 今日は TypeScriptでAngularJSを書いたときに どんな感じになるのかを発表したいと思います。
  8. 8. 以下機能をTypeScriptで書いてみました。 module controller service directive
  9. 9. 1. module モジュール(名前空間みたいな)の作成、登録、取得を グローバル空間で行う // JavaScript例 // module生成 modu1に依存します angular.module( "app", [ "modu1"]); // “app”moduleを参照してcontrollerを追加 angular.module( "app").controller( …
  10. 10. TypeScriptでmoduleを書くと…あまり変わらないですね // TypeScript // module生成 modu1に依存します angular.module( "app", [ "modu1"]); // “app”moduleを参照してcontrollerを追加 angular.module( "app").controller( …
  11. 11. 2. controller ビュー(DOM)に割り当てるコントローラー // View DOM sample <div ng-controller="SampleCtr" > <h1 ng-click="clickEvent()" >{{text}}</h1> <input type="text" ng-model="text" /> </div>
  12. 12. // JavaScript例 angular.module("app.controller", ["app.service"]) .controller("SampleCtr", function($scope) { $scope.text = ""; $scope.clickEvent = function(){ $scope.text += " click!! "; }; });
  13. 13. TypeScriptでクラスぽくControllerを書くと
  14. 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とまったく同じです。
  15. 15. 例えばIntelliJで 定義に飛ぶと こんな感じで見れます。 ///<reference path='xxx/typings/angularjs/angular.d.ts' /> module Sample { export interface Scope extends ng.IScope {
  16. 16. 3. service コントローラーが呼び出す共通ロジック
  17. 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. 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"]);
  19. 19. 4. Directive 続いてカスタム属性を書いてみましょう! DirectiveはDOM操作を担当します。
  20. 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"]);
  21. 21. まとめ!
  22. 22. まとめ! 学習コスト高め
 AngularJSの学習とTypeScriptの学習を同時にすると頭が 混乱します! うまく書けば保守性が高そう
 TypeScriptはJSには無い型が宣言出来る為、IDEの補完や 定義に飛んだりコンパイルエラーに出来たりできます。
  23. 23. 懸念も多いですね…  新規導入するには初期コストがかかりますし  まだまだノウハウが少ないので  実案件より先に社内システムとかで  練習した方が良さそうです…  でも、もしかしたら一気に流行るかもしれませんので  良かったら少し味見してみては??
  24. 24. ご清聴ありがとうございました!

×