Submit Search
Upload
Angular.jsについてちょっとしゃべる
•
7 likes
•
7,729 views
Masashi Haga
Follow
第19回のプロ生にてしゃべらせていただいたときの資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 15
Download now
Download to read offline
Recommended
AngularJS入門
AngularJS入門
Kenji Shirane
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
React+TypeScriptもいいぞ
React+TypeScriptもいいぞ
Mitsuru Ogawa
Recommended
AngularJS入門
AngularJS入門
Kenji Shirane
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
React+TypeScriptもいいぞ
React+TypeScriptもいいぞ
Mitsuru Ogawa
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
Vue入門
Vue入門
Takeo Noda
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
JavaFX 2.0 - リッチクライアントのためのUI基盤
JavaFX 2.0 - リッチクライアントのためのUI基盤
Yuichi Sakuraba
AngularJSについて
AngularJSについて
昌生 高橋
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
Viewを活用して複雑化と戦う
Viewを活用して複雑化と戦う
Kenjiro Kubota
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Yuichi Sakuraba
Scene BuilderでFXML
Scene BuilderでFXML
Yuichi Sakuraba
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
Kentaro Inomata
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
3分でわかるangular js
3分でわかるangular js
Shin Adachi
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
CodeIgniter入門
CodeIgniter入門
Sho A
PHPフレームワーク入門
PHPフレームワーク入門
Sho A
More Related Content
What's hot
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
Vue入門
Vue入門
Takeo Noda
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
JavaFX 2.0 - リッチクライアントのためのUI基盤
JavaFX 2.0 - リッチクライアントのためのUI基盤
Yuichi Sakuraba
AngularJSについて
AngularJSについて
昌生 高橋
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
Viewを活用して複雑化と戦う
Viewを活用して複雑化と戦う
Kenjiro Kubota
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Yuichi Sakuraba
Scene BuilderでFXML
Scene BuilderでFXML
Yuichi Sakuraba
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
Kentaro Inomata
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
3分でわかるangular js
3分でわかるangular js
Shin Adachi
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
What's hot
(20)
今からでも遅くない! React事始め
今からでも遅くない! React事始め
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Vue入門
Vue入門
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
20160927 reactmeetup
20160927 reactmeetup
JavaFX 2.0 - リッチクライアントのためのUI基盤
JavaFX 2.0 - リッチクライアントのためのUI基盤
AngularJSについて
AngularJSについて
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Viewを活用して複雑化と戦う
Viewを活用して複雑化と戦う
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Scene BuilderでFXML
Scene BuilderでFXML
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVC 1.0
ASP.NET MVC 1.0
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
3分でわかるangular js
3分でわかるangular js
はじめよう Backbone.js
はじめよう Backbone.js
Similar to Angular.jsについてちょっとしゃべる
CodeIgniter入門
CodeIgniter入門
Sho A
PHPフレームワーク入門
PHPフレームワーク入門
Sho A
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
Dsl&Builder
Dsl&Builder
Uehara Junji
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Tsuyoshi Yamamoto
Groovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみよう
Akira Shimosako
Jqm20120210
Jqm20120210
cmtomoda
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
Apache Torqueについて
Apache Torqueについて
tako pons
Elasticsearchプラグインの作り方
Elasticsearchプラグインの作り方
Shinsuke Sugaya
G * magazine 1
G * magazine 1
Tsuyoshi Yamamoto
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Minori Tokuda
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
Akio Katayama
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
Akio Katayama
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
TanUkkii
GNU awk (gawk) を用いた Apache ログ解析方法
GNU awk (gawk) を用いた Apache ログ解析方法
博文 斉藤
ライブラリにあらず! 〜Google Closure Toolsの事始め〜
ライブラリにあらず! 〜Google Closure Toolsの事始め〜
Kazuya Hiruma
Similar to Angular.jsについてちょっとしゃべる
(20)
CodeIgniter入門
CodeIgniter入門
PHPフレームワーク入門
PHPフレームワーク入門
Angular js はまりどころ
Angular js はまりどころ
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Dsl&Builder
Dsl&Builder
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Groovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみよう
Jqm20120210
Jqm20120210
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Apache Torqueについて
Apache Torqueについて
Elasticsearchプラグインの作り方
Elasticsearchプラグインの作り方
G * magazine 1
G * magazine 1
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
20110714 j queryベーシック
20110714 j queryベーシック
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
GNU awk (gawk) を用いた Apache ログ解析方法
GNU awk (gawk) を用いた Apache ログ解析方法
ライブラリにあらず! 〜Google Closure Toolsの事始め〜
ライブラリにあらず! 〜Google Closure Toolsの事始め〜
Angular.jsについてちょっとしゃべる
1.
javascriptのフレームワークについて(仮)
FAGA (@Hivesbee)
2.
Angular.jsについてちょっとしゃべる
FAGA (@Hivesbee)
3.
自己紹介 • 名前:FAGA • TwitterID:@Hivesbee
※有益な情報はつぶやいていないです • Web : http://nethive.info ※VPSのお金を払い忘れたため停止中 • 某企業で働いている(たぶん)社畜社会人 • ちょっとプログラムがすきな一般人 2012/12/22 プログラミング生放送勉強会 第19回@品川 3
4.
Angular.js概要 • Javascriptのフレームワークの一つ • Googleが作成 •
MVCパターンを採用 • 最初「アンギャー」と読んでしまいそうになった 今日は超簡単なサンプルコードを見せつつ、 Angular.jsの機能についてしゃべっていきます 2012/12/22 プログラミング生放送勉強会 第19回@品川 4
5.
データバインド 例:入力した名前を逐次表示
<!DOCTYPE html> Angular.jsアプリの宣言 <html ng-app> Angular.jsの読み込み <head> <script src="angular.min.js"></script> </head> ng-modelの宣言 <body> <div> <input type="text" ng-model="name"><br> こんにちは! {{ name }}! </div> </body> ng-modelとのバインド </html> 2012/12/22 プログラミング生放送勉強会 第19回@品川 5
6.
データバインド • {{ }}
の中には単純な演算しか入らない (文字列の結合とか) • ng-modelの値に応じて処理を変更したいときは? →ng-controllerを定義し、その中で処理を書く 2012/12/22 プログラミング生放送勉強会 第19回@品川 6
7.
ng-controller 例:入力した名前に応じて応答が変わる
<!DOCTYPE html> <html ng-app> ・・・ Controller定義 <script> function testCtrl($scope) { $scope.isFAGA = function() { return $scope.name == “FAGA” ? "クズ“ : $scope.name; } } isFAGA定義 </script> <body> Controller使用を宣言 <div ng-controller=“testCtrl"> <input type="text" ng-model="name"><br> こんにちは! {{ isFAGA() }}! </div> </body> isFAGAをバインド </html> 2012/12/22 プログラミング生放送勉強会 第19回@品川 7
8.
ng-controller 何が起きているかというと <!DOCTYPE html> <html ng-app>
Root Scope ・・・ <script> 暗黙の function testCtrl($scope) { 宣言 $scope.isFAGA = function() { ・・・ 継承 } } 元ネタ </script> <body> testCtrl Scope <div ng-controller=“testCtrl"> isFAGA : function <input type="text“ ng-model="name"><br> 暗黙の name : String こんにちは! {{ isFAGA() }}! </div> 宣言 </body> </html> Template Model 2012/12/22 プログラミング生放送勉強会 第19回@品川 8
9.
scope • そのControllerが制御できる範囲
範囲はTemplateのDOM構造と一致 – ng-controller=“testCtrl” を 宣言したdiv内を制御 – スコープ内に変数・関数を宣言し、 Templateに反映可能 (ajax通信でもらったデータをtemplateに反映、など) 2012/12/22 プログラミング生放送勉強会 第19回@品川 9
10.
リスト • 本・メール・etc… を一覧で表示・検索したい
→ng-repeat・filterで実現 Controller function fooCtrl($scope) { $scope.array = [“A”, “B”, “C”]; JSON形式で記載 } Template <input type=“text” ng-model=“query”> <ul ng-repeat=“item in array | filter : query”> <li> {{ item }} </li> </ul> foreach 風にng-repeatを記載 検索フィルタの設定 2012/12/22 プログラミング生放送勉強会 第19回@品川 10
11.
リスト 何が起きているかというと Controller function fooCtrl($scope) {
fooCtrl Scope $scope.array = [“A”,“B”,“C”]; array : array } 元ネタ query : String 継承 Repeater Scope Template Repeater Scope item : String Repeater Scope <input type=“text” ng-model=“query”> item : String <ul ng-repeat=“item in array | filter : query”> item : String <li> {{ item }} </li> </ul> Model 2012/12/22 プログラミング生放送勉強会 第19回@品川 11
12.
ルーティング • 画面の切り替え Template <!DOCTYPE html> <html
ng-app="demo"> ng-appに名前が付いた <head> <script src="js/angular.min.js"></script> <script src=“js/app.js”></script> </head> ルーティング用javascript <script> function ACtrl($scope) {} function BCtrl($scope) {} </script> <body> <a href="#/A">Aへ</a><br> <a href="#/B">Bへ</a><br> ng-viewの属性追加 <div ng-view></div> ※この中で画面が切り替わる </body> </html> 2012/12/22 プログラミング生放送勉強会 第19回@品川 12
13.
ルーティング • 画面の切り替え
ng-app名を指定 app.js angular.module("demo", []). config(["$routeProvider", function($routeProvider) { $routeProvider. when(“/A", {templateUrl : "A.html", controller : ACtrl}). when(“/B", {templateUrl : "B.html", controller : BCtrl}). otherwise({redirectTo : "/A"}); }]); whenで正常時の画面遷移、 otherwiseでwhere以外の画面遷移 A.htmlとB.htmlは作成済みとします 2012/12/22 プログラミング生放送勉強会 第19回@品川 13
14.
ほかにも • 独自のタグ生成
→ 部品として取り扱うことが可能 • e2e-testing → 楽にAngular.jsのシナリオテストができる 2012/12/22 プログラミング生放送勉強会 第19回@品川 14
15.
まとめ • コード量が少なくても強力なアプリ開発可能 • TemplateとControllがDOM構造で
一致しているため直感的に理解しやすい • ルーティングが分かりやすすぎて感動 • htmlに独自属性が乱立するため抵抗があるかも • 日本語リファレンスはよ 2012/12/22 プログラミング生放送勉強会 第19回@品川 15
Download now