つばろぐ

主に C#, .NET, Azure の備忘録です。たまに日記。

勉強会参加メモ & JSFiddle で AngularJS を書いてみる

JavaScript MVC勉強会に参加してきました。

昨年末から仕事が忙しくなり、勉強会にめっきり参加できませんでした。
仕事も落ち着き、2月28日に久しぶりに勉強会に参加してきました。
勉強会のページはこちら → Fukuoka Frontend Frogs特別編『JavaScript MVC勉強会』

普段、C#を使っている私にとって、JavaScriptを始めとするWebやフロントエンド界隈の話は勉強会でしか聞くことができません。

…今どんな技術が使われているのか、
…フロントエンドとは一体何なのか、
…スーツで勉強会に参加するのは浮いているんじゃないか、

色々面白い話を聞くことができました。
そこで自分もJavaScript MVCを勉強してみようと思い、ドットインストールでAngularJSの復習をはじめました。
AngularJS入門 (全12回) - プログラミングならドットインストール #dotinstall

ドットインストールではCDNでAngularJSを読み込んで使っています。
この方法以外に、JSFiddleを使ってAngularJSを動かすことができます。

JSFiddleでAngularJSを動かすには

f:id:tech-tsubaki:20140305235800j:plain

Frameworks & Extensions

フレームワークにはAngularJS、読込タイミングにはNo wrap - in <head>もしくはNo wrap - in <body>を選択します。

HTML

先頭要素に ng-app を記述します。

JavaScript

$scopeを定義すれば、値の参照/設定もすることができます。

CTRL+Returnでプログラムを実行すると、AngularJSで記述したプログラムが動作します。
どこまで複雑なプログラムが動くかは検証していないので分かりませんが、簡単な動作確認であればこれで十分ですね。

今回のプログラムはこちら。