AngularをTypeScriptで書いているのですが、サービスをcontrollerに注入して関数を呼び出したいのですがうまくいきません。
AngularをTypeScriptで書いているのですが、サービスをcontrollerに注入して関数を呼び出したいのですがうまくいきません。
期待する定義と動作は
○サービスとコントローラclassを分ける。
○DIされたコントローラからサービスに定義されている関数を呼ぶ(ここではadd()です。)
○console.logとして出力されればいいです。
※serviceをmodule内にclassとして入れて2つのmoduleを作りimportし、呼び出すのもできればやりたいことです。(今はservice定義のclass浮いている状態です。)
こちらが出たエラーです。
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)
angular with Tyescript is
/// <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']);
コンパイルされたTSファイルです。
/// <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']);
html側です。いろいろ書いてありますが使っているのはコントローラぐらいです。
<!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>