Your SlideShare is downloading. ×
0
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS+TypeScriptを試してみた。

1,850

Published on

第7回西区プログラム勉強会 …

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

twitterハッシュ: #nishipro

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,850
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×