| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「AngularJS」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
1行目: 1行目:
 
==AngularJS==
 
==AngularJS==
−
[[JavaScript][AngularJS x Django][Bower]]
+
[[JavaScript]][[AngularJS x Django]][[Bower]]
 
*以下の本を試す
 
*以下の本を試す
 
{{amazon|4844336681}}
 
{{amazon|4844336681}}

2020年2月15日 (土) 08:17時点における版

目次

AngularJS

JavaScriptAngularJS x DjangoBower

  • 以下の本を試す

4844336681.09.MZZZZZZZ.jpg link

準備

動作確認

  • html タグにng-appディレクティブを追加
  • 実行すると、「Hello AngularJS!」と表示される
  1. <html ng-app>
  2. <head>
  3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
  4. </head>
  5. <body>
  6. テンプレート:'Hello AngularJS!'
  7. </body>
  8. </html>

基本機能

  • テンプレートエンジン
  • ディレクティブ
  • 双方向データバインディング
  1. <html ng-app>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>AngularJS Test</title>
  5. <script type="text/javascript" src="/static/js/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <h1>Literal</h1>
  9. テンプレート:'Hello' + ' AngularJS!'
  10. <h1>Expression</h1>
  11. テンプレート:2 * 10
  12. <h1>Variable</h1>
  13. <div ng-init="mynumber=123"/>
  14. テンプレート:Mynumber
  15. <h1>Directive</h1>
  16. <h1>if</h1>
  17. <div ng-init="showMessage=true"/>
  18. <div ng-if="showMessage">
  19. 	Show Message is テンプレート:ShowMessage.
  20. </div>
  21. <h2>repeat</h2>
  22. <div ng-init="items=['orange','apple','pine','melon']"/>
  23. <ul>
  24. 	<li ng-repeat="item in items">テンプレート:Item</li>
  25. </ul>
  26. <h1>Bi-directionally data binding</h1>
  27. <input type="text" ng-model="message" /> テンプレート:Message
  28. </body>
  29. </html>

0169 angular basic01.jpg

コントローラとスコープ

  • MyControllerで、$scopeオブジェクトにプロパティやメソッドを登録
  • angular.module() でモジュール "app" を作成
  • app.controller() でコントローラ myController を登録
  • <html ng-app="app">と記述しappモジュールを利用可能にする
  • テンプレートからコントローラを利用するには、ng-controller ディレクティブを使いコントローラ名を指定
  • $scope.message に指定した値が、｛｛message｝｝と記述した箇所に展開される

0170 angular basic02.jpg

test_ag_basic2.html
  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>AngularJS Test</title>
  6. <script type="text/javascript" src="/static/js/angular.min.js"></script>
  7. <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  8. <script type="text/javascript" src="/static/test/js/test_ag_basic2.js"></script>
  9. </head>
  10. <body>
  11. <h1>Controller and Scope</h1>
  12. <div ng-controller="myController">
  13.   <div>テンプレート:Message</div>
  14.   <button ng-click="action()">push</button>
  15. </div>
  16. </body>
  17. </html>
test_ag_basic2.js
  1. var MyController = function ($scope) {
  2.   $scope.message = "Hello, World!";
  3.   $scope.action = function() {
  4.     $scope.message = "Goodbye, Everyone!";
  5.   };
  6. };
  7. var appModule = angular.module("app", []);
  8. appModule.controller("myController", MyController);

DI

  • DIコンテナにより、部品間の依存関係を管理
  • angular.module().value() で関数を共有できるように指定
  • 共有サービスを利用するコントローラーを定義
  • MyServiceとMyControllerは、異なる関数スコープの中に定義されているため、本来は呼び出せない
  • MyControllerの引数にサービス名を記述すると、引数名からどのインスタンスを渡すべきか自動的に判断

0171 angular basic03.jpg

test_ag_basic2.html
  1. <body>
  2. <h1>Controller and Scope</h1>
  3. <div ng-controller="myController">
  4.   <div>テンプレート:Message</div>
  5.   <button ng-click="action()">push</button>
  6.   <div>テンプレート:Addvalue</div>
  7.   <button ng-click="doAdd(11,12)">add</button>
  8. </div>
test_ag_basic2.js
  1. appModule = angular.module("app", []);
  2. (function(){
  3.   var MyService = function(a, b) {
  4.     return a + b;
  5.   };
  6.   appModule.value("addService", MyService);
  7. })();
  8.  
  9. (function() {
  10.   var MyController = function ($scope, addService) {
  11.     $scope.message = "Hello, World!";
  12.     $scope.action = function() {
  13.       $scope.message = "Goodbye, Everyone!";
  14.     };
  15.     $scope.addvalue = 0;
  16.     $scope.add = addService;
  17.     $scope.doAdd = function(x, y){
  18.       $scope.addvalue = $scope.add(x, y);
  19.     };
  20.   };
  21.   appModule.controller("myController", MyController);
  22. })();

ビルトインディレクティブ

DOM操作

ディレクティブ 概要
ng-bind モデルをビューにバインド
ng-bind-html モデルをHTMLにバインド。ngSanitizeモジュールが読み込まれている必要がある
ng-bind-template テンプレートをビューにバインド
ng-non-bindable バインディングしたくない場合に指定
ng-cloak AngularJS の初期処理がかんりょうするまで、テンプレートの表示が点滅するように表示されるのを防ぐ
ng-style style属性を動的に操作する
ng-class CSSを動的に操作する
ng-class-even ng-repeat と組み合わせる。偶数行に対して振る舞いを指定するのに利用
ng-class-odd ng-repeat と組み合わせる。奇数行に対して振る舞いを指定するのに利用
ng-show 値の評価がtrueであれば、内包するDOMを表示
ng-hide 値の評価がtrueであれば、内包するDOMを非表示
ng-open 定義した要素をクリックすると、内包するDOMの表示・非表示を切り替え
ng-pluraize 数値によって表示を切り替える
ng-if 値がfalseの場合、定義したDOMをDOMツリーから削除
ng-switch switch文と同様の役割
ng-repeat テンプレート上でループを行う
ng-messages/ng-message メッセージを扱う。messages と message は親子関係

イベント

ディレクティブ 概要
ng-click clickイベントをリスナーに登録
ng-dblclick ダブルクリックイベントをリスナーに登録
ng-mousedown マウスダウンイベントをリスナーに登録
ng-mouseup マウスアップイベントをリスナーに登録
ng-mouseenter マウスエンターイベントをリスナーに登録
ng-mouseover マウスオーバーイベントをリスナーに登録
ng-moucemove マウスムーブイベントをリスナーに登録
ng-mouseleave マウスリーブイベントをリスナーに登録
ng-focus フォーカスイベントをリスナーに登録
ng-blur ブラーイベントをリスナーに登録
ng-keydown キーダウンイベントをリスナーに登録
ng-keypress キープレスイベントをリスナーに登録
ng-keyup キーアップイベントをリスナーに登録
ng-change チェンジイベントをリスナーに登録
ng-checked チェックイベントをリスナーに登録
ng-copy コピーイベントをリスナーに登録、WindowsではCtrl+Cを補足する
ng-cut カットイベントをリスナーに登録、WindowsではCtrl+Xを補足する
ng-paste ペーストイベントをリスナーに登録、WindowsでCtrl+Vを補足する
ng-submit action属性の有無により、デフォルト動作を実行するかどうかを判定

$event

  • $eventと呼ばれるイベントオブジェクトをラップしたオブジェクトがあります。

モジュールとDI

  • AngularJSには、関数やオブジェクトをグループ化して管理するモジュールという仕組みが用意されている
  • ディレクティブ、サービスやフィルター、コントローラーなどすべてモジュール機能によって管理されている
  • サードパーティ製ライブラリもモジュールで管理されている

モジュールの作成と取得

  • angular.moduleを利用する
  • 第2引数があると、モジュールを作成し、無いと作成済みモジュールを参照する
  1. angular.module(name, [requires], [configFn]);

ngモジュール

モジュールに部品を登録する

サービス実装の比較

メソッド サービスのDI プリミティブ型の登録 Module#configでの利用 Module#decoratorによる書き換え インスタンスの生成方法
Module#value × ○ × ○ 登録したオブジェクトそのまま
Module#constant × ○ ○ × 登録したオブジェクトそのまま
Module#factory ○ ○ × ○ 登録した関数の戻り値として渡す
Module#service ○ × × ○ 登録したコンストラクタ関数がnewされる
Module#provider ○ ○ ○ ○ $getメソッドで返す

判定

  1. if (directiveやproviderのコンフィギュレーションで利用するパラメータを定義したい) {
  2.   Module#constant
  3. } else if (他のサービスを利用する必要がない) {
  4.   Module#value
  5. } else if (Mudule#configで設定を変更したい) {
  6.   Module#privider
  7. } else if (プリミティブ型を扱いたい、newでインスタンスを生成したくない){
  8.   Module#factory
  9. } else {
  10.   Module#service
  11. }

Module#value

  1. angular.Moduule#value(name,object);
  • 第2引数には、数値、文字列、配列、オブジェクト、関数などを登録できる。

Module#constant

  1. angular.Module#constant(name,value);
  • 第2引数には、Module#value と同様に、数値、文字列、配列、関数などが登録できる。

<blockquote>Module#constantで登録したサービスは、利用できるタイミングが他よりも早くなっているため、Module#config やプロバイダのコンストラクタにインジェクトできる。</blockquote>

  • Module#decoratorで上書きできない
  • 値を書き換えることはできる

Module#factory

  1. angular.Module#factory(name,getFn);
  • 第2引数として、サービスとして共有したいオブジェクトを返す関数を記述する。
  • サービスを定義するには一般的に、Module#factory か Module#service が利用される。
  • Module#value、Module#constantで登録したサービスは、DIを使用して他のサービスをインジェクトできない。
他のサービスを利用したサービスの定義
  1. var app = angular.module('app');
  2. app.constant('apiUrl','/api/products.json');
  3. app.constant('apiKey','hogehoge');
  4.  
  5. app.factory('productsService',['$resource','apiUrl','apiKey',
  6.   function($resource, apiUrl, apiKey){
  7.     return $resource(apiUrl).query({apiKey: apiKey});
  8. }]);

Module#service

  1. angular.Module#service(name,constructor);
  • Module#factoryでは共有したいオブジェクトを返す関数を登録するが、Module#serviceでは共有したいオブジェクトのコンストラクタ関数を登録する。
  • サービスを定義するには一般的に、Module#factory か Module#service が利用される。
  • Module#value、Module#constantで登録したサービスは、DIを使用して他のサービスをインジェクトできない。

<blockquote>Module#facotry、Module#service ともに、作成されたインスタンスをシングルトンとして共有することに違いはない。</blockquote>

他のサービスを利用したサービスの定義
  1. var app = angular.module('app');
  2. app.constant('apiUrl','/api/products.json');
  3. app.constant('apiKey','hogehoge');
  4.  
  5. app.factory('productsService',['$resource','apiUrl','apiKey',
  6.   function($resource, apiUrl, apiKey){
  7.     this.get = function() {
  8.       return $resource(apiUrl).query({apiKey: apiKey});
  9.     }
  10. }]);

Module#provider

  1. angular.Module#provider(name, provider);
  • Module#value、Module#service、Module#factoryは内部でModule#providerを使用している。
  • サービスを登録するためには、$getメソッドを持ったオブジェクトを定義する必要がある。

<blockquote>Module#configでパラメータのセッティングが可能</blockquote> 

  1. angular.module('app')
  2.   .provider('MyService', function(){
  3.     this.$get = function() {
  4.       var aService = {};
  5.       aService.doService = function() {
  6.         // do something
  7.       };
  8.       return aService;
  9.     }
  10.   });

Module#controller

Module#filter

Module#directive

Module#animation

サービス実装例

シングルトン

  • value、constant、service、factory、provider いずれもシングルトンとして扱われる。
  • この性質を利用して、複数のコントローラー間でデータの共有も可能。
  1. var app = angular.module('app');
  2. app.service('ShareService', function(){
  3.   this.values = {};
  4.   this.setValue = function(key, value) {
  5.     this.values[key] = value;
  6.   };
  7.   this.getValue = function(key) {
  8.     return this.values[key];
  9.   }
  10. });

新しいインスタンスを返す

  • 新しいインスタンスを生成して返すサービス
定義
  1. var app = angular.module('app');
  2. app.factory('NewInstanceFactory', function(){
  3.   function NewInstance() {
  4.   }
  5.   NewInstance.prototype.doSomething = function() {
  6.     // do something
  7.   };
  8.   function NewInstanceFactory() {
  9.     return new NewInstance();
  10.   }
  11.   return NewInstanceFactory;
  12. });
利用側
  1. var app = angular.module('app',[]);
  2. app.controller('HogeController', ['$scope','NewInstanceFactory',
  3.   function($scope,NewInstanceFactory){
  4.     var ni = NewInstanceFactory();
  5.     
  6.     $scope.doSomething = function() {
  7.       return ni.doSomething();
  8.     }
  9.   }
  10. ]);

スコープとコントローラ

  • テンプレートファイルとJavaScriptコードを結びつけるためにスコープとコントローラを使用する。

利用方法

ng-controller ディレクティブを使用する

  1. <div ng-controller="NormalController"></div>

コントローラーを定義

  • Module#controller を使用する
  1. angular.module('app',[])
  2.   .controller('NormalController',['$scope',function($scope) {
  3.     $scope.message = "Hello";
  4.   }
  5. }]);

スコープ

  • テンプレートに対して公開するデータや振る舞いを定義する。
  • AngularJSには、DOMとJavaScriptの間にスコープと呼ばれるオブジェクトが用意されている。
  • スコープのプロパティは内容の変更が監視されており、値が変化するとDOMに反映される。
  • DOMの値が変更されると、対応するスコープの値に変更が反映される。
  • DOMイベントが発生した場合、対応するスコープのメソッドが呼び出される。
  • DOM操作はAngularJSが隠蔽するため、開発者はスコープオブジェクトを操作することで、メンテナンス性の高いコードで、画面の描画内容を変更できる。

コントローラの役割

  • コントローラはスコープをセットアップする。
  • DIによりインジェクトされたサービスを利用して$scopeオブジェクトを組み立てる。

<blockquote>サーバーサイドのMVCパターンでのコントローラとは役割が異なるため、名称に惑わされないように注意</blockquote> <blockquote>プレゼンテーションロジックはフィルターやディレクティブに、ビジネスロジックはサービスに分離し、コントローラはあくまでもスコープのセットアップ処理に徹するのが理想的</blockquote>

スコープの適用範囲

  • ng-controllerディレクティブを使用してコントローラーを指定した場合、その要素より下位階層の要素でのみ、そのコントローラーでセットアップしたスコープオブジェクトを利用できる。
  • コントローラーは適用するごとに新しいスコープのインスタンスが生成される。
  • 同一のコントローラーを複数個所に適用した場合、異なるインスタンスになる。

階層化

  • コントローラーの階層化も可能
  • 子コントローラーに渡されるスコープは親コントローラーのスコープの派生インスタンス

<blockquote>トップ階層にあるコントローラに渡されるスコープオブジェクトは、$rootScope から派生したものとなる</blockquote> 

  1. angular.module('app',[])
  2.   .controller('ParentController',[$scope, function($scope){
  3.     $scope.value = 'Parent';
  4.   }])
  5.     .controller('ChildController',[$scope, function($scope){
  6.       $scope.value = 'Child';
  7.     }]);

$rootScope

  • $rootScopeは通常の$scope同様、コントローラにインジェクトして利用できる
  • $rootScopeのインスタンスは、アプリケーション内で必ず1つのため、複数のコントローラー間で同一のインスタンスを参照可能

スコープとしてのコントローラー

  • コントローラー関数をスコープオブジェクトとして利用する方法もある。
  • ng-controller で　コントローラー as 別名 とする
  1. <div ng-controller="AsSyntaxController as ctrl">
  2.   <p>value: テンプレート:Ctrl.vaue</p>
  3.   <p>upperValue: テンプレート:Ctrl.getUpperValue()</p>
  4. </div>
  • コントローラー定義では、引数に$scopeを受け取らず、テンプレートに公開するプロパティやメソッドを自身(this)に登録する
  1. angular.module('app',[])
  2.   .controller('AsSyntaxController', function(){
  3.     this.value = "Hello";
  4.     this.getUpperValue = function(){
  5.       return angular.uppercase(this.value);
  6.     };
  7.   });

スコープ間連携

<blockquote>大規模アプリケーションを開発する場合、再利用しやすい単位ごとにコントローラーを作成したり、画面領域ごとにコントローラを分割するのが一般的</blockquote>

  • コントローラーを分割すると、コントローラー間でのデータとやり取りや、相互に通信する手段が必要になる
  • $scope オブジェクトには、コントローラー間でイベントを通知する仕組みが用意されている。
$rootScope.Scope#$emit(name, ...args);
  • 派生元スコープに対してイベントを送信
$rootScopep.Scope#$broadcast(name ...args);
  • 派生先のスコープに対してイベントを送信ん
$rootScope.Scope#$on(name, listener);
  • Scope#$emit、Scope#$broadcast で送信したイベントを受け取る

スコープの監視と反映

変更監視

  • スコープオブジェクトにはデータの変化を監視するために、$watch、$watchGroup、$watchCollection が用意されている。

$rootScope.Scope#$watch

  1. $rootScope.Scope#$watch(watchExpression, [listener],[objectEquality]);
  • 第1引数には、監視対象のプロパティを文字列で指定する方法と、監視対象の値を返す関数を登録する方法がある
  • 第2引数には、値が変化したときに呼び出されるリスナー関数を登録
  • 第3引数にtrueを指定すると、オブジェクトを比較するときにangular.equalsを利用する。false(デフォルト) の場合、== での比較
  • 戻り値はリスナー関数を解除する関数。
  1. angula.module('app')
  2.   .controller('WatchController',['$scope',function($scope){
  3.     $scope.message = 'Hello';
  4.     $scope.result = ;
  5.     $scope.$watch('message',function(newVal, oldVal, scope){
  6.       if(angular.equlas(newVal,'success') {
  7.         $scope.result = 'OK';
  8.       }
  9.     });
  10.   }]);

$rootScope.Scope#watchGroup

  1. $rootScope.Scope#watchGroup(watchExpressions, listener);
  • 複数のデータ値をまとめてチェックしたい場合
  1. angular.module('app')
  2.   .controller('WatchGroupController',['$scope',function($scope){
  3.     $scope.greeting = 'Hello';
  4.     $scope.message2 = 'Hello';
  5.     $scope.message3 = 'Hello';
  6.     $scope.result = ;
  7.     $scope.watchGroup([
  8.       function () { return $scope.greeting; },
  9.       function () { return $scope.message2; },
  10.       function () { return $scope.message3; }
  11.     ],
  12.     function(newVal, oldVal, scope) {
  13.       scope.result = angular.toJson(newVal); 
  14.     } 
  15.     );
  16.   }]);

ルーティング

HTML5 History API

  • HTMLL5で追加された History API history#pushState関数 および popStateイベントが利用されている。
  • history.pushState()は、URLの表示をページ読み込みなしに変更出来る。
pushState
  1. history.pushState(,,url);
popState
  1. window.addEventListener('popstate', function(event){
  2. });

<blockquote>AngularJSでは、ng-route モジュールで簡単に利用出来る</blockquote>

ng-routeの利用

モジュールの読み込み

  • CDN
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>

Hashモードとhtml5モード

  • デフォルトはHashモード。http://example.jp/#/angular ようなURLが呼び出される。
  • pushStateによる操作を実行するためには、$locationProvider.html5Mode(true)を呼び出し、html5モードに変更する必要がある

<blockquote>IE9以下では、pushStateが実装されていないため、自動でHashモードにフォールバックされる</blockquote>

ルーティングの設定

when 関数の第2引数

KEY 型 説明
controller 文字列 or 関数 コントローラーを使用
controllerAs 文字列 コントローラーンのエイリアスを使用可能
template 文字列 or 関数 文字列もしくは関数の戻り値でテンプレートを設定。ng-viewに展開される。templateUrlが優先
templateUrl 文字列 or 関数 文字列もしくは関数の戻り値でテンプレートのパスを指定
reloadOnSearch 真偽値 $location#search、$location#hashで変更時に再読み込みされるrouteを指定。falseで、URLが変更されたら、$routeScopeの$routeUpdateイベントが呼ばれる
caseInsensitiveMatch 真偽値 大文字小文字が区別されずに評価。デフォルトfalse

app.js

  1.  var app = angular.module('app', ['ngRoute'])
  2.    .config(['$routeProvider','$locationProvider', function( $routeProvider, $locationProvider){
  3.      $routeProvider
  4.        .when('/page/:name',{
  5.          templateUrl: 'partials/page.html',
  6.          controller: 'PageController',
  7.          controllerAs: 'page'
  8.        })
  9.        .otherwise({
  10.          redirectTo: '/'
  11.        })      
  12.        ;
  13.      $locationProvider.html5Mode(true);
  14.    }]);
  15.  app.controller('PageController',['$routeParams',function($routeParams){
  16.    this.name = 'PageController';
  17.    this.params = $routeParams;

app.html

  1. <html ng-app="app">
  2. <head>
  3. <base href="http://127.0.0.1/">
  4. </head>
  5. <body>
  6.   <div ng-controller="PageController as page">
  7.     <a href="page/page1">page1</a>
  8.     <a href="page/page2">page2</a>
  9.     <div ng-view></div>
  10.   </div>
  11.    :
  12. </html>

partials/page.html

  1. <div>
  2. Page:テンプレート:Page.params.name
  3. </div>

プロミス

  • AngularJSでは、ルーティングと呼ばれる技術を利用して、ページの部分更新やデータの取得動的な表示更新などを最小のコード量で簡単に実現できる。
  • $httpなど通信処理を行う際にプロミスを知っていると便利。
  • JavaScriptの特徴であるノンブロッキング処理を適切に処理するために、コールバックとプロミスがある。

プロミスとは

  • プロミスとは関数の結果を返すのではなく、プロミスオブジェクトを返す。
  • 同期的関数と同じように値を返すことが可能。
  • ノンブロッキング処理内で成功と失敗に対するメソッドを呼び出せて、thenメソッドにより次ぎ処理を呼び出せる。

<blockquote>コールバックを利用すると、ノンブロッキング処理内でコールバックが続くことが多くなり、「コールバック地獄」とも呼ばれる状態に陥り、1つの関数が肥大化していくことが多々ある。これを解決するために用意されているのがプロミス。</blockquote>

$q

  • プロミスは、Chorome 32、Firefox 29 の組込み関数として実装されているが、AngularJSでは、$qと呼ばれるサービスが用意されている

プロミスの利用

  • プロミスでは、deferredと呼ばれるインスタンスと、promiseオブジェクトを一緒に利用出来る。

deferred結果

メソッド 結果
resolve 結果が成功の場合呼び出す
reject 結果が失敗の場合呼び出す
notify resolveかrejectが呼ばれるまでに何度でも呼び出すことが可能

結果を待つメソッド

,then
メソッド 引数 結果￥
successCallback,errorCallback,notifyCallback,成功失敗関係なくdeferredで呼ばれるメソッドのcallbackを指定
catch errorCallback 失敗(reject)を呼び出された場合のコールバックを指定
finally callback 成功失敗関係なく最後に呼ばれるコールバックを指定

<blockquote>thenはプロミスを返すのでメソッドチェーンが可能</blockquote>

例

0172 angular promise.jpg 

  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3. <head>
  4. <script type="text/javascript" src="/angular/angular.min.js"></script>
  5. <script type="text/javascript">
  6. var app = angular.module('app',[]);
  7. function checkNameLen(name){
  8.     return name.length < 5;
  9. }
  10. app.controller('PromiseCtrl',['$scope','$q','$timeout',function($scope, $q, $timeout ){
  11.     function checkAsync(name){
  12.         var deferred = $q.defer();
  13.         $timeout(function(){
  14.             deferred.notify('Async Notify');
  15.             if (checkNameLen(name)){
  16.                 deferred.resolve(name);
  17.             } else {
  18.                 deferred.reject(name);
  19.             }
  20.         },500);
  21.         return deferred.promise;
  22.     }
  23.     $scope.checkName = function(){
  24.         checkAsync($scope.user_name)
  25.             .then(
  26.                 function(msg){
  27.                     $scope.msg = "SUCCESS " + msg;
  28.                 },
  29.                 function(msg){
  30.                     $scope.msg = "FAIL " + msg;
  31.                 },
  32.                 function(msg){
  33.                     $scope.msg = msg;
  34.                 });
  35.     }
  36. }]);
  37. </script>
  38. <title></title>
  39. </head>
  40. <body>
  41.     <div ng-controller="PromiseCtrl">
  42.         <input type="text" ng-model="user_name">
  43.         <input type="button" value="check name" ng-click="checkName()">
  44.         <div>テンプレート:Msg</div>
  45.     </div>
  46. </body>
  47. </html>

jqLite

jQueryの利用

  • jqLiteは、jQueryと比べると機能が大きく制限されている
  • AngularJS を読み込む前に jQuery を読み込むと、angular.element で取得できるオブジェクトがjQueryのものに変更される(jQuery1.x系のみ対応)

$http

  1. $http({
  2.     method: 'POST',
  3.     url: '/login',
  4.     headers: {
  5.         'X-CSRFToken': getCookie('csrftoken')
  6.     },
  7.     data: user,
  8. }).success(function(user){
  9.     alert(user);
  10. });

$resource

angular-resource.js
  1. <script type="text/javascript" src="js/angular-resource.js"></script>
ngResource
  1. var app = angular.module("app", ['ngResource']);

Tips

DjangoのCSRFトークンを送信するようにconfigで設定する

  1. app.config(['$httpProvider', function ($httpProvider) {
  2.     $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
  3.     $httpProvider.defaults.xsrfCookieName = 'csrftoken';
  4. }]);
「https://www.typea.info/tips_/index.php?title=AngularJS&oldid=3936」から取得

© 2006 矢木浩人