

AngularをTypeScriptで書いているのですが、サービスをcontrollerに注入して関数を呼び出したいのですがうまくいきません。  
期待する定義と動作は

○サービスとコントローラclassを分ける。  
○DIされたコントローラからサービスに定義されている関数を呼ぶ(ここではadd()です。)  
○console.logとして出力されればいいです。

※serviceをmodule内にclassとして入れて2つのmoduleを作りimportし、呼び出すのもできればやりたいことです。(今はservice定義のclass浮いている状態です。)

こちらが出たエラーです。

[code]

    Uncaught Error: [$injector:modulerr]               http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=tabibito&p1=Error%3…    %3A3000%2Fscripts%2Fbower_components%2Fangular%2Fangular.min.js%3A19%3A381)
    
[/code]

angular with Tyescript is

[code]

    /// <reference path="../vendor_def/angularjs/angular.d.ts"/>
      /// <reference path="../vendor_def/jQuery/jquery.d.ts"/>
    
    
    class fafaService{
    constructor(){
    }
    add(){
         return 'mySrvice!!!!';
    }
     }
    module tabibitoModule {
    export class TabibitoClass{
        service;
        constructor(fafaService)
        {
            this.service = fafaService;
            this.service.add();
        }
    }
    }
    
    
    var ii = angular.module('tabibito',['ngRoute']);
    ii.service('fafaService', fafaService);
    ii.controller('SampleController',['fafaService']);
    
[/code]

コンパイルされたTSファイルです。

[code]

    /// <reference path="../vendor_def/angularjs/angular.d.ts"/>
    /// <reference path="../vendor_def/jQuery/jquery.d.ts"/>
        var fafaService = (function () {
        function fafaService() {
        }
        fafaService.prototype.add = function () {
            return 'mySrvice!!!!';
        };
        return fafaService;
    })();
    var tabibitoModule;
    (function (tabibitoModule) {
        var TabibitoClass = (function () {
            function TabibitoClass(fafaService) {
                this.service = fafaService;
                this.service.add();
            }
            return TabibitoClass;
        })();
        tabibitoModule.TabibitoClass = TabibitoClass;
    })(tabibitoModule || (tabibitoModule = {}));
                angular.module('tabibito'['ngSanitize','ngOMessageFormat']).service('fafaService',     fafaService).controller('SampleController', ['fafaService']);
    
[/code]

html側です。いろいろ書いてありますが使っているのはコントローラぐらいです。

[code]

    <!DOCTYPE html>
    <html ng-app="tabibito">
    <head>
        <meta charset="utf-8">
        <script src="./scripts/bower_components/jQuery/dist/jQuery.min.js"></script>
        <script src="./scripts/bower_components/angular/angular.min.js"></script>
        <script src="./scripts/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="./scripts/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
        <script src="./scripts/bower_components/angular-message-format/angular-message-format.min.js"></script>
        <script src="./scripts/bower_components/lodash/lodash.min.js"></script>
        <script src="./scripts/controllers/controllers.js"></script>
        <link href="./stylesheets/dest/common.css" rel="stylesheet" type="text/css" />
        <title>tabibito</title>
    </head>
    <body ng-controller="SampleController as c">
        <h1>Angular独習 input</h1>
        <h2>ng-swichでセレクトタブからのコンテンツ変更</h2>
        <div>
            <select ng-model="season">
                <option value="">四季を選択</option>
                <option value="spring">春</option>
                <option value="summer">夏</option>
                <option value="autum">秋</option>
                <option value="winter">冬</option>
            </select>
            <div ng-switch="season">
                <span ng-switch-when="spring">春は曙</span>
                <span ng-switch-when="summer">夏は夏</span>
                <span ng-switch-when="autum">秋葉秋</span>
                <span ng-switch-when="winter">冬です</span>
            </div>
        </div>
        <h2>配列オブジェクトをループ処理する</h2>
        <table class="table">
            <tr ng-repeat="(key,value) in c.author">
                <th>{{key}}</th><!-- c.keyではない-->
                <th>{{value}}</th>
            </tr>
        </table>
        </body>
        </html>
    
[/code]


CC BY-SA 3.0
2015-08-23T07:15:59.440
14756
2016-10-21T09:28:23.720
2015-08-23T13:02:58.980
10127
10127
question
javascript angularjs typescript
AngularをTypeScriptで書いているのですが、サービスをcontrollerに注入して関数を呼び出したいのですがうまくいきません。


.tsの最後の行は  
`ii.controller('SampleController',['fafaService',
tabibitoModule.TabibitoClass]);`  
ではないですか？


CC BY-SA 3.0
2015-08-25T15:42:22.620
14839
2015-08-25T15:42:22.620
8532
14756
answer