作成日
最終更新
記事区分
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
他のサービスをインジェクトして利用するサービスを作成するためには factory または service を利用します。factory ではインスタンスを組み立てて return します。
<div ng-controller="myController">
<p>{{ myval }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.constant('myConstantService', 10);
app.factory('myFactoryService', ['myConstantService', function(myConstantService){
var aService = {};
aService.func = function(a){
return a + myConstantService;
};
return aService;
}]);
app.controller('myController', ['$scope', 'myFactoryService', function($scope, myFactoryService){
$scope.myval = myFactoryService.func(90);
}]);
</script>
service では return するインスタンスのコンストラクタを登録します。内部的には factory と差異はありません。どちらもシングルトンです。
<div ng-controller="myController">
<p>{{ myval }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.constant('myConstantService', 10);
app.service('myService', ['myConstantService', function(myConstantService){
this.func = function(a){
return a + myConstantService;
};
}]);
app.controller('myController', ['$scope', 'myService', function($scope, myService){
$scope.myval = myService.func(90);
}]);
</script>
シングルトンですのでコントローラ間で値を共有できます。
<div ng-controller="myControllerA">
<div ng-controller="myControllerB">
<p>{{ myval }}</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.service('myService', function(){
this.values = {};
this.setValue = function(key, value){
this.values[key] = value;
};
this.getValue = function(key){
return this.values[key];
};
});
app.controller('myControllerA', ['$scope', 'myService', function($scope, myService){
myService.setValue('myKey', 10);
}]);
app.controller('myControllerB', ['$scope', 'myService', function($scope, myService){
$scope.myval = myService.getValue('myKey');
}]);
</script>
サービス自体はシングルトンですが FactoryMethod パターンを利用して JavaScript のクラスを返せばインスタンスを量産できます。
<div ng-controller="myController">
<p>{{ myval }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.factory('myFactoryService', function(){
function MyProduct(prop) {
this.prop = prop;
}
MyProduct.prototype.method = function(x){
return x + 100;
};
function MyFactory(x){
return new MyProduct(x);
}
return MyFactory;
});
app.controller('myController', ['$scope', 'myFactoryService', function($scope, myFactoryService){
var product1 = myFactoryService(1);
var product2 = myFactoryService(2);
$scope.myval = product1.method(product1.prop) + product2.method(product2.prop);
}]);
</script>
provider
config でパラメータを設定できてかつ他のサービスをインジェクトできるサービスを登録するためには provider を利用します。factory のように $get でインスタンスを構築して返します。config 内での名称は "サービス名 + Provider" となります。
<div ng-controller="myController">
<p>{{ myval }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.constant('myConstantService', 10);
app.value('myFuncValueService', function(a, b){
return a + b;
});
app.provider('myService', ['myConstantService', function(myConstantService){
this.param = myConstantService;
this.$get = ['myFuncValueService', function(myFuncValueService){
var aService = {};
var param = this.param;
aService.func = function(a){
return myFuncValueService(a, param);
};
return aService;
}];
}]);
app.config(['myServiceProvider', function(myServiceProvider){
myServiceProvider.param = 20;
}]);
app.controller('myController', ['$scope', 'myService', function($scope, myService){
$scope.myval = myService.func(90);
}]);
</script>
0
関連記事
- AngularJS 公式ドキュメントの利用例AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
- ルーティングを定義してシンプルな SPA を構築 (AngularJS)AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
- DOM 操作ディレクティブ (AngularJS)AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。 DOM 操作ディレクティブ <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <script type="...
- フィルター (AngularJS)AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。 フィルターの使用例 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <...
- HTTP 通信 (AngularJS)AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <...
