TypeScriptで書くAngularJS @ GDG神戸2014.8.23
Upcoming SlideShare
Loading in...5
×
 

TypeScriptで書くAngularJS @ GDG神戸2014.8.23

on

  • 3,874 views

2014.8.23にAngularJS勉強会 by GDG神戸で使用したスライドです。

2014.8.23にAngularJS勉強会 by GDG神戸で使用したスライドです。

Statistics

Views

Total Views
3,874
Views on SlideShare
3,673
Embed Views
201

Actions

Likes
20
Downloads
13
Comments
0

4 Embeds 201

https://twitter.com 183
http://www.slideee.com 14
http://tweetedtimes.com 3
http://b.hatena.ne.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TypeScriptで書くAngularJS @ GDG神戸2014.8.23 TypeScriptで書くAngularJS @ GDG神戸2014.8.23 Presentation Transcript

  • 
 

  • Database RESTfulAPI Controller HTML JSON
  • http://www.typescriptlang.org/ View slide
  • 
 
 View slide
  • 
 

  • Class.prototype.method = function(){…

  • class Greeter { private greeting: string; constructor(message: string) { this.greeting = message; } public greet() { return 'Hello, ' + this.greeting; } } ! var greeter = new Greeter('world'); ! var button = document.createElement('button'); button.textContent = 'Say Hello'; button.onclick = () => { alert(greeter.greet()); }; ! document.body.appendChild(button); TS
  • var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return 'Hello, ' + this.greeting; }; return Greeter; })(); ! var greeter = new Greeter('world'); ! var button = document.createElement('button'); button.textContent = 'Say Hello'; button.onclick = function () { alert(greeter.greet()); }; document.body.appendChild(button); //# sourceMappingURL=greeter.js.map JS
  • class Greeter { private greeting: string; constructor(message: string) { this.greeting = message; } public greet() { return 'Hello, ' + this.greeting; } } ! var greeter = new Greeter('world'); ! var button = document.createElement('button'); button.textContent = 'Say Hello'; button.onclick = () => { alert(greeter.greet()); }; ! document.body.appendChild(button); TS
  • class Greeter { private greeting: string; constructor(message: string) { this.greeting = message; } public greet() { return 'Hello, ' + this.greeting; } } ! var greeter = new Greeter('world'); ! var button = document.createElement('button'); button.textContent = 'Say Hello'; button.onclick = () => { alert(greeter.greet()); }; ! document.body.appendChild(button); TS
  • var foo = 'abc';
 var foo: string = 'abc'; 

  • 
 
 
 

  • <body ng-app> <div ng-controller="SampleCtrl"> <strong>First name:</strong> {{firstName}}<br> </div> </body> HTML JS function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; };
  • <body ng-app> <div ng-controller="sampleCtrl"> <strong>First name:</strong> {{firstName}}<br> </div> </body> HTML JS ! function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; };
  • angular.module('MyAngularJs', [/*...*/]); // Setter ! function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; }; ! angular.module('MyAngularJs') // Getter .controller('SampleCtrl', [ '$scope', // 使用するServiceは全て文字列で表記 SampleCtrl ]); JS
  • angular.module('MyAngularJs', [/*...*/]); // Setter ! function SampleCtrl ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; ! $scope.getFullName = function () { return $scope.firstName + ' ' + $scope.lastName; }; }; ! angular.module('MyAngularJs') // Getter .controller('SampleCtrl', [ '$scope', // 使用するServiceは全て文字列で表記 SampleCtrl ]); JS
  • TS // ... class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);
  • // ... class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]); TS 
 

  • class SampleCtrl { constructor ( public $scope ) { // ... } } ! class SampleCtrl { public $scope; constructor ($scope) { this.$scope = $scope; // ... } } TS
  • 
 /sample.ts(1,1): Cannot find name 'angular'.
  • 
 
 
 http://definitelytyped.org/ 

  • TS /// <reference path="angularjs/angular.d.ts" /> ! class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);
  • TS declare var angular: any; ! class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);
  • TS declare var angular: any; ! class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', ['$scope', SampleCtrl]);
  • TS // ... ! class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! // ...
  • TS // ... ! class SampleCtrl { constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! // ... ! ここが増えそうなのは 目に見えている…
  • TS constructor ( public $scope ) { this.init(); ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } ! private init() { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; }
  • TS constructor ( public $scope ) { this.init(); } ! private init() { // ... } ! public getFullName(): string { return this.$scope.firstName + ' ' + this.$scope.lastName; }
  • ?!
  • 
 this.$scope.getFullName = () => { return // ... };
  • TS constructor ( public $scope ) { this.init(); this.$scope.getFullName = this.getFullName.bind(this); } ! private init() { // ... } ! public getFullName(): string { return this.$scope.firstName + ' ' + this.$scope.lastName; }
  • <body ng-app> <div ng-controller="SampleCtrl"> <strong>First name:</strong> {{firstName}}<br> <strong>Last name:</strong> {{lastName}}<br> <strong>Full name:</strong> {{getFullName()}}<br> </div> </body> HTML
  • <body ng-app> <div ng-controller="SampleCtrl as c"> <strong>First name:</strong> {{c.firstName}}<br> <strong>Last name:</strong> {{c.lastName}}<br> <strong>Full name:</strong> {{c.getFullName()}}<br> </div> </body> HTML
  • <body ng-app> <div ng-controller="SampleCtrl as c"> <strong>First name:</strong> {{c.firstName}}<br> <strong>Last name:</strong> {{c.lastName}}<br> <strong>Full name:</strong> {{c.getFullName()}}<br> </div> </body> HTML
  • TS class SampleCtrl { public firstName: string; public lastName: string; ! constructor () { this.init(); } ! private init() { this.firstName = 'John'; this.lastName = 'Doe'; } ! public getFullName(): string { return this.firstName + ' ' + this.lastName; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', [SampleCtrl]);
  • TS class SampleCtrl { public firstName: string; public lastName: string; ! constructor () { this.init(); } ! private init() { this.firstName = 'John'; this.lastName = 'Doe'; } ! public getFullName(): string { return this.firstName + ' ' + this.lastName; } } ! angular.module('MyAngularJs') .controller('SampleCtrl', [SampleCtrl]);
  • 
 

  • {{c.$scope.firstName}}
  • angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); JS
  • angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); JS
  • angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function (otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); JS
  • 
 

  • 
 
 
 
 

  • TS class MyResource { constructor( private $q: ng.IQService, private $resource: ng.resource.IResourceService ) { // ... } ! private resource(): IResourceClass { var baseApi = '/api/entities'; var params: any = null; var actions = { getWithEntityId: { method: 'GET', url: baseApi+'/:id', isArray: true} }; return <IResourceClass>this.$resource(baseApi, params, actions); } ! public fetchEntity(id: my.obj.EntityId): IPromiseReturnEntity { var dfd = this.deferAcceptEntity(); ! var query = {id: id}; this.resource().getWithEntityId( query, this.success(), this.failure() ).$promise.then(this.fetchThen(dfd)); ! return dfd.promise; } private fetchThen(dfd: IDeferredAcceptEntity): (res: my.obj.IEntities) => void { return (res) => { var e: my.obj.IEntity = res[0]; dfd.resolve(e); }; } } ! angular.module('MyAngularJs') .service('MyResource', ['$q', '$resource', MyResource]);
  • class MyResource { constructor( private $q: ng.IQService, private $resource: ng.resource.IResourceService ) { // ... } ! private resource(): IResourceClass { var baseApi = '/api/entities'; var params: any = null; var actions = { getWithEntityId: { method: 'GET', url: baseApi+'/:id', isArray: true} }; return <IResourceClass>this.$resource(baseApi, params, actions); } ! public fetchEntity(id: my.obj.EntityId): IPromiseReturnEntity { var dfd = this.deferAcceptEntity(); ! var query = {id: id}; this.resource().getWithEntityId( TS
  • isArray: true} }; return <IResourceClass>this.$resource(baseApi, params, actions); } ! public fetchEntity(id: number): IPromiseReturnEntity { var dfd = this.deferAcceptEntity(); ! var query = {id: id}; this.resource().getWithEntityId( query, this.success(), this.failure() ).$promise.then(this.fetchThen(dfd)); ! return dfd.promise; } private fetchThen(dfd: IDeferredAcceptEntity): (res: my.obj.IEntities) => void { return (res) => { var e: my.obj.IEntity = res[0]; dfd.resolve(e); }; } } ! angular.module('MyAngularJs') .service('MyResource', ['$q', '$resource', MyResource]); TS
  • $resource<T>(); ↓ ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス
  • ! 嫌んなってきた $resource<T>(); ↓ ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス
  • ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス .then<TResult>( successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any ): IPromise<TResult>
  • ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス .then<TResult>( successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any ): IPromise<TResult>
  • ng.IPromise<ng.resource.IResourceArray<T>>
 (promiseValue: T) "ng.resource.IResourceArray<T>" ! "ng.resource.IResourceArray<T>" $resource<T>() IResourceArray<T> ! $resource<T>() .then()
  • 
 

  •