俺とAngular JS 2
-
Upload
masayuki-katoh -
Category
Technology
-
view
172 -
download
4
Transcript of 俺とAngular JS 2
ProfileName ふぁらお加藤 / @PharaohKJ
Hobby Camera / subculture
Job & Works PhalanXware (Freelancer)
OCR system com / .net
ISDB-T MFC / Linux C++
Social Game PHP / Java
ERP+CRM AngularJS / Cordova
Information App AngularJS / CakePHP
サーバMVCとクライアントMVCの関係
M V C
JSON M V C
JSONMySQL
REST実装
REST API実装を行い、そのAPIエンドポイントを呼ぶ。 処理結果、DBの内容はJSONで返す。
AngularJSとは何か• Googleとコミュニティで開発が進められている JavaScript フレームワーク
• クライアントサイドで動く
• 後述する特徴があってユーザがデータを入力、選択して、ページを遷移しないで結果、プレビューがでるような画面を作るのが得意
• AngularJS 2との関係は・・・ちょっとむずかしい。
AngularJSとは何か - 特徴
AngularJS TIPS AngularJSを利用するには? よりhttp://www.buildinsider.net/web/angularjstips/0001
AngularJS 2では 双方向データバインディングは廃止
AngularJSとは何か - 立ち位置
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた!http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF
%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9
立ち位置 が違う
AngularJSとは何か - 学習方法• 2はまだハードルが高い・・・。1について。
• AngularJS Hub が 神
• http://www.angularjshub.com
• 例) 双方向バインディング
• http://www.angularjshub.com/examples/basics/twowaydatabinding/
AngularJSとは何か - 学習コスト
http://nathanleclaire.com/blog/2014/01/04/5-smooth-angularjs-application-tips/
学習していくと成果が・・・?
altJSとは• altJS = Alternative JavaScript
• JavaScriptを置き換えるために作られた言語
• といっても、まずは altJS で書き、ユーザーに送信する前に、 JavaScript変換する
• たくさん種類があって、選択フローチャートなんかも作ってる人がいる
TypeScriptとはTypeScript はマイクロソフトによって開発された
フリーでオープンソースのプログラミング言語である。
TypeScript は JavaScript に使用するかどうかが
任意の静的型付けとクラスベースオブジェクト指向を
加えたスーパーセットとなっている。
Wikipedia - TypeScript より
Angular2とECMAScript6
Angular2 は ECMAScript6ベースのAtScript/TypeScriptを採用している !
とにかく、ECMAScript6ベース、これで標準をと言える。
まとめ• AngularJSのサンプルを動かしてみた
• AngularJS 2で採用されるTypeScriptとJavaScriptを比較し以下について説明した
• 実行前にわかるエラー
• コード作成するMicrosoft社のエディタへ型を示すことの優位性
• Angular2はECMAScript6を取り込んでいき、標準で進んでいるが、まだまだアルファ版。