Submit Search
Upload
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
•
12 likes
•
3,149 views
pinmarch_t Tada
Follow
GDG神戸開催のAngularJS勉強会での資料です。個人的な感想を交えてAngularJSの紹介をしました。
Read less
Read more
Software
Report
Share
Report
Share
1 of 14
Download now
Download to read offline
Recommended
自分で自分を追い込む 1週間で何とかする
自分で自分を追い込む 1週間で何とかする
anysense_ss
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Satoshi Nagayasu
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法
Ian Lewis
Djangoのススメ
Djangoのススメ
Alisue Lambda
Git hubで雑誌記事を執筆するのは間違っているだろうか
Git hubで雑誌記事を執筆するのは間違っているだろうか
Kakigi Katuyuki
Gws 20141024 gradle_intro
Gws 20141024 gradle_intro
Nobuhiro Sue
Wantedly - 世界一"いいね!"される 求人サイトの作り方
Wantedly - 世界一"いいね!"される 求人サイトの作り方
Yoshinori Kawasaki
Recommended
自分で自分を追い込む 1週間で何とかする
自分で自分を追い込む 1週間で何とかする
anysense_ss
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Satoshi Nagayasu
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法
Ian Lewis
Djangoのススメ
Djangoのススメ
Alisue Lambda
Git hubで雑誌記事を執筆するのは間違っているだろうか
Git hubで雑誌記事を執筆するのは間違っているだろうか
Kakigi Katuyuki
Gws 20141024 gradle_intro
Gws 20141024 gradle_intro
Nobuhiro Sue
Wantedly - 世界一"いいね!"される 求人サイトの作り方
Wantedly - 世界一"いいね!"される 求人サイトの作り方
Yoshinori Kawasaki
Yapc2012資料
Yapc2012資料
matsuo kenji
Django learning Part2
Django learning Part2
Yusuke Muraoka
Gradle handson
Gradle handson
Nemoto Yusuke
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
Yukiya Nakagawa
OSS Product feat. Gradle
OSS Product feat. Gradle
Yasuharu Nakano
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
Shingo Sasaki
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
Gradleどうでしょう
Gradleどうでしょう
Takuma Watabiki
映画にでてくるハッカーになりたい - YAPC Asia 2010
映画にでてくるハッカーになりたい - YAPC Asia 2010
Hiroh Satoh
React + FLUX + Redux + Redux Saga のお話
React + FLUX + Redux + Redux Saga のお話
Shinichiro Yoshida
Meteorというフレームワーク
Meteorというフレームワーク
rukiadia
Djangoフレームワークの紹介 OSC2015北海道
Djangoフレームワークの紹介 OSC2015北海道
Shinya Okano
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
Tohru Kobayashi
WantedlyがまだSendGridを使いこなしてない話
WantedlyがまだSendGridを使いこなしてない話
Yoshinori Kawasaki
KotlinつかってQiitaクライアント作った時の話
KotlinつかってQiitaクライアント作った時の話
shinnosuke kugimiya
会社に Github導入した話
会社に Github導入した話
Yutaka Kinjyo
Djangoフレームワークの紹介
Djangoフレームワークの紹介
Shinya Okano
Google Apps Scirpt勉強会 #1
Google Apps Scirpt勉強会 #1
ikikko
delayed_jobの自動再起動
delayed_jobの自動再起動
firewood
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
Cannon.jsで3D物理演算
Cannon.jsで3D物理演算
naoto kondou
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
More Related Content
What's hot
Yapc2012資料
Yapc2012資料
matsuo kenji
Django learning Part2
Django learning Part2
Yusuke Muraoka
Gradle handson
Gradle handson
Nemoto Yusuke
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
Yukiya Nakagawa
OSS Product feat. Gradle
OSS Product feat. Gradle
Yasuharu Nakano
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
Shingo Sasaki
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
Gradleどうでしょう
Gradleどうでしょう
Takuma Watabiki
映画にでてくるハッカーになりたい - YAPC Asia 2010
映画にでてくるハッカーになりたい - YAPC Asia 2010
Hiroh Satoh
React + FLUX + Redux + Redux Saga のお話
React + FLUX + Redux + Redux Saga のお話
Shinichiro Yoshida
Meteorというフレームワーク
Meteorというフレームワーク
rukiadia
Djangoフレームワークの紹介 OSC2015北海道
Djangoフレームワークの紹介 OSC2015北海道
Shinya Okano
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
Tohru Kobayashi
WantedlyがまだSendGridを使いこなしてない話
WantedlyがまだSendGridを使いこなしてない話
Yoshinori Kawasaki
KotlinつかってQiitaクライアント作った時の話
KotlinつかってQiitaクライアント作った時の話
shinnosuke kugimiya
会社に Github導入した話
会社に Github導入した話
Yutaka Kinjyo
Djangoフレームワークの紹介
Djangoフレームワークの紹介
Shinya Okano
Google Apps Scirpt勉強会 #1
Google Apps Scirpt勉強会 #1
ikikko
delayed_jobの自動再起動
delayed_jobの自動再起動
firewood
What's hot
(19)
Yapc2012資料
Yapc2012資料
Django learning Part2
Django learning Part2
Gradle handson
Gradle handson
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
OSS Product feat. Gradle
OSS Product feat. Gradle
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
Gradleどうでしょう
Gradleどうでしょう
映画にでてくるハッカーになりたい - YAPC Asia 2010
映画にでてくるハッカーになりたい - YAPC Asia 2010
React + FLUX + Redux + Redux Saga のお話
React + FLUX + Redux + Redux Saga のお話
Meteorというフレームワーク
Meteorというフレームワーク
Djangoフレームワークの紹介 OSC2015北海道
Djangoフレームワークの紹介 OSC2015北海道
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
WantedlyがまだSendGridを使いこなしてない話
WantedlyがまだSendGridを使いこなしてない話
KotlinつかってQiitaクライアント作った時の話
KotlinつかってQiitaクライアント作った時の話
会社に Github導入した話
会社に Github導入した話
Djangoフレームワークの紹介
Djangoフレームワークの紹介
Google Apps Scirpt勉強会 #1
Google Apps Scirpt勉強会 #1
delayed_jobの自動再起動
delayed_jobの自動再起動
Viewers also liked
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
Cannon.jsで3D物理演算
Cannon.jsで3D物理演算
naoto kondou
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
Google Prediction APIを使う前に知っておきたい統計のはなし
Google Prediction APIを使う前に知っておきたい統計のはなし
pinmarch_t Tada
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
Viewers also liked
(7)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
Cannon.jsで3D物理演算
Cannon.jsで3D物理演算
ngJapan報告会
ngJapan報告会
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Google Prediction APIを使う前に知っておきたい統計のはなし
Google Prediction APIを使う前に知っておきたい統計のはなし
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Similar to AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
Yu Nobuoka
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Kazuhiro Hara
Alt01-LT
Alt01-LT
Yuta Hiroto
Ng mtg#3
Ng mtg#3
Kenichi Kanai
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
Masahiro Wakame
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
JaSST'16 Tokyo モバイルセッション
JaSST'16 Tokyo モバイルセッション
mirer
Our Track to Modern Angular
Our Track to Modern Angular
Yuta Shimizu
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
AngularJS 概説
AngularJS 概説
Kenichi Kanai
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
Java web application testing
Java web application testing
Tokuhiro Matsuno
AngularJS で ハイスピードSI
AngularJS で ハイスピードSI
Koichiro Nishijima
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEG
Jun Okazaki
AngularJSについて
AngularJSについて
昌生 高橋
AngularJSを触ってみた
AngularJSを触ってみた
tomowata
Getting start with knockout.js
Getting start with knockout.js
Akio Ishida
Similar to AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
(20)
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Alt01-LT
Alt01-LT
Ng mtg#3
Ng mtg#3
Angular#Kanazawa
Angular#Kanazawa
React+fluxを導入した話
React+fluxを導入した話
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
JaSST'16 Tokyo モバイルセッション
JaSST'16 Tokyo モバイルセッション
Our Track to Modern Angular
Our Track to Modern Angular
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
AngularJS 概説
AngularJS 概説
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
Java web application testing
Java web application testing
AngularJS で ハイスピードSI
AngularJS で ハイスピードSI
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEG
AngularJSについて
AngularJSについて
AngularJSを触ってみた
AngularJSを触ってみた
Getting start with knockout.js
Getting start with knockout.js
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
1.
2014.6.8 GDGKobe Tada Satoshi
2.
ただ さとし Twitter :
@pinmarch_t Facebookアプリ開発の本 書いたりしてました(数年前) Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.) 日常(業務)ではjQuery使ってます
3.
https://angularjs.org/
4.
はじめてのAngularJS! 本買いました!
5.
はじめてのAngularJS! 本買いました! (けど…実は1週間じゃなくて数日です)
6.
話すこと • AngularJSの特色 • AngularJSとjQueryと比べてみて 話さないこと •
外部サーバとの通信 • テストについて • デバッグについて
7.
とりあえず重要なポイント “angular.js”を読み込む “ng-app属性”で有効にする • <html>で指定する説明が多い “{{}}”で変数の内容を表示する つまり、メインは後から内容を書き換えること “note”(https://note.mu/)で使用例を 確認できる
8.
Controller • Controllerがあることで挙動の管理をしやすい •
$scope View • {{}}(double-curly syntax interpolation) • テンプレート(へ)の埋め込みが楽 Model • データはJSオブジェクトに従う データをテンプレートへ流し込む感覚は PerlのTemplate Toolkitや Railsのレイアウトテンプレート(.erb)
9.
ルーティングの機能も持っている • module.config([ ‘$routeProvider’, function($routeProvider)
{ … ここでURLとController、Viewを対応付ける … } ]) • $location window.locationをラップしているサービス • $route URLによりビューを切り替えるサービス
10.
AngularJSが提供または独自に作成できる シングルトンオブジェクト アプリケーションの機能の遂行に必要な処理を 提供する
AngularJSの提供するサービスは”$”から始まる 独自のサービス • Module#provider(name, object or function) • Module#factory(name, function) • Module#service(name, constructor) データの取得処理などを実装
11.
独自に定義できる要素や属性 挙動を設定することができる •
DOMの挿入や削除(スタイルの変更) module.directive(‘focus’, function() { return { link: function (scope, element, attrs) { element[0].focus(); } }; }); <button focus>フォーカスあり</button> module.directive(‘hello’, function() { return { restrict: ‘E’, template: ‘<div>こんにちは</div>’, replace: true }; }); <hello></hello>
12.
module.directive(name, function factory(injectables)
{ return { restrict: string, # ディレクティブの限定先(要素、属性 etc.) priority: numeric, template: string, templateUrl: string, replace: bool, transclude: bool, scope: bool or object, controller: function ($scope, $element, $attrs, $transclude), require: string, # 依存しているディレクティブ link: function (scope, iElement, iAttrs), compile: function (tElement, tAttrs, transclude) { return { pre: function (scope, iElement, iAttrs, controller), post: function (scope, iEement, iAttrs, controller) } } }; });
13.
AngularJSにはjqLiteというjQueryのサブセット が組み込まれている jQueryを使用することも可能 Angular
1.2 only operates with jQuery 1.7.1 or above. However, Angular does not currently support jQuery 2.x or above. ~from FAQ~ 『AngularJSアプリケーション開発ガイド』に はdatepicker(jQuery-ui)のラッパーの作成につ いて紹介されている
14.
AngularJSはMVCフレームワーク “ng-app”ディレクティブ、コントローラ
ルーティング機能を保有 サーバサイド(Railsなど)で行っていたようなレイア ウトテンプレートの処理をJavaScriptで簡便に行う ことができ、 1つのHTML中に複数のコントローラを設定しそれぞ れの処理を区分けして記述することが可能 リファレンス : https://docs.angularjs.org/guide
Download now