#はじめに
AngularJSには、serviceというものがあります。
アプリケーションの共通部品として利用できるようにするものです。
1度挑戦してみます。
#Serviceの実装
serviceSample.js
var MyApp = angular.module('MyApp', []);
MyApp.service('MyAppSevrices', [function () {
this.plus = function (x, y) {
return (x + y);
}
this.minus = function (x, y) {
return (x - y);
}
this.multiply = function (x, y) {
return (x * y);
}
this.divide = function (x, y) {
return (x / y);
}
}]);
足し算・引き算・掛け算・割り算のサービスです。
サービス名を指定して、各関数を作成します。
#Controllerの実装
serviceSample.js
MyApp.controller('ServiceCtrl', function ($scope, MyAppSevrices) {
$scope.plus = function() {
return MyAppSevrices.plus(parseInt($scope.x), parseInt($scope.y));
}
$scope.minus = function() {
return MyAppSevrices.minus(parseInt($scope.x), parseInt($scope.y));
}
$scope.multiply = function() {
return MyAppSevrices.multiply(parseInt($scope.x), parseInt($scope.y));
}
$scope.divide = function() {
return MyAppSevrices.divide(parseInt($scope.x), parseInt($scope.y));
}
});
コントローラーでサービスを呼び出します。
MyApp.controller('ServiceCtrl', function ($scope, MyAppSevrices) { が今までと違う点です。いままでは、$scopeのみを渡していましたが、
サービスを利用するときは、サービス名を指定します。
#Viewの実装
serviceSample.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script type="text/javascript" src="serviceSample.js"></script>
<title>serviceSample</title>
</head>
<body ng-app="MyApp">
<div class="container">
<div class="jumbotron">
<h2>serviceSample!</h2>
</div>
<div ng-controller="ServiceCtrl">
<input ng-model="x"><input ng-model="y">
<div class="bg-info">
<p>足し算: {{plus()}}</p>
<p>引き算: {{minus()}}</p>
<p>掛け算: {{multiply()}}</p>
<p>割り算: {{divide()}}</p>
</div>
</div>
</div>
</body>
</html>
今まで通りの作成で問題ありません。
ng-modelにxとyを設定しています。
両方に数値を指定すれば、それぞれ計算がされます。
#おわりに
共通部品を作成することは、アプリケーションを作るうえで必須のことだと思います。
簡単な例でしたが、基本を押さえるのに適した例だと思います。
いろいろなサービスを作成していきましょう。