![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';
}]);](https://image.slidesharecdn.com/angularjs-140129211832-phpapp01/85/AngularJS-13-320.jpg)
![Sample2:繰り返し
var iterApp = angular.module('iterApp', []);
iterApp.controller('IterCtrl', ['$scope', function($scope){
$scope.elements =[‘い’, ‘ろ’, ‘は’];
}]);](https://image.slidesharecdn.com/angularjs-140129211832-phpapp01/85/AngularJS-17-320.jpg)
AngularJSについて
- 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操作をほとんど意 識しない開発
- 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>
- 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