AngularJS Controller

AngularJS Service

今回はServiceをやります。Contoroller、Component、Serviceを連携させてみます。
サービスの登録は、serviceメソッド、factoryメソッドを使ってみます。両方とも最初にオブジェクトが生成され、シングルトンとして動作します。

serviceメソッド

serviceメソッドはサービスの内容を記述した関数(コンストラクタ)またはクラスを渡します。
AngularJSが内部でnewしてくれます。

				

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>AngularJS Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <!-- script src="angular.min.js"></script -->
    <script>
        var testApp = angular.module("testApp", []);

        function TestCtrl(svc) {
            this.message = svc.msg;
        }

        function TestService() {
            this.msg = "Hello World!!";
        }

        testApp.service('testSvc', TestService);

        testApp.component("hello", {
            template: "<h1>" + "{{obj.message}}" + "</h1>",
            controller: ["testSvc", TestCtrl],
            controllerAs: "obj"
        });
    </script>
</head>

<body ng-app="testApp">
    <hello></hello>
</body>

</html>

実行イメージ

factoryメソッド

factoryメソッドは処理でnewして戻り値でAngularJSに渡します。

				
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>AngularJS Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <!-- script src="angular.min.js"></script -->
    <script>
        var testApp = angular.module("testApp", []);

        function TestCtrl(svc) {
            this.message = svc.msg;
        }

        function TestService() {
            this.msg = "Hello World!!";
        }

        testApp.factory('testSvc', function() {
            return new TestService();
        });

        testApp.component("hello", {
            template: "<h1>" + "{{obj.message}}" + "</h1>",
            controller: ["testSvc", TestCtrl],
            controllerAs: "obj"
        });
    </script>
</head>

<body ng-app="testApp">
    <hello></hello>
</body>

</html>

実行イメージ

ページのトップへ戻る