Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

AngularJS+TypeScriptを試してみた。

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

twitterハッシュ: #nishipro

  • Inicia sesión para ver los comentarios

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. ご清聴ありがとうございました!

×