Soumettre la recherche
Mettre en ligne
Let’s angular js!!
•
Télécharger en tant que PPTX, PDF
•
2 j'aime
•
1,420 vues
Syoko Matsumura
Suivre
ゆるふわAngularJSハンズオン
Lire moins
Lire la suite
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 19
Télécharger maintenant
Recommandé
Webページで学ぶJavaScript2013 第6回
Webページで学ぶJavaScript2013 第6回
京大 マイコンクラブ
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Koji Nakamura
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
Webページで学ぶJavaScript2013 第8回
Webページで学ぶJavaScript2013 第8回
京大 マイコンクラブ
2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb
Ueki Kouji
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
JavaScriptライフを10倍楽しくする方法-HTML5fun-
JavaScriptライフを10倍楽しくする方法-HTML5fun-
Masayuki Abe
Recommandé
Webページで学ぶJavaScript2013 第6回
Webページで学ぶJavaScript2013 第6回
京大 マイコンクラブ
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Koji Nakamura
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
Webページで学ぶJavaScript2013 第8回
Webページで学ぶJavaScript2013 第8回
京大 マイコンクラブ
2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb
Ueki Kouji
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
JavaScriptライフを10倍楽しくする方法-HTML5fun-
JavaScriptライフを10倍楽しくする方法-HTML5fun-
Masayuki Abe
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
ke-m kamekoopa
Effective flutter
Effective flutter
小川 昌吾
Android mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそう
naoyuki miyata
Useful Rundeck
Useful Rundeck
Hiroki Sakonju
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
Ryunosuke SATO
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
Ryunosuke SATO
GroovyでJSON2014
GroovyでJSON2014
Yasuharu Hayami
Rubyによるクローラー開発
Rubyによるクローラー開発
しくみ製作所
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
20131012 nodejs
20131012 nodejs
Amuro Nishizawa
Vue.jp
Vue.jp
GIG inc.
Touchdiamond S21HT Review
Touchdiamond S21HT Review
masaki ishitani
K初めてのstylus
K初めてのstylus
Kazuki Nakatani
Node js 入門
Node js 入門
Satoshi Takami
Nodeについて
Nodeについて
Natsuki Yamanaka
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
京大 マイコンクラブ
Javascriptの歴史
Javascriptの歴史
ヨウコ スズキ
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Contenu connexe
Tendances
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
ke-m kamekoopa
Effective flutter
Effective flutter
小川 昌吾
Android mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそう
naoyuki miyata
Useful Rundeck
Useful Rundeck
Hiroki Sakonju
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
Ryunosuke SATO
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
Ryunosuke SATO
GroovyでJSON2014
GroovyでJSON2014
Yasuharu Hayami
Rubyによるクローラー開発
Rubyによるクローラー開発
しくみ製作所
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
20131012 nodejs
20131012 nodejs
Amuro Nishizawa
Vue.jp
Vue.jp
GIG inc.
Touchdiamond S21HT Review
Touchdiamond S21HT Review
masaki ishitani
K初めてのstylus
K初めてのstylus
Kazuki Nakatani
Node js 入門
Node js 入門
Satoshi Takami
Nodeについて
Nodeについて
Natsuki Yamanaka
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
京大 マイコンクラブ
Tendances
(20)
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
Effective flutter
Effective flutter
Android mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそう
Useful Rundeck
Useful Rundeck
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
GroovyでJSON2014
GroovyでJSON2014
Rubyによるクローラー開発
Rubyによるクローラー開発
TypeScriptへの入口
TypeScriptへの入口
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
20131012 nodejs
20131012 nodejs
Vue.jp
Vue.jp
Touchdiamond S21HT Review
Touchdiamond S21HT Review
K初めてのstylus
K初めてのstylus
Node js 入門
Node js 入門
Nodeについて
Nodeについて
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
En vedette
Javascriptの歴史
Javascriptの歴史
ヨウコ スズキ
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
En vedette
(7)
Javascriptの歴史
Javascriptの歴史
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
Angularおじさんの1年
Angularおじさんの1年
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
angular1脳で見るangular2
angular1脳で見るangular2
人と向き合うプロトタイピング
人と向き合うプロトタイピング
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Plus de Syoko Matsumura
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
Syoko Matsumura
女性エンジニアコミュニティの作り方 #fuller_lt
女性エンジニアコミュニティの作り方 #fuller_lt
Syoko Matsumura
社会に出る前に知っておきたかったnのこと
社会に出る前に知っておきたかったnのこと
Syoko Matsumura
女子力高まるJs
女子力高まるJs
Syoko Matsumura
1日を36時間にするたったひとつの方法
1日を36時間にするたったひとつの方法
Syoko Matsumura
Builderによるcompositeの隠蔽
Builderによるcompositeの隠蔽
Syoko Matsumura
JSつまみぐい
JSつまみぐい
Syoko Matsumura
エンプラYouは何してる?
エンプラYouは何してる?
Syoko Matsumura
エンプラYouは何してる?
エンプラYouは何してる?
Syoko Matsumura
Plus de Syoko Matsumura
(9)
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
女性エンジニアコミュニティの作り方 #fuller_lt
女性エンジニアコミュニティの作り方 #fuller_lt
社会に出る前に知っておきたかったnのこと
社会に出る前に知っておきたかったnのこと
女子力高まるJs
女子力高まるJs
1日を36時間にするたったひとつの方法
1日を36時間にするたったひとつの方法
Builderによるcompositeの隠蔽
Builderによるcompositeの隠蔽
JSつまみぐい
JSつまみぐい
エンプラYouは何してる?
エンプラYouは何してる?
エンプラYouは何してる?
エンプラYouは何してる?
Let’s angular js!!
1.
Let’s AngularJS!! 初心者の初心者による初心者のためのAngularJS入門
2.
はじめに ▪ このスライドの内容は,先日開催されたGTUG Girls
Meetup ” 1から始めるAngularハンズオン”に則っています。 ▪ ソース・参考資料等は以下のリンク先を適宜参考にしてください ▪ http://bit.ly/1F0CTr8 初めまして、Yeoman(ヨーマン)です。 口頭での説明、小話はここで話しますね。
3.
目次 1.AngularJS概要 2.Hello, AngularJS World!! 3.基本の構文を書いてみよう (フィルタビルトインディレクティブ)
4.
AngularJS 概要 名前は知ってるけど、いったい何者なのか。
5.
AngularJSが生まれた背景 ▪ Java Scriptとは,DOMを操作することを原点としている言語である。 Java
Script jQuery BACKBONE.JS AngularJS もっとDOMを 操作しやすく! もっともっと DOMを操作しやすく! jQueryは煩雑だ、 整理しよう。 反対にReact.jsは、 より細やかなDOM操作を目的として生まれた言語。
6.
AngularJSとは ▪ Java Scriptフレームワークの一つ。 Controller *Factory View Directives Routes Config Module $scope 今日やるのは左下のDirective部分。
7.
AngularJSとは ▪ キーワード ▪ カスタムタグ ▪
双方向バインディング ▪ DI ▪ ルーティング ▪ Virtual DOM 管理画面など1ページで完結するApplicationに最適。 何度も描画が必要なゲームには不向き。
8.
Hello, AngularJS World!!
9.
環境構築 ▪ 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は卒業。
10.
Hello, AngularJS World!! ▪
body内に記述する。 出力結果 Hello (AngularJS World!!!) <body> Hello </body> Hello
11.
AngularJSが動いているか確認 ▪ {{}}内の演算結果が表示されればOK 出力結果 これで正しく出力されていればOK! <body> Hello
{{1+1}} </body> Hello 2
12.
基本の構文を書いてみよう
13.
AngularJSの基本 1. バインディング ▪ 入力内容を即時出力する 2.
条件分岐 3. くり返し 4. フィルタリング 5. Validationチェック 全部書くの大変…説明は下記URL参照してください http://bit.ly/1AeJG3S
14.
バインディング(1) おや、出力時に{{}}がチラッと見える…
15.
バインディング(2) <span ng-bind></span>でバインディングすれば {{}}チラ見え問題解決!
16.
条件分岐 条件分岐の構文にはng-showとng-ifの二種類あります。 基本部分は大きな差はないのでng-showを使います。 1が入力されたときのみ、 メッセージを出力する
17.
くり返し リストdemoDataの値を 順番に出力する <ul><li></li></ul>で囲みましょ う
18.
フィルタリング テキストボックスに入力された値で、 demoDataをフィルタリングする <li>にfilterオプションをつける
19.
Validationチェック デフォルトで枠の赤に陰影ついているの 地味に感動した <head>内で違反した場合の振る舞いを定義 inputにrequiredオプションをつけて 必須項目と定義する
Télécharger maintenant