概要

AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
</head>
<body>

ここにサンプルコードを記述。

</body>
</html>

サンプルコード

一定時間経過後に処理を実行

<div ng-controller="myController">
  <p>{{ msg }}</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', '$timeout', function($scope, $timeout){
   $scope.msg = 'waiting...';
   var timer = $timeout(function(){
     $scope.msg = 'timeout'; //msec
   }, 1000);
   //$timeout.cancel(timer); // タイマーをキャンセルしたい場合
 }]);
</script>

一定時間毎に処理を実行

<div ng-controller="myController">
  <p>{{ count }}</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', '$interval', function($scope, $interval){
   $scope.count = 0;
   var timer = $interval(function(){
     $scope.count = $scope.count + 1;
     if ($scope.count == 10) {
       $interval.cancel(timer);
     }
   }, 100);
 }]);
</script>

呼出回数を指定することで上と同様の処理を実現できます。

<div ng-controller="myController">
  <p>{{ count }}</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', '$interval', function($scope, $interval){
   $scope.count = 0;
   var timer = $interval(function(){
     $scope.count = $scope.count + 1;
   }, 100, 10);
 }]);
</script>

ロガー

<div ng-controller="myController">
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', '$log', function($scope, $log){
   $log.info('info');
   $log.warn('warn');
   $log.error('error');
   $log.log('log');
 }]);
</script>

クッキーストア

angular-cookies.min.js をこちらから辿って取得する必要があります。$cookies および $cookieStore が使用できるようになります。以下では $cookieStore の使用例を示します。

<script src="angular-cookies.min.js"></script>

<div ng-controller="myController">
</div>

<script>
 angular.module('myApp', ['ngCookies']).controller('myController', ['$cookieStore', function($cookieStore){
   $cookieStore.put("key", "value");
   console.log($cookieStore.get("key")); //=> value
   $cookieStore.remove("key");
   console.log($cookieStore.get("key")); //=> undefined
 }]);
</script>

各コントローラ $scope の親スコープ

<div ng-controller="myController1">
  <p>{{ myModel }}</p>
  <p>{{ myRootModel }}</p>
</div>

<div ng-controller="myController2">
  <p>{{ myModel }}</p>
  <p>{{ myRootModel }}</p>
</div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myController1', ['$rootScope', '$scope', function($rootScope, $scope){
   $scope.myModel = 1;
   $rootScope.myRootModel = 1;
 }]);
 app.controller('myController2', ['$rootScope', '$scope', function($rootScope, $scope){
   $scope.myModel = 2;
   $rootScope.myRootModel = 2;
 }]);
</script>

URL 情報を取得

<div ng-controller="myController">
  <p>{{ absUrl }}</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', '$location', function($scope, $location){
   $scope.absUrl = $location.absUrl();
 }]);
</script>

その他、こちらに記載されているように url, protocol, host, port, path といった情報を扱えます。

サービスの自作

サービスは関数やオブジェクトをアプリケーション内で共有する仕組みです。

value / constant

value メソッドで簡単なサービスを登録できます。また、value メソッドとほぼ同様の機能を提供する constant メソッドも存在します。以下の例で "value" となっている部分を "constant" に置換すれば動作します。これは controller だけでなく config 内からも利用できます。定数設定値を表現する際に使用します。

<div ng-controller="myController">
  <p>{{ myval }}</p>
</div>

<script>
 var app = angular.module('myApp', []);

 app.value('myFuncService', function(a,b){
   return a + b;
 });
 app.value('myValueService', 10);

 app.controller('myController', ['$scope', 'myFuncService', 'myValueService', function($scope, myFuncService, myValueService){
   $scope.myval = myFuncService(90, myValueService);
 }]);
</script>

factory / service

この続きが気になる方は

サービス (AngularJS)

残り文字数は全体の約 44 %

tybot

100 円

* プログラミング情報の有料公開およびご購入について

* ご購入済みの方はこちらからログイン