angularjsでwebアプリを作ってみた！(2014/6/8 gdgkobe)

2014.6.8

GDGKobe Tada Satoshi

たださとし Twitter : @pinmarch_t Facebookアプリ開発の本書いたりしてました(数年前)

Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.)

日常(業務)ではjQuery使ってます

https://angularjs.org/

はじめてのAngularJS！本買いました！

はじめてのAngularJS！本買いました！ (けど…実は1週間じゃなくて数日です)

話すこと • AngularJSの特色

• AngularJSとjQueryと比べてみて

話さないこと

• 外部サーバとの通信

• テストについて

• デバッグについて

とりあえず重要なポイント “angular.js”を読み込む “ng-app属性”で有効にする

• <html>で指定する説明が多い

“{{}}”で変数の内容を表示するつまり、メインは後から内容を書き換えること

“note”(https://note.mu/)で使用例を確認できる

Controller • Controllerがあることで挙動の管理をしやすい • $scope

View • {{}}(double-curly syntax interpolation) • テンプレート(へ)の埋め込みが楽

Model • データはJSオブジェクトに従う

データをテンプレートへ流し込む感覚は PerlのTemplate Toolkitや Railsのレイアウトテンプレート(.erb)

ルーティングの機能も持っている • module.config([ ‘$routeProvider’,

function($routeProvider) { … ここでURLとController、Viewを対応付ける … } ])

• $location window.locationをラップしているサービス

• $route URLによりビューを切り替えるサービス

AngularJSが提供または独自に作成できるシングルトンオブジェクト

アプリケーションの機能の遂行に必要な処理を提供する

AngularJSの提供するサービスは”$”から始まる

独自のサービス

• Module#provider(name, object or function) • Module#factory(name, function) • Module#service(name, constructor) データの取得処理などを実装

独自に定義できる要素や属性挙動を設定することができる

• 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>

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) } } }; });

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)のラッパーの作成について紹介されている

AngularJSはMVCフレームワーク

“ng-app”ディレクティブ、コントローラ

ルーティング機能を保有サーバサイド(Railsなど)で行っていたようなレイアウトテンプレートの処理をJavaScriptで簡便に行うことができ、 1つのHTML中に複数のコントローラを設定しそれぞれの処理を区分けして記述することが可能リファレンス : https://docs.angularjs.org/guide

angularjsでwebアプリを作ってみた！(2014/6/8 gdgkobe)

Software