12,504
回編集
差分
ナビゲーションに移動
検索に移動
編集の要約なし
==[[AngularJS]]==
[[JavaScript]] | [[AngularJS x Django]] | [[Bower]] |
*以下の本を試す
===動作確認===
*html タグにng-appディレクティブを追加
*実行すると、「Hello [[AngularJS]]!」と表示される
<html ng-app>
<head>
</head>
<body>
{{'Hello [[AngularJS]]!'}}
</body>
</html>
<head>
<meta charset="UTF-8">
<title>[[AngularJS ]] Test</title>
<script type="text/javascript" src="/static/js/angular.min.js"></script>
</head>
<body>
<h1>Literal</h1>
{{ 'Hello' + ' [[AngularJS]]!' }}
<h1>Expression</h1>
{{ 2 * 10 }}
<head>
<meta charset="UTF-8">
<title>[[AngularJS ]] Test</title>
<script type="text/javascript" src="/static/js/angular.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
*angular.module().value() で関数を共有できるように指定
*共有サービスを利用するコントローラーを定義
*MyServiceとMyControllerは、異なる関数スコープの中に定義されているため、本来は呼び出せないMySer[[vi]]ceとMyControllerは、異なる関数スコープの中に定義されているため、本来は呼び出せない
*MyControllerの引数にサービス名を記述すると、引数名からどのインスタンスを渡すべきか自動的に判断
[[File:0171_angular_basic03.jpg]]
appModule = angular.module("app", []);
(function(){
var MyService MySer[[vi]]ce = function(a, b) {
return a + b;
};
appModule.value("addServiceaddSer[[vi]]ce", MyServiceMySer[[vi]]ce);
})();
(function() {
var MyController = function ($scope, addServiceaddSer[[vi]]ce) {
$scope.message = "Hello, World!";
$scope.action = function() {
};
$scope.addvalue = 0;
$scope.add = addServiceaddSer[[vi]]ce;
$scope.doAdd = function(x, y){
$scope.addvalue = $scope.add(x, y);
})();
==ビルトインディレクティブ==
*[[AngularJS ]] API リファレンス
**https://docs.angularjs.org/api
===DOM操作[[DOM]]操作===
{|class="wikitable"
!ディレクティブ
|-
|ng-bind-html
|モデルをHTMLにバインド。ngSanitizeモジュールが読み込まれている必要があるモデルを[[HTML]]にバインド。ngSanitizeモジュールが読み込まれている必要がある
|-
|ng-bind-template
|-
|ng-cloak
|[[AngularJS ]] の初期処理がかんりょうするまで、テンプレートの表示が点滅するように表示されるのを防ぐ
|-
|ng-style
|-
|ng-class
|CSSを動的に操作する[[CSS]]を動的に操作する
|-
|ng-class-even
|-
|ng-show
|値の評価がtrueであれば、内包するDOMを表示値の評価がtrueであれば、内包する[[DOM]]を表示
|-
|ng-hide
|値の評価がtrueであれば、内包するDOMを非表示値の評価がtrueであれば、内包する[[DOM]]を非表示
|-
|ng-open
|定義した要素をクリックすると、内包するDOMの表示・非表示を切り替え定義した要素をクリックすると、内包する[[DOM]]の表示・非表示を切り替え
|-
|ng-pluraize
|-
|ng-if
|値がfalseの場合、定義したDOMをDOMツリーから削除値がfalseの場合、定義した[[DOM]]を[[DOM]]ツリーから削除
|-
|ng-switch
|-
|ng-copy
|コピーイベントをリスナーに登録、WindowsではCtrlコピーイベントをリスナーに登録、[[Windows]]ではCtrl+Cを補足する
|-
|ng-cut
|カットイベントをリスナーに登録、WindowsではCtrlカットイベントをリスナーに登録、[[Windows]]ではCtrl+Xを補足する
|-
|ng-paste
|ペーストイベントをリスナーに登録、WindowsでCtrlペーストイベントをリスナーに登録、[[Windows]]でCtrl+Vを補足する
|-
|ng-submit
==モジュールとDI==
*AngularJSには、関数やオブジェクトをグループ化して管理するモジュールという仕組みが用意されている[[AngularJS]]には、関数やオブジェクトをグループ化して管理するモジュールという仕組みが用意されている
*ディレクティブ、サービスやフィルター、コントローラーなどすべてモジュール機能によって管理されている
*サードパーティ製ライブラリもモジュールで管理されている
|登録した関数の戻り値として渡す
|-
|Module#serviceser[[vi]]ce
|○
|×
|登録したコンストラクタ関数がnewされる
|-
|Module#providerpro[[vi]]der
|○
|○
|}
====判定====
if (directiveやproviderのコンフィギュレーションで利用するパラメータを定義したいdirectiveやpro[[vi]]derのコンフィギュレーションで利用するパラメータを定義したい) {
Module#constant
} else if (他のサービスを利用する必要がない) {
Module#value
} else if (Mudule#configで設定を変更したい) {
Module#prividerpri[[vi]]der
} else if (プリミティブ型を扱いたい、newでインスタンスを生成したくない){
Module#factory
} else {
Module#serviceser[[vi]]ce
}
angular.Module#factory(name,getFn);
*第2引数として、サービスとして共有したいオブジェクトを返す関数を記述する。
*サービスを定義するには一般的に、Module#factory か Module#service ser[[vi]]ce が利用される。
*Module#value、Module#constantで登録したサービスは、DIを使用して他のサービスをインジェクトできない。
return $resource(apiUrl).query({apiKey: apiKey});
}]);
====Module#serviceser[[vi]]ce==== angular.Module#serviceser[[vi]]ce(name,constructor);*Module#factoryでは共有したいオブジェクトを返す関数を登録するが、Module#serviceでは共有したいオブジェクトのコンストラクタ関数を登録する。ser[[vi]]ceでは共有したいオブジェクトのコンストラクタ関数を登録する。*サービスを定義するには一般的に、Module#factory か Module#service ser[[vi]]ce が利用される。
*Module#value、Module#constantで登録したサービスは、DIを使用して他のサービスをインジェクトできない。
<blockquote>Module#facotry、Module#service ser[[vi]]ce ともに、作成されたインスタンスをシングルトンとして共有することに違いはない。</blockquote>
=====他のサービスを利用したサービスの定義=====
}
}]);
====Module#providerpro[[vi]]der==== angular.Module#providerpro[[vi]]der(name, providerpro[[vi]]der);*Module#value、Module#service、Moduleser[[vi]]ce、Module#factoryは内部でModule#providerを使用している。pro[[vi]]derを使用している。
*サービスを登録するためには、$getメソッドを持ったオブジェクトを定義する必要がある。
<blockquote>Module#configでパラメータのセッティングが可能</blockquote>
angular.module('app')
.providerpro[[vi]]der('MyServiceMySer[[vi]]ce', function(){
this.$get = function() {
var aService aSer[[vi]]ce = {}; aServiceaSer[[vi]]ce.doService doSer[[vi]]ce = function() {
// do something
};
return aServiceaSer[[vi]]ce;
}
});
===サービス実装例===
====シングルトン====
*value、constant、service、factory、provider value、constant、ser[[vi]]ce、factory、pro[[vi]]der いずれもシングルトンとして扱われる。
*この性質を利用して、複数のコントローラー間でデータの共有も可能。
var app = angular.module('app');
app.serviceser[[vi]]ce('ShareServiceShareSer[[vi]]ce', function(){
this.values = {};
this.setValue = function(key, value) {
]);
==スコープとコントローラ==
*テンプレートファイルとJavaScriptコードを結びつけるためにスコープとコントローラを使用する。テンプレートファイルと[[JavaScript]]コードを結びつけるためにスコープとコントローラを使用する。
===利用方法===
====ng-controller ディレクティブを使用する====
===スコープ===
*テンプレートに対して公開するデータや振る舞いを定義する。
*AngularJSには、DOMとJavaScriptの間にスコープと呼ばれるオブジェクトが用意されている。AngularJSには、DOMと[[JavaScript]]の間にスコープと呼ばれるオブジェクトが用意されている。*スコープのプロパティは内容の変更が監視されており、値が変化するとDOMに反映される。スコープのプロパティは内容の変更が監視されており、値が変化すると[[DOM]]に反映される。*DOMの値が変更されると、対応するスコープの値に変更が反映される。[[DOM]]の値が変更されると、対応するスコープの値に変更が反映される。*DOMイベントが発生した場合、対応するスコープのメソッドが呼び出される。[[DOM]]イベントが発生した場合、対応するスコープのメソッドが呼び出される。*DOM操作はAngularJSが隠蔽するため、開発者はスコープオブジェクトを操作することで、メンテナンス性の高いコードで、画面の描画内容を変更できる。DOM操作は[[AngularJS]]が隠蔽するため、開発者はスコープオブジェクトを操作することで、メンテナンス性の高いコードで、画面の描画内容を変更できる。
===コントローラの役割===
*コントローラはスコープをセットアップする。
*DIによりインジェクトされたサービスを利用して$scopeオブジェクトを組み立てる。
<blockquote>サーバーサイドのMVCパターンでのコントローラとは役割が異なるため、名称に惑わされないように注意</blockquote>
<blockquote>プレゼンテーションロジックはフィルターやディレクティブに、ビジネスロジックはサービスに分離し、コントローラはあくまでもスコープのセットアップ処理に徹するのが理想的プレゼンテーション[[ロジック]]はフィルターやディレクティブに、ビジネス[[ロジック]]はサービスに分離し、コントローラはあくまでもスコープのセットアップ処理に徹するのが理想的</blockquote>
===スコープの適用範囲===
*ng-controllerディレクティブを使用してコントローラーを指定した場合、その要素より下位階層の要素でのみ、そのコントローラーでセットアップしたスコープオブジェクトを利用できる。
}]);
==ルーティング==
===HTML5 [[HTML]]5 History API===*HTMLL5で追加された [[HTML]]L5で追加された History API history#pushState関数 および popStateイベントが利用されている。*history.pushState()は、URLの表示をページ読み込みなしに変更出来る。は、U[[R]]Lの表示をページ読み込みなしに変更出来る。
=====pushState=====
history.pushState('','',url);
window.addEventListener('popstate', function(event){
});
<blockquote>AngularJSでは、ng[[AngularJS]]では、ng-route モジュールで簡単に利用出来る</blockquote>
===ng-routeの利用===
====モジュールの読み込み====
===Hashモードとhtml5モード===
*デフォルトはHashモード。http://example.jp/#/angular ようなURLが呼び出される。ようなU[[R]]Lが呼び出される。*pushStateによる操作を実行するためには、$locationProviderlocationPro[[vi]]der.html5Mode(true)を呼び出し、html5モードに変更する必要がある<blockquote>IE9以下では、pushStateが実装されていないため、自動でHashモードにフォールバックされる[[IE]]9以下では、pushStateが実装されていないため、自動でHashモードにフォールバックされる</blockquote>
===ルーティングの設定===
|template
|文字列 or 関数
|文字列もしくは関数の戻り値でテンプレートを設定。ng-viewに展開される。templateUrlが優先[[vi]]ewに展開される。templateUrlが優先
|-
|templateUrl
|reloadOnSearch
|真偽値
|$location#search、$location#hashで変更時に再読み込みされるrouteを指定。falseで、URLが変更されたら、hashで変更時に再読み込みされるrouteを指定。falseで、U[[R]]Lが変更されたら、$routeScopeの$routeUpdateイベントが呼ばれる
|-
|caseInsensitiveMatch
var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider','$locationProvider', function( $routeProvider, $locationProvider){
$routeProviderroutePro[[vi]]der
.when('/page/:name',{
templateUrl: 'partials/page.html',
})
;
$locationProviderlocationPro[[vi]]der.html5Mode(true);
}]);
app.controller('PageController',['$routeParams',function($routeParams){
<a href="page/page1">page1</a>
<a href="page/page2">page2</a>
<div ng-view[[vi]]ew></div>
</div>
:
</div>
==プロミス==
*AngularJSでは、ルーティングと呼ばれる技術を利用して、ページの部分更新やデータの取得動的な表示更新などを最小のコード量で簡単に実現できる。[[AngularJS]]では、ルーティングと呼ばれる技術を利用して、ページの部分更新やデータの取得動的な表示更新などを最小のコード量で簡単に実現できる。
*$httpなど通信処理を行う際にプロミスを知っていると便利。
*JavaScriptの特徴であるノンブロッキング処理を適切に処理するために、コールバックとプロミスがある。[[JavaScript]]の特徴であるノンブロッキング処理を適切に処理するために、コールバックとプロミスがある。
===プロミスとは===
*プロミスとは関数の結果を返すのではなく、プロミスオブジェクトを返す。
<blockquote>コールバックを利用すると、ノンブロッキング処理内でコールバックが続くことが多くなり、「コールバック地獄」とも呼ばれる状態に陥り、1つの関数が肥大化していくことが多々ある。これを解決するために用意されているのがプロミス。</blockquote>
===$q===
*プロミスは、Chorome 32、Firefox 29 の組込み関数として実装されているが、AngularJSでは、の組込み関数として実装されているが、[[AngularJS]]では、$qと呼ばれるサービスが用意されている
===プロミスの利用===
*プロミスでは、deferredと呼ばれるインスタンスと、promiseオブジェクトを一緒に利用出来る。
</html>
==jqLite==
*DOMを操作するAPIとして、jQuery互換のjqLiteが用意されているDOMを操作するAPIとして、[[jQuery]]互換のjqLiteが用意されている
*angular.element で jqLite オブジェクトを取得できる
*https://docs.angularjs.org/api/ng/function/angular.element
====jQueryの利用[[jQuery]]の利用====*jqLiteは、jQueryと比べると機能が大きく制限されているjqLiteは、[[jQuery]]と比べると機能が大きく制限されている*[[AngularJS ]] を読み込む前に jQuery を読み込むと、angular.element で取得できるオブジェクトがjQueryのものに変更される(jQuery1.x系のみ対応)
==$http==
*https://docs.angularjs.org/api/ng/serviceser[[vi]]ce/$http
$http({
method: 'POST',
url: '/login',
headers: {
'X-CSRFToken': getCookieget[[Cookie]]('csrftoken')
},
data: user,
==$resource==
*http://js.studio-kingdom.com/angularjs/ngresource_servicengresource_ser[[vi]]ce/$resource*angular-resource.js の読み込み、ngResource の読み込み、ng[[R]]esource の依存設定が必要
=====angular-resource.js=====
<script type="text/javascript" src="js/angular-resource.js"></script>
=====ngResourceng[[R]]esource=====
var app = angular.module("app", ['ngResource']);
==[[Tips]]======DjangoのCSRFトークンを送信するようにconfigで設定する[[Django]]のCSRFトークンを送信するようにconfigで設定する====*https://docs.angularjs.org/api/ng/providerpro[[vi]]der/$httpProviderhttpPro[[vi]]der
*http://django-docs-ja.readthedocs.org/en/latest/ref/contrib/csrf.html
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.xsrfHeaderName xsrf[[Header]]Name = 'X-CSRFToken'; $httpProvider.defaults.xsrfCookieName xsrf[[Cookie]]Name = 'csrftoken';
}]);
© 2006 矢木浩人
