第21回 GTUG Girls Meetup 「1から始めるAngularハンズオン」

簡単なAngular概要と初心者向けハンズオンでAngularの素顔に触れました。 講師:佐川さん(@albatrosary) チュータ:小川さん(@mitsuruog) 参考(講師blog):http://albatrosary.hateblo.jp/entry/2014/11/06/101400
1
Shoko@産休中 @_okohs

ディレクティブがAngularで一番とっつきやすい。 #gtuggirls

2015-04-22 19:44:09
Yuki Anzai @yanzm

GTUG Girls では python でサーバー立てることが多かったな #gtuggirls

2015-04-22 19:45:23
Yuki Anzai @yanzm

サーバーの立て方は事前準備で紹介しておくのがいいかもなー #gtuggirls

2015-04-22 19:49:25
まねじ @manemanezi

サーバー立ち上げ。MacはPythonが元々入ってるΣ(゚Д゚)→python -m SimpleHTTPServer #gtuggirls

2015-04-22 19:49:44
Yuki Anzai @yanzm

モダンなWeb開発は黒い画面(コンソール)を使うことが多い(らしい) #gtuggirls

2015-04-22 19:54:55
まねじ @manemanezi

事前準備とか、ここまでは理解しておいてね!っていうのは先に伝えておくとよいかも。コンソール触ったことないのは大変かもね。

2015-04-22 19:55:10
まねじ @manemanezi

下手したら黒い画面が白い画面かもしれぬぞ…

2015-04-22 19:56:03
Yuka Kobayashi @kobachiya

ローカルサーバを立ち上げて、HTML書いてる。まだAngularじゃ無い!w #gtuggirls

2015-04-22 20:03:36
Shoko@産休中 @_okohs

JS Binまじ便利。ちょっと触りたい言語使いたい場合にいいかも。 #gtuggirls

2015-04-22 20:04:52
まねじ @manemanezi

scriptタグでAngularさん使うよ!って宣言する。ダウンロードとかいらない。→<script src="ajax.googleapis.com/ajax/libs/angu…"></script> #gtuggirls

2015-04-22 20:10:05
まねじ @manemanezi

1+1をやるのがオーソドックス? #gtuggirls

2015-04-22 20:10:47
Yuka Kobayashi @kobachiya

bodyにng-app書くと「オレ、アンギュラーだから」になる #gtuggirls

2015-04-22 20:12:10
Yuka Kobayashi @kobachiya

ちらっと二重括弧が見えるのには目をつむる...w #gtuggirls

2015-04-22 20:13:01
まねじ @manemanezi

俺はAngularだよ!っていうのはこれ→<body ng-app> #gtuggirls

2015-04-22 20:13:03
まねじ @manemanezi

バインディングの基本 <body ng-app> <input type="text" ng-model="hoge"> {{hoge}} </body> #gtuggirls

2015-04-22 20:16:10
Shoko@産休中 @_okohs

Angularのすごいとこ。テキストボックスに入れたものをすぐ反映できる。これだけのソースで!!! #gtuggirls pic.twitter.com/Nhq8GJFlJq

2015-04-22 20:17:01
拡大
まねじ @manemanezi

ディレクティブの数はたくさんあって覚えるの大変らしい。よく使うやつから拾っていけばよいらしい。#gtuggirls

2015-04-22 20:17:12
Yuki Anzai @yanzm

{{}} でも bind できるし、ng-bind でも bind できる。ng-bind だと一瞬{{}}が見えるのが解消できる #gtuggirls

2015-04-22 20:19:24
まねじ @manemanezi

今つくってるやつもAngular使いたい。これがあれば泥臭いソース書かずに済んだよ…(´;ω;`) 勉強するの大事だね。

2015-04-22 20:20:37
まねじ @manemanezi

ng-showとng-ifの違いは今は気にしなくて良い #gtuggirls

2015-04-22 20:24:37
まねじ @manemanezi

1入力時のみメッセージを出す <input type="text" ng-model="hoge"> <div ng-show="hoge==='1'"> <span ng-bind="hoge"></span> が入力されました </div> #gtuggirls

2015-04-22 20:25:40