AngularJS サービス

投稿日 2015/07/20

[Home]  | [Index]  | [ディレクティブ] [関数の使用]  | [サービス]  | [フィルタ] 

サービスの概要

サービスは AngularJS のオブジェクトのようなもので、使うためにはコントローラで使うものを指定する。例えば、$scope, $http, $sce を使う場合は次のコードのようにする。

var app2p = angular.module("app1", []);
app1.controller(
  "controller1", function($scope, $http, $sce) {
      // ...
   });

よく使うサービス


サービスの使用例

$scope

次のサンプルは、テキストボックスで入力した文字列(モデル)をコントローラへ送り、コントローラは小文字に変換してビューに返す。そのとき、$scope を通してモデルをやり取りしている。

view (Jade)

div(ng-controller="controller2")
 form.form-inline
  label(for="scope_text") Input 
  input(type="text", id="scope_text", ng-model="scope_text", class="form-control")
  button(type="submit", ng-click="scope_test(scope_text);", class="btn btn-primary") OK
  p(style="color:blue;margin-top:20px;margin-left:4%;") {{scope_result}}

controller

'use strict'
/* コントローラ controller2.js */
var app2 = angular.module("app2", []);

app2.controller(
 "controller2", function($scope) {
   // scope_test
   $scope.scope_test = function(x) {
     $scope.scope_result = angular.lowercase(x);
  };

/* End of controller2 */});

$http

次のサンプルは、コントローラが$http を使ってフォームのテキストボックスの値(モデル)をサーバへ送る。サーバ側ではそのままその値を返してくるので、コントーローラはそれをビューに渡して表示する。

view (Jade)

form(name="form1", ng-controller="controller2", class="form-group")
 label(for="form1_text1") form1_text1
 input(id="form1_text1", type="text", ng-model="form1_text1", class="form-control")
 button(type="submit", ng-click="form1_submit(form1_text1)", class="btn btn-primary")  submit
 div(style="color:blue;margin-left:5%;margin-top:20px;") {{form1_result}}

controller

// form1_submit
$scope.form1_submit = function(x) {
  $http.post('/test/angular2/form1', {form1_text1:x})
    .success(function(data, status, headers, config) {
       $scope.form1_result = "req.form1_text1: " + data + " status:" + status;
    })
    .error(function(data, status, headers, config) {
       $scope.form1_result = "error " + status;
    });
};

server (node.js + express)

/* angular2/form1 */
router.post('/angular2/form1', function(req, res) {
  res.json(req.body.form1_text1);
});

$sce

$sce は 外部の HTML などの「安全性」を保証して、ドキュメントに埋め込めるようにする。このサンプルは img タグを ng-bind-html を使いビューに埋め込んでいる。

view (Jade)

div(ng-controller="controller2")
 p(ng-bind-html="ahtml")

controller

/* $sce.trustAs */
$http.get('/tobe_included.html')
  .success(function(data) {
    $scope.ahtml = $sce.trustAs($sce.HTML, data);
});

$log

$log は可能ならログを JavaScript デバッガのコンソールへ出力する。(ブラウザ依存)

controller

$http.get('/tobe_included.html')
  .success(function(data, status, headers, config) {
    $scope.ahtml = $sce.trustAs($sce.HTML, data);
    $log.log("'/tobe_included.html' の読み込みに成功。");
  })
  .error(function(data, status, headers, config) {
    $log.error("'/tobe_included.html' の読み込みに失敗。status=" + status);
  });

$timeout

$timeout は JavaScript の setTimeout 関数のラッパーである。次のサンプルは、フォームで指定した時間(ミリ秒)だけ待ってからメッセージをビューに表示する。

view (Jade)

form(ng-controller="controller2")
 div(class="form-group", ng-init="timeout_ms=1000")
  label(for="timeout_ms") Timeout (ms)  
  input(id="timeout_ms", type="text", class="form-control", ng-model="timeout_ms")
  button(type="button", ng-click="timeout_test(timeout_ms)", class="btn btn-primary") Start
 p(style="color:blue;margin-left:4%;margin-top:20px;") {{timeout_message}}

controller

/* $timeout */
$scope.timeout_test = function(ms) {
  $scope.timeout_message = "";
  $timeout(function() { $scope.timeout_message = "TIMEOUT!!"; }, ms)
}

$window

次のサンプルは、ボタンをクリックするとメッセージボックスを表示する。

view (Jade)

form(ng-controller="controller2")
 button(type="button", ng-click="show_alert()", class="btn btn-danger") Alert

controller

/* alert */
$scope.show_alert = function() {
  $window.alert("$window で表示しました。");
};

$q

$q は非同期関数の結果を利用できるようにする。次のサンプルは、ボタンをクリックすると、非同期でメッセージを表示する。

view (Jade)

form(ng-controller="controller2")
 button(type="button", ng-click="test_q()", class="btn btn-primary") OK
 p(style="color:blue;margin-left:4%;margin-top:20px;") 

controller

/* async $q */
// ハンドラ
$scope.test_q = function() {
  var promise = async_func();
  $scope.async_result = "";
  promise.then(
    // OK のとき実行される。
    function(ok) { $scope.async_result = ok; },
    // NG のとき実行される。
    function(err) { $scope.async_result = err; }
  );
};
/* 非同期関数 */
function async_func() {
  return $q(function(resolve, reject) {
    $timeout(function() {
      resolve("OK");  // 常にOKを返す。
    },
    1000);
  })
}

 

 


 

ページの先頭へ