View
72
Download
2
Category
Preview:
Citation preview
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に最適。何度も描画が必要なゲームには不向き。
Hello, AngularJS World!!
環境構築
▪ 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オプションをつけて
必須項目と定義する
Recommended