AngularJSについて

  • 1,987 views
Uploaded on

ナビプラス社内勉強会発表資料です。

ナビプラス社内勉強会発表資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,987
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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