Let’s angular js!!

Let’s AngularJS!!
初心者の初心者による初心者のためのAngularJS入門

はじめに
▪ このスライドの内容は，先日開催されたGTUG Girls Meetup ”
1から始めるAngularハンズオン”に則っています。
▪ ソース・参考資料等は以下のリンク先を適宜参考にしてください
▪ http://bit.ly/1F0CTr8
初めまして、Yeoman(ヨーマン)です。
口頭での説明、小話はここで話しますね。

目次
1.AngularJS概要
2.Hello, AngularJS World!!
3.基本の構文を書いてみよう
(フィルタビルトインディレクティブ)

AngularJS 概要
名前は知ってるけど、いったい何者なのか。

AngularJSが生まれた背景
▪ Java Scriptとは，DOMを操作することを原点としている言語である。
Java Script
jQuery
BACKBONE.JS
AngularJS
もっとDOMを
操作しやすく！
もっともっと
DOMを操作しやすく！
jQueryは煩雑だ、
整理しよう。
反対にReact.jsは、
より細やかなDOM操作を目的として生まれた言語。

AngularJSとは
▪ Java Scriptフレームワークの一つ。
Controller
*Factory
View
Directives
Routes
Config
Module
$scope
今日やるのは左下のDirective部分。

AngularJSとは
▪ キーワード
▪ カスタムタグ
▪ 双方向バインディング
▪ DI
▪ ルーティング
▪ Virtual DOM
管理画面など1ページで完結するApplicationに最適。
何度も描画が必要なゲームには不向き。

環境構築
▪ WebIDE (JS Bin) 使います。
▪ URL: http://www.jsbin.com
▪ 構築手順
1. JS Binの左上にある[Add library]から”Angular 1.3.2 Stable” を選択しライブラリをインポートする
2. 以上。表示されているプログラムはindex.htmlに相当する。
手軽に試す分にはWeb IDEは便利！
index.htmlの他にファイルが欲しくなったらWebIDEは卒業。

Hello, AngularJS World!!
▪ body内に記述する。出力結果
Hello (AngularJS World!!!)
<body>
Hello
</body>
Hello

AngularJSが動いているか確認
▪ {{}}内の演算結果が表示されればOK 出力結果
これで正しく出力されていればOK!
<body>
Hello {{1+1}}
</body>
Hello 2

基本の構文を書いてみよう

AngularJSの基本
1. バインディング
▪ 入力内容を即時出力する
2. 条件分岐
3. くり返し
4. フィルタリング
5. Validationチェック
全部書くの大変…説明は下記URL参照してください
http://bit.ly/1AeJG3S

バインディング（１）
おや、出力時に｛｛｝｝がチラッと見える…

バインディング（２）
<span ng-bind></span>でバインディングすれば
{{}}チラ見え問題解決！

条件分岐
条件分岐の構文にはng-showとng-ifの二種類あります。
基本部分は大きな差はないのでng-showを使います。
1が入力されたときのみ、
メッセージを出力する

くり返し
リストdemoDataの値を
順番に出力する
<ul><li></li></ul>で囲みましょ
う

フィルタリング
テキストボックスに入力された値で、
demoDataをフィルタリングする
<li>にfilterオプションをつける

Validationチェック
デフォルトで枠の赤に陰影ついているの
地味に感動した
<head>内で違反した場合の振る舞いを定義
inputにrequiredオプションをつけて
必須項目と定義する

Let’s angular js!!

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Let’s angular js!! (20)

More from Syoko Matsumura (9)

Let’s angular js!!