I write Angular in TypeScript, but I want to inject the service into the controller and call the function, but it doesn't work.

I write Angular in TypeScript, but I want to inject the service into the controller and call the function, but it doesn't work.
Expected definitions and behaviors are

○ Separate the service from the controller class.
○ Call the function defined in the service from the DI controller (in this case add()
) ○ It should be printed as console.log.

*If possible, I would like to put the service in the module as a class, create two modules, import them, and call them.(The class of service definition is floating now.)

Here is the error.

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

angular with Text 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();
    }
}
}


varii=angular.module('tabibito', ['ngRoute']);
ii.service('fafaService',fafaService);
ii.controller('SampleController', ['fafaService']);

Compiled TS file.

//<reference path="../vendor_def/angularjs/angular.d.ts"/>
/// <reference path="../vendor_def/jQuery/jquery.d.ts"/>
    var fafaService=(function(){
    function fafaService(){
    }
    fafService.prototype.add=function(){
        return 'mySrvice!!!';
    };
    return faafaService;
})();
vartabibitoModule;
(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', faService).controller('SampleController', ['fafaService']);

It's on the html side.It says a lot, but I only use the controller.

<!DOCTYPE html>
<htmlng-app="tabibito">
<head>
    <metacharset="utf-8">
    <scriptsrc="./scripts/bower_components/jQuery/dist/jQuery.min.js">/script>
    <scriptsrc="./scripts/bower_components/angular/angular.min.js">/script>
    <scriptsrc="./scripts/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <scriptsrc="./scripts/bower_components/angular-sanitize/angular-sanitize.min.js">/script>
    <scriptsrc="./scripts/bower_components/angular-message-format/angular-message-format.min.js">/script>
    <scriptsrc="./scripts/bower_components/lodash/lodash.min.js">/script>
    <scriptsrc="./scripts/controllers/controllers.js"></script>
    <link href="./stylesheets/dest/common.css"rel="stylesheet" type="text/css"/>
    <title>tabibito</title>
</head>
<bodying-controller="SampleController as c">
    <h1>Angular self-study input</h1>
    <h2>Change content from select tab in ng-swich </h2>
    <div>
        <selectng-model="season">
            <option value="">Select Four Seasons</option>
            <option value="spring">Spring</option>
            <option value="summer">Summer</option>
            <option value="autum">Autumn</option>
            <option value="winter">Winter</option>
        </select>
        <div ng-switch="season">
            <spanning-switch-when="spring">Spring is Akebono</span>
            <spanning-switch-when="summer">Summer is summer</span>
            <spanning-switch-when="autum">Autumn Akiba</span>
            <spanning-switch-when="winter"> It's winter</span>
        </div>
    </div>
    <h2> Loop array objects </h2>
    <table class="table">
        <trng-repeat="(key,value)inc.author">
            <th>{{key}}</th><!--Not c.key-->
            <th>{{value}}</th>
        </tr>
    </table>
    </body>
    </html>

javascript angularjs typescript

2022-09-30 20:14

1 Answers

The last line of .ts is
ii.controller('SampleController', ['faaService', tabibitoModule.TabibitoClass]);
Isn't that right?

2022-09-30 20:14

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656