はじめに

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を設定しています。
両方に数値を指定すれば、それぞれ計算がされます。

おわりに

共通部品を作成することは、アプリケーションを作るうえで必須のことだと思います。
簡単な例でしたが、基本を押さえるのに適した例だと思います。
いろいろなサービスを作成していきましょう。

AngularJSに挑戦！入門 その5

はじめに

Serviceの実装

Controllerの実装

Viewの実装

おわりに

AngularJSに挑戦！入門その5