Soumettre la recherche
Mettre en ligne
AngularJSについて
•
2 j'aime
•
3,730 vues
昌生 高橋
Suivre
ナビプラス社内勉強会発表資料です。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 24
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Angular js開発事例
Angular js開発事例
Shun Takeyama
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Muneaki Nishimura
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Recommandé
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Angular js開発事例
Angular js開発事例
Shun Takeyama
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Muneaki Nishimura
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Angular1&2
Angular1&2
Kenichi Kanai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularJS 概説
AngularJS 概説
Kenichi Kanai
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
3分でわかるangular js
3分でわかるangular js
Shin Adachi
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
React.js + Flux
React.js + Flux
dsuke Takaoka
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
AngularJS入門
AngularJS入門
Kenji Shirane
Visual studio 2013 Overview
Visual studio 2013 Overview
一希 大田
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Fujio Kojima
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
Hiroyuki Kusu
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Masuda Tomoaki
MVCもやもや話
MVCもやもや話
Tetsuya Kaneuchi
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
一希 大田
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
AngularJSを触ってみた
AngularJSを触ってみた
tomowata
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
Contenu connexe
Tendances
Angular1&2
Angular1&2
Kenichi Kanai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularJS 概説
AngularJS 概説
Kenichi Kanai
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
3分でわかるangular js
3分でわかるangular js
Shin Adachi
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
React.js + Flux
React.js + Flux
dsuke Takaoka
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
AngularJS入門
AngularJS入門
Kenji Shirane
Visual studio 2013 Overview
Visual studio 2013 Overview
一希 大田
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Fujio Kojima
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
Hiroyuki Kusu
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Masuda Tomoaki
MVCもやもや話
MVCもやもや話
Tetsuya Kaneuchi
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
一希 大田
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
Tendances
(20)
Angular1&2
Angular1&2
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
AngularJS 概説
AngularJS 概説
Angular#Kanazawa
Angular#Kanazawa
React を導入したフロントエンド開発
React を導入したフロントエンド開発
3分でわかるangular js
3分でわかるangular js
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
angular1脳で見るangular2
angular1脳で見るangular2
React.js + Flux
React.js + Flux
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
AngularJS入門
AngularJS入門
Visual studio 2013 Overview
Visual studio 2013 Overview
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
MVCもやもや話
MVCもやもや話
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
Similaire à AngularJSについて
AngularJSを触ってみた
AngularJSを触ってみた
tomowata
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
Hiroyuki Kusu
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Kazuhiro Yoshimoto
Ng mtg#3
Ng mtg#3
Kenichi Kanai
今度こそ始めるjQuery超入門
今度こそ始めるjQuery超入門
西畑 一馬
Alt01-LT
Alt01-LT
Yuta Hiroto
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Minori Tokuda
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
はじめてのVue.js
はじめてのVue.js
kamiyam .
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
AngularJS で ハイスピードSI
AngularJS で ハイスピードSI
Koichiro Nishijima
Angular2
Angular2
Kenichi Kanai
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
Similaire à AngularJSについて
(20)
AngularJSを触ってみた
AngularJSを触ってみた
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
俺とAngular JS 2
俺とAngular JS 2
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Ng mtg#3
Ng mtg#3
今度こそ始めるjQuery超入門
今度こそ始めるjQuery超入門
Alt01-LT
Alt01-LT
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
はじめてのVue.js
はじめてのVue.js
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
One-time Binding & $digest
One-time Binding & $digest
AngularJS で ハイスピードSI
AngularJS で ハイスピードSI
Angular2
Angular2
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
Dernier
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
sugiuralab
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
sugiuralab
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Dernier
(7)
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
AngularJSについて
1.
AngularJSについて 2014.1.23 ナビプラス株式会社 高橋昌生
2.
目次 ● ● ● ● ● AngularJSとは AngularJSの特徴 AngularJSの使いどころ jQueryとの比較 サンプルコードいくつか
3.
AngularJSとは ● Googleが開発しているJavaScriptライブラリ ○ http://www.angularjs.org ●
クライアントサイドMVCフレームワーク ● なんだか最近流行の兆し ○ http://www.google.co.jp/trends/explore#q=AngularJS%2C% 20Backbone.js%2C%20Knockout.js&cmpt=q
4.
AngularJSの特徴 ● データバインディングによるModelとViewの自 動同期 ● HTMLをテンプレートとして使う ●
JSのコードとHTMLが密結合しない ● 特に何かを継承したりしていない、ただの関数 をControllerとして使用する ● Dependency Injection
5.
AngularJSの使いどころ ● CRUDアプリ作成には強そう ○ 管理画面とか ●
jQueryでごりごり書いていくよりも、保守性は高 くなりそう ● ゲームでCanvasに描画しまくるとかそういう用 途向きではない
6.
jQueryとの比較 ● jQueryの流行以来、動的なページ作成には jQueryが定番 ● jQueryで行うのは、DOM操作の敷居を下げた 開発 ●
AngularJSで行うのは、DOM操作をほとんど意 識しない開発
7.
サンプルコード いくつか例を見ながら概要を掴んでいきます
8.
Sample1: Hello World <!DOCTYPE
html> <html ng-app=”helloApp”> <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script> <script src=”app.js”></script> </head> <body> <div ng-controller=”helloCtrl”> <input type=”text” ng-model=”name”> Hello, {{name}}! </div> </body> </html>
9.
Sample1: Hello World <!DOCTYPE
html> <html ng-app=”helloApp”> 配下の要素に AngularJSが適用される (htmlタグにつけると、全体 ) <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script> <script src=”app.js”></script> </head> <body> <div ng-controller=”helloCtrl”> <input type=”text” ng-model=”name”> Hello, {{name}}! </div> </body> </html>
10.
Sample1: Hello World <!DOCTYPE
html> <html ng-app=”helloApp”> <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script> <script src=”app.js”></script> </head> <body> <div ng-controller=”helloCtrl”> このdivタグ配下では helloCtrl controllerを使用 <input type=”text” ng-model=”name”> Hello, {{name}}! </div> </body> </html>
11.
Sample1: Hello World <!DOCTYPE
html> <html ng-app=”helloApp”> <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script> <script src=”app.js”></script> </head> <body> <div ng-controller=”helloCtrl”> <input type=”text” ng-model=”name”> Hello, {{name}}! </div> </body> </html> 双方向データバインド
12.
Sample1: Hello World <!DOCTYPE
html> <html ng-app=”helloApp”> <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script> <script src=”app.js”></script> </head> <body> <div ng-controller=”helloCtrl”> <input type=”text” ng-model=”name”> Hello, {{name}}! </div> </body> </html> データバインド
13.
Sample1: Hello World app.js //
最小限の場合、これでもいい /* var HelloCtrl = function($scope) { $scope.name = 'World'; } */ // angularからHelloCtrlに$scopeサービスを注入する // 詳しくはAngularJSのDIに関する解説を参照 var helloApp = angular.module('helloApp', []); helloApp.controller('HelloCtrl', ['$scope', function($scope){ $scope.name = 'World'; }]);
14.
jQueryでやると <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script
src="jq_app.js"></script> </head> <body> <div> <input type="text" name="test" id="test"><br> Hello, <span id="foo"></span> </div> </body> </html>
15.
jQueryでやると (function($){ $(function(){ $("#test").keyup(function(){ $("#foo").text($("#test").val()); }); }); })(jQuery);
16.
Sample2:繰り返し <!DOCTYPE html> <html ng-app=”iterApp”> <head> <script
src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script> <script src=”iter_app.js”></script> </head> <body> <div ng-controller=”IterCtrl”> <ul ng-repeat=”element in elements”> <li>{{element}}</li> </ul> </body> </html>
17.
Sample2:繰り返し var iterApp =
angular.module('iterApp', []); iterApp.controller('IterCtrl', ['$scope', function($scope){ $scope.elements =[‘い’, ‘ろ’, ‘は’]; }]);
18.
Sample3: クライアントサイドバリデーション <form method="post" name="registration"> <dl> <dt>ユーザ名</dt> <dd> <input
type="text" name="userName" ng-model="userName" required ng-maxlength=10> <span ng-show="registration.userName.$error.required">ユーザ名を入力してください</span> <span ng-show="registration.userName.$error.maxlength">ユーザ名は最大10文字です</span> <span ng-show="registration.userName.$valid">OK</span> </dd>
19.
Sample3:クライアントサイドバリデーショ ン <dt>パスワード</dt> <dd> <input type="password" name="password"
ng-model="password" required ng-minlength=7> <span ng-show="registration.password.$error.required">パスワードを入力してください</span> <span ng-show="registration.password.$error.minlength">パスワードは7文字以上で設定してください</span> <span ng-show="registration.password.$valid">OK</span> </dd> </dl> <input type="submit" value="登録" ng-disabled="registration.$invalid"> </form>
20.
Sample4: サーバサイドアプリと組み合わせ ● Play-AngularJS-Sample ○ https://github.com/tarhashi/Play-AngularJS-Sample ○
www.angularjs.orgのtodoアプリに永続化をつけた程度 のアプリ ○ サーバサイドは以下の構成 ■ APP: Play Framework2 (Scala) ■ DB: H2 ○ PlayのJSRouterを使うためにajax処理をjQueryでやっ てるので$applyが必要になってる
21.
AngularJS + サーバサイド開発の特徴 ●
サーバサイドの大部分はJSON API ○ サーバサイドは単純に入出力だけ考えてればOK ○ WEB画面とスマホアプリでAPIを使いまわしたりできる かも
22.
組み込みモジュールでは機能が足りない 場合 ● 追加モジュールを読み込んで拡張 ○ 公式モジュール
http://code.angularjs.org/1.2.9/ ○ いろいろありそうなところ http://ngmodules.org ● ディレクティブを定義して自分で拡張 ○ http://angularjsninja. com/blog/2013/11/20/angularjs-customdirectives/
23.
その他の話題 ● Dependency Injection ○
http://qiita.com/kawaz/items/363f430d21ec729f1b7d ● Testing ○ http://js.studio-kingdom. com/angularjs/guide/unit_testing ● Routing, filter ○ http://qiita. com/lga0503/items/1f473994ed5a3120aef8
24.
参考 ● Mastering Web
Application Development with AngularJS ○ http://www.packtpub.com/angularjs-web-applicationdevelopment/book ● AngularJS API Docs ○ http://docs.angularjs.org/api ● Qiita ○ http://qiita.com/tags/angularjs
Télécharger maintenant