Use Typescript into Angular 1.5

Question

Using Angular 1.5.5, I try to use Typescript so I configured gulp tasks successfully ; now I try to make a service in typescript with this code in SampleService.ts:

module app {
    class SampleService {
        constructor() {
        }

        public toto() :void {
            console.log('test');
        }
    }
    angular.module("app").service("SampleService", [SampleService]);
}

Otherwhere I have :

angular.module('app',
[ 'ngMaterial',
  'ngAnimate',
 ....

In order to declares routes:

$stateProvider
    .state('myapp', {
        url: '',
        controller: 'MainController as vm',
        templateUrl: 'app/views/main.html',
        abstract: true
    })
    .state('myapp.search', {
        url: '/',
        controller: 'SearchController as vm',
        templateUrl: 'app/views/partials/search.html'
    })

Without this service declaration, everything is working fine. Now with SampleService declared this way, I get:

Error: [ng:areq] Argument 'MainController' is not a function, got undefined
http://errors.angularjs.org/1.5.5/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined
minErr/<@http://localhost:3000/bower_components/angular/angular.js:68:12
assertArg@http://localhost:3000/bower_components/angular/angular.js:1880:11

Even if the service is not injected, it seems to break my application. Any idea of what wrong I did?

Just for the sake of it, can you remove the braces when registering the service? '.service("sampleService", SampleService); — AranS
– AranS, Commented May 27, 2016 at 8:25
Can you post output JS file compiled from TypeScript service — csharpfolk
– csharpfolk, Commented May 27, 2016 at 8:37

Radim Köhler · Accepted Answer · 2016-05-27 09:01:39Z

There is a working plunker Just register controller as you did with a service:

module app {
    class SampleService {
        constructor() {
        }

        public toto() :void {
            console.log('test');
        }
    }
    angular.module("app").service("SampleService", [SampleService]);

    class MainController  {

        static $inject = ["$scope", "SampleService"];
        constructor(
            protected $scope, 
            protected SampleService: SampleService) {

            this.init();
        }

        public init() :void {
            this.SampleService.toto();
        }
    }
    angular.module("app").controller("MainController", MainController);
}

and states as they are (just I do prefer some url, other then string empty)

.state('myapp', {
    url: '/myapp',
    controller: 'MainController as vm',
    templateUrl: 'app/views/main.html',
    abstract: true
})
.state('myapp.search', {
    url: '/search',
    controller: 'SearchController as vm',
    templateUrl: 'app/views/partials/search.html'
})

and this will work:

<a ui-sref="myapp.search">

Check it here in action

Collectives™ on Stack Overflow

Use Typescript into Angular 1.5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related