Submit Search
Upload
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
•
48 likes
•
15,270 views
Okuno Kentaro
Follow
2014.8.23にAngularJS勉強会 by GDG神戸で使用したスライドです。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 82
Download now
Download to read offline
Recommended
モダンAngularJS @ GDG中国2014.12.6
モダンAngularJS @ GDG中国2014.12.6
Okuno Kentaro
Geb for Testing Your Grails Application GR8Conf India 2016
Geb for Testing Your Grails Application GR8Conf India 2016
Jacob Aae Mikkelsen
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
John Ford
3. javascript bangla tutorials
3. javascript bangla tutorials
SEOPROFFESSIONALDIGI
Rebooting TEI Pointers
Rebooting TEI Pointers
Hugh Cayless
Speeding up Red Team engagements with carnivorall
Speeding up Red Team engagements with carnivorall
Nullbyte Security Conference
WordPressでIoTをはじめよう
WordPressでIoTをはじめよう
Yuriko IKEDA
Html
Html
g Nama
Recommended
モダンAngularJS @ GDG中国2014.12.6
モダンAngularJS @ GDG中国2014.12.6
Okuno Kentaro
Geb for Testing Your Grails Application GR8Conf India 2016
Geb for Testing Your Grails Application GR8Conf India 2016
Jacob Aae Mikkelsen
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
Security: The Great WordPress Lockdown - WordCamp Melbourne - February 2011
John Ford
3. javascript bangla tutorials
3. javascript bangla tutorials
SEOPROFFESSIONALDIGI
Rebooting TEI Pointers
Rebooting TEI Pointers
Hugh Cayless
Speeding up Red Team engagements with carnivorall
Speeding up Red Team engagements with carnivorall
Nullbyte Security Conference
WordPressでIoTをはじめよう
WordPressでIoTをはじめよう
Yuriko IKEDA
Html
Html
g Nama
Cultura organizacional y mejora educativa
Cultura organizacional y mejora educativa
Cristian Guzmán
Vidéo approche en immobilier
Vidéo approche en immobilier
hervepouliot
HTTP For the Good or the Bad - FSEC Edition
HTTP For the Good or the Bad - FSEC Edition
Xavier Mertens
Representing Material Culture Online: Historic Clothing in Omeka
Representing Material Culture Online: Historic Clothing in Omeka
Arden Kirkland
Keep it simple web development stack
Keep it simple web development stack
Eric Ahn
Algoritma 5 november wiwik p.l
Algoritma 5 november wiwik p.l
Wiwik Puji Lestarii
Elgriegoenfichas 1bachillerato-sin membrete-1 copia
Elgriegoenfichas 1bachillerato-sin membrete-1 copia
Francisco Antonio Callejón Rodríguez
Beware of C++17
Beware of C++17
corehard_by
お題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part A
Kazuchika Sekiya
Ip lab
Ip lab
Ema Dunphy
Symfony 1, mi viejo amigo
Symfony 1, mi viejo amigo
Jose Antonio Pio
Twas the night before Malware...
Twas the night before Malware...
DoktorMandrake
Wso2 esb-rest-integration
Wso2 esb-rest-integration
Chanaka Fernando
RCEC Email 3.5.03
RCEC Email 3.5.03
Obama White House
6.2. Hacking most popular websites
6.2. Hacking most popular websites
defconmoscow
Dec 2090 honorarios sca
Dec 2090 honorarios sca
Pastor Felipe Duarte Ramos
Postman On Steroids
Postman On Steroids
Sara Tornincasa
Why Redux-Observable?
Why Redux-Observable?
Anna Su
The report of JavaOne2011 about groovy
The report of JavaOne2011 about groovy
Yasuharu Nakano
IMCI 2008 Edition by WHO
IMCI 2008 Edition by WHO
MarkFredderickAbejo
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
More Related Content
What's hot
Cultura organizacional y mejora educativa
Cultura organizacional y mejora educativa
Cristian Guzmán
Vidéo approche en immobilier
Vidéo approche en immobilier
hervepouliot
HTTP For the Good or the Bad - FSEC Edition
HTTP For the Good or the Bad - FSEC Edition
Xavier Mertens
Representing Material Culture Online: Historic Clothing in Omeka
Representing Material Culture Online: Historic Clothing in Omeka
Arden Kirkland
Keep it simple web development stack
Keep it simple web development stack
Eric Ahn
Algoritma 5 november wiwik p.l
Algoritma 5 november wiwik p.l
Wiwik Puji Lestarii
Elgriegoenfichas 1bachillerato-sin membrete-1 copia
Elgriegoenfichas 1bachillerato-sin membrete-1 copia
Francisco Antonio Callejón Rodríguez
Beware of C++17
Beware of C++17
corehard_by
お題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part A
Kazuchika Sekiya
Ip lab
Ip lab
Ema Dunphy
Symfony 1, mi viejo amigo
Symfony 1, mi viejo amigo
Jose Antonio Pio
Twas the night before Malware...
Twas the night before Malware...
DoktorMandrake
Wso2 esb-rest-integration
Wso2 esb-rest-integration
Chanaka Fernando
RCEC Email 3.5.03
RCEC Email 3.5.03
Obama White House
6.2. Hacking most popular websites
6.2. Hacking most popular websites
defconmoscow
Dec 2090 honorarios sca
Dec 2090 honorarios sca
Pastor Felipe Duarte Ramos
Postman On Steroids
Postman On Steroids
Sara Tornincasa
Why Redux-Observable?
Why Redux-Observable?
Anna Su
The report of JavaOne2011 about groovy
The report of JavaOne2011 about groovy
Yasuharu Nakano
IMCI 2008 Edition by WHO
IMCI 2008 Edition by WHO
MarkFredderickAbejo
What's hot
(20)
Cultura organizacional y mejora educativa
Cultura organizacional y mejora educativa
Vidéo approche en immobilier
Vidéo approche en immobilier
HTTP For the Good or the Bad - FSEC Edition
HTTP For the Good or the Bad - FSEC Edition
Representing Material Culture Online: Historic Clothing in Omeka
Representing Material Culture Online: Historic Clothing in Omeka
Keep it simple web development stack
Keep it simple web development stack
Algoritma 5 november wiwik p.l
Algoritma 5 november wiwik p.l
Elgriegoenfichas 1bachillerato-sin membrete-1 copia
Elgriegoenfichas 1bachillerato-sin membrete-1 copia
Beware of C++17
Beware of C++17
お題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part A
Ip lab
Ip lab
Symfony 1, mi viejo amigo
Symfony 1, mi viejo amigo
Twas the night before Malware...
Twas the night before Malware...
Wso2 esb-rest-integration
Wso2 esb-rest-integration
RCEC Email 3.5.03
RCEC Email 3.5.03
6.2. Hacking most popular websites
6.2. Hacking most popular websites
Dec 2090 honorarios sca
Dec 2090 honorarios sca
Postman On Steroids
Postman On Steroids
Why Redux-Observable?
Why Redux-Observable?
The report of JavaOne2011 about groovy
The report of JavaOne2011 about groovy
IMCI 2008 Edition by WHO
IMCI 2008 Edition by WHO
Viewers also liked
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
Angular1&2
Angular1&2
Kenichi Kanai
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
Shinichiro Yoshida
Python3でwebアプリ
Python3でwebアプリ
Atsushi Odagiri
Dockerを雑に紹介
Dockerを雑に紹介
f99aq8ove
モックアップ共有のススメ
モックアップ共有のススメ
Kazuyoshi Goto
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
はじめてのSpring Boot
はじめてのSpring Boot
なべ
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
Spring bootでweb バリデート編
Spring bootでweb バリデート編
なべ
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
girigiribauer
Vue.js入門
Vue.js入門
Takuya Sato
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Masashi Shinbara
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
GitBucketで社内OSSしませんか?
GitBucketで社内OSSしませんか?
Kiyotaka Kunihira
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
Jun-ichi Sakamoto
Reactive Programming
Reactive Programming
maruyama097
Viewers also liked
(20)
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Angular2実践入門
Angular2実践入門
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Angular1&2
Angular1&2
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
Python3でwebアプリ
Python3でwebアプリ
Dockerを雑に紹介
Dockerを雑に紹介
モックアップ共有のススメ
モックアップ共有のススメ
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
はじめてのSpring Boot
はじめてのSpring Boot
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Spring bootでweb バリデート編
Spring bootでweb バリデート編
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
Vue.js入門
Vue.js入門
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Onsen UIが目指すもの
Onsen UIが目指すもの
GitBucketで社内OSSしませんか?
GitBucketで社内OSSしませんか?
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
Reactive Programming
Reactive Programming
Similar to TypeScriptで書くAngularJS @ GDG神戸2014.8.23
Week 12 code
Week 12 code
abhi7692271
14922 java script built (1)
14922 java script built (1)
dineshrana201992
Building Your First Widget
Building Your First Widget
Chris Wilcoxson
Practica n° 7
Practica n° 7
rafobarrientos
JQuery Presentation
JQuery Presentation
Sony Jain
Backbone js
Backbone js
rstankov
Bca sem 6 php practicals 1to12
Bca sem 6 php practicals 1to12
Hitesh Patel
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Daniel Knell
Javascripting.pptx
Javascripting.pptx
Vinod Srivastava
Logic Equations Resolver J Script
Logic Equations Resolver J Script
Roman Agaev
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
Guilherme Carreiro
Implement threads and a GUI interface using advanced Java Swing clas.pdf
Implement threads and a GUI interface using advanced Java Swing clas.pdf
amrishinda
Ajax - a quick introduction
Ajax - a quick introduction
Stefan Pettersson
ES6, 잘 쓰고 계시죠?
ES6, 잘 쓰고 계시죠?
장현 한
Functional programming using underscorejs
Functional programming using underscorejs
偉格 高
JavaScript lesson 1.pptx
JavaScript lesson 1.pptx
MuqaddarNiazi1
Backbone Basics with Examples
Backbone Basics with Examples
Sergey Bolshchikov
Ex[1].3 php db connectivity
Ex[1].3 php db connectivity
Mouli Chandira
The HyperText Markup Language or HTML is the standard markup language
The HyperText Markup Language or HTML is the standard markup language
Lovely Professional University
Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013
Marcin Wosinek
Similar to TypeScriptで書くAngularJS @ GDG神戸2014.8.23
(20)
Week 12 code
Week 12 code
14922 java script built (1)
14922 java script built (1)
Building Your First Widget
Building Your First Widget
Practica n° 7
Practica n° 7
JQuery Presentation
JQuery Presentation
Backbone js
Backbone js
Bca sem 6 php practicals 1to12
Bca sem 6 php practicals 1to12
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Javascripting.pptx
Javascripting.pptx
Logic Equations Resolver J Script
Logic Equations Resolver J Script
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
Implement threads and a GUI interface using advanced Java Swing clas.pdf
Implement threads and a GUI interface using advanced Java Swing clas.pdf
Ajax - a quick introduction
Ajax - a quick introduction
ES6, 잘 쓰고 계시죠?
ES6, 잘 쓰고 계시죠?
Functional programming using underscorejs
Functional programming using underscorejs
JavaScript lesson 1.pptx
JavaScript lesson 1.pptx
Backbone Basics with Examples
Backbone Basics with Examples
Ex[1].3 php db connectivity
Ex[1].3 php db connectivity
The HyperText Markup Language or HTML is the standard markup language
The HyperText Markup Language or HTML is the standard markup language
Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013
Recently uploaded
VIP Call Girls Service Hitech City Hyderabad Call +91-8250192130
VIP Call Girls Service Hitech City Hyderabad Call +91-8250192130
Suhani Kapoor
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
RajaP95
Coefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptx
Asutosh Ranjan
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Call Girls in Nagpur High Profile
Roadmap to Membership of RICS - Pathways and Routes
Roadmap to Membership of RICS - Pathways and Routes
M Maged Hegazy, LLM, MBA, CCP, P3O
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Call Girls in Nagpur High Profile
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
RajaP95
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
ranjana rawat
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
SIVASHANKAR N
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
RajkumarAkumalla
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Dr.Costas Sachpazis
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )
Tsuyoshi Horigome
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
KurinjimalarL3
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
ranjana rawat
Introduction and different types of Ethernet.pptx
Introduction and different types of Ethernet.pptx
upamatechverse
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
ranjana rawat
Microscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptx
purnimasatapathy1234
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur High Profile
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
ranjana rawat
Porous Ceramics seminar and technical writing
Porous Ceramics seminar and technical writing
rakeshbaidya232001
Recently uploaded
(20)
VIP Call Girls Service Hitech City Hyderabad Call +91-8250192130
VIP Call Girls Service Hitech City Hyderabad Call +91-8250192130
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
Coefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptx
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Roadmap to Membership of RICS - Pathways and Routes
Roadmap to Membership of RICS - Pathways and Routes
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
Introduction and different types of Ethernet.pptx
Introduction and different types of Ethernet.pptx
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
Microscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptx
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
Porous Ceramics seminar and technical writing
Porous Ceramics seminar and technical writing
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
1.
2.
3.
Database RESTfulAPI Controller HTML JSON
4.
5.
6.
http://www.typescriptlang.org/
7.
8.
9.
10.
11.
12.
Class.prototype.method = function(){…
13.
14.
15.
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
16.
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
17.
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
18.
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
19.
var foo =
'abc'; var foo: string = 'abc';
20.
21.
22.
23.
24.
25.
<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; }; };
26.
<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; }; };
27.
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
28.
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
29.
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]);
30.
// ... 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
31.
class SampleCtrl { constructor
( public $scope ) { // ... } } ! class SampleCtrl { public $scope; constructor ($scope) { this.$scope = $scope; // ... } } TS
32.
/sample.ts(1,1): Cannot find
name 'angular'.
33.
34.
http://definitelytyped.org/
35.
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]);
36.
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]);
37.
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]);
38.
39.
40.
TS // ... ! class SampleCtrl
{ constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! // ...
41.
TS // ... ! class SampleCtrl
{ constructor ( public $scope ) { this.$scope.firstName = 'John'; this.$scope.lastName = 'Doe'; ! this.$scope.getFullName = () => { return this.$scope.firstName + ' ' + this.$scope.lastName; }; } } ! // ... ! ここが増えそうなのは 目に見えている…
42.
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'; }
43.
TS constructor ( public $scope )
{ this.init(); } ! private init() { // ... } ! public getFullName(): string { return this.$scope.firstName + ' ' + this.$scope.lastName; }
44.
?!
45.
this.$scope.getFullName = ()
=> { return // ... };
46.
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; }
47.
48.
49.
<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
50.
<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
51.
<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
52.
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]);
53.
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]);
54.
55.
56.
{{c.$scope.firstName}}
57.
58.
59.
60.
61.
angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function
(otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); JS
62.
angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function
(otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); JS
63.
angular.module('MyAngularJs') .factory('MyProvider', ['otherProvider', function
(otherProvider) { return new MyProvider(otherProvider); }]); JS angular.module('MyAngularJs') .service('MyProvider', ['otherProvider', MyProvider]); JS
64.
65.
66.
67.
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]);
68.
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
69.
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
70.
71.
72.
73.
$resource<T>(); ↓ ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス
74.
! 嫌んなってきた $resource<T>(); ↓ ng.resource.IResourceClass<T>型のインスタンス .query(); ↓ ng.resource.IResourceArray<T>型のインスタンス .$promise ↓ ng.IPromise<ng.resource.IResourceArray<T>>型のインスタンス
75.
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>
76.
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>
77.
78.
ng.IPromise<ng.resource.IResourceArray<T>> (promiseValue: T) "ng.resource.IResourceArray<T>" ! "ng.resource.IResourceArray<T>" $resource<T>() IResourceArray<T> ! $resource<T>() .then()
79.
80.
Download now