AngularJSでwebアプリを作ってみた！(2014/6/8 GDGKobe)
12 likes3,159 views
GDG神戸開催のAngularJS勉強会での資料です。個人的な感想を交えてAngularJSの紹介をしました。
![ルーティングの機能も持っている
• module.config([ ‘$routeProvider’,
function($routeProvider) {
…
ここでURLとController、Viewを対応付ける
…
} ])
• $location
window.locationをラップしているサービス
• $route
URLによりビューを切り替えるサービス](https://image.slidesharecdn.com/angularjsweb-140609163341-phpapp02/85/AngularJS-web-2014-6-8-GDGKobe-9-320.jpg)
![ 独自に定義できる要素や属性
挙動を設定することができる
• 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>](https://image.slidesharecdn.com/angularjsweb-140609163341-phpapp02/85/AngularJS-web-2014-6-8-GDGKobe-11-320.jpg)
AngularJSでwebアプリを作ってみた！(2014/6/8 GDGKobe)
- 2. ただ さとし Twitter : @pinmarch_t Facebookアプリ開発の本 書いたりしてました(数年前) Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.) 日常(業務)ではjQuery使ってます
- 6. 話すこと • AngularJSの特色 • AngularJSとjQueryと比べてみて 話さないこと • 外部サーバとの通信 • テストについて • デバッグについて
- 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