Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Source Link
URL Rewriter Bot
URL Rewriter Bot
Add example using ES6 modules
Source Link
Sly_cardinal
  • 13.3k
  • 5
  • 53
  • 55

2016-05-06: New example using ES6-style modules

The static $inject array and constructor remain unchanged from the previous example.

The only change is to split the classes into multiple files and use ES6 modules to pull in the class definitions.

/lib/HelloService.ts:

export class HelloService { public getWelcomeMessage():String { return "Hello from HelloService"; } } 

/lib/AnotherService.ts:

import {HelloService} from './HelloService'; /** * Service that depends on HelloService. */ export class AnotherService { // Define `HelloService` as a dependency. static $inject = ['HelloService']; constructor( // Add the parameter and type definition. public HelloService: HelloService ){} public getWelcomeMessage():String { // Access the service as: `this.HelloService` // Enjoy auto-completion and type safety :) var helloMsg = this.HelloService.getWelcomeMessage(); return "Welcome from AnotherService, " + helloMsg; } } 

/index.ts:

// Using the services. import {HelloService} from './lib/HelloService'; import {AnotherService} from './lib/AnotherService'; angular.module('HelloApp', []) .service('HelloService', HelloService) .service('AnotherService', AnotherService) .run(['AnotherService', function(AnotherService: AnotherService){ console.log(AnotherService.getWelcomeMessage()); }]); 

Previous answer: using namespaces

Building from Steve Fenton's answer:

modulenamespace MyModule { /** * Angular Service */ export class HelloService { public getWelcomeMessage():String { return "Hello from HelloService"; } } /** * Service that depends on HelloService. */ export class AnotherService { // Define `HelloService` as a dependency. static $inject = ['HelloService']; constructor( // Add the parameter and type definition. public HelloService: MyModule.HelloService ){} public getWelcomeMessage():String { // Access the service as: `this.HelloService` // Enjoy auto-completion and type safety :) var helloMsg = this.HelloService.getWelcomeMessage(); return "Welcome from AnotherService, " + helloMsg; } } } // Using the services. angular.module('app.services.helloService', []) .service('HelloService', MyModule.HelloService) .service('AnotherService', MyModule.AnotherService) .run(['AnotherService', function(AnotherService: MyModule.AnotherService){ console.log(AnotherService.getWelcomeMessage()); }]); 

Building from Steve Fenton's answer:

module MyModule { /** * Angular Service */ export class HelloService { public getWelcomeMessage():String { return "Hello from HelloService"; } } /** * Service that depends on HelloService. */ export class AnotherService { // Define `HelloService` as a dependency. static $inject = ['HelloService']; constructor( // Add the parameter and type definition. public HelloService: MyModule.HelloService ){} public getWelcomeMessage():String { // Access the service as: `this.HelloService` // Enjoy auto-completion and type safety :) var helloMsg = this.HelloService.getWelcomeMessage(); return "Welcome from AnotherService, " + helloMsg; } } } // Using the services. angular.module('app.services.helloService', []) .service('HelloService', MyModule.HelloService) .service('AnotherService', MyModule.AnotherService) .run(['AnotherService', function(AnotherService: MyModule.AnotherService){ console.log(AnotherService.getWelcomeMessage()); }]); 

2016-05-06: New example using ES6-style modules

The static $inject array and constructor remain unchanged from the previous example.

The only change is to split the classes into multiple files and use ES6 modules to pull in the class definitions.

/lib/HelloService.ts:

export class HelloService { public getWelcomeMessage():String { return "Hello from HelloService"; } } 

/lib/AnotherService.ts:

import {HelloService} from './HelloService'; /** * Service that depends on HelloService. */ export class AnotherService { // Define `HelloService` as a dependency. static $inject = ['HelloService']; constructor( // Add the parameter and type definition. public HelloService: HelloService ){} public getWelcomeMessage():String { // Access the service as: `this.HelloService` // Enjoy auto-completion and type safety :) var helloMsg = this.HelloService.getWelcomeMessage(); return "Welcome from AnotherService, " + helloMsg; } } 

/index.ts:

// Using the services. import {HelloService} from './lib/HelloService'; import {AnotherService} from './lib/AnotherService'; angular.module('HelloApp', []) .service('HelloService', HelloService) .service('AnotherService', AnotherService) .run(['AnotherService', function(AnotherService: AnotherService){ console.log(AnotherService.getWelcomeMessage()); }]); 

Previous answer: using namespaces

Building from Steve Fenton's answer:

namespace MyModule { /** * Angular Service */ export class HelloService { public getWelcomeMessage():String { return "Hello from HelloService"; } } /** * Service that depends on HelloService. */ export class AnotherService { // Define `HelloService` as a dependency. static $inject = ['HelloService']; constructor( // Add the parameter and type definition. public HelloService: MyModule.HelloService ){} public getWelcomeMessage():String { // Access the service as: `this.HelloService` // Enjoy auto-completion and type safety :) var helloMsg = this.HelloService.getWelcomeMessage(); return "Welcome from AnotherService, " + helloMsg; } } } // Using the services. angular.module('app.services.helloService', []) .service('HelloService', MyModule.HelloService) .service('AnotherService', MyModule.AnotherService) .run(['AnotherService', function(AnotherService: MyModule.AnotherService){ console.log(AnotherService.getWelcomeMessage()); }]); 
Source Link
Sly_cardinal
  • 13.3k
  • 5
  • 53
  • 55

Building from Steve Fenton's answer:

To allow dependency injection, add a static $inject array on your class.

See the Angular $injector documentation on how the $inject array works.

The dependencies will be injected into your constructor in the order given by the array (and makes it work with minification).

Dependency Injection Example:

module MyModule { /** * Angular Service */ export class HelloService { public getWelcomeMessage():String { return "Hello from HelloService"; } } /** * Service that depends on HelloService. */ export class AnotherService { // Define `HelloService` as a dependency. static $inject = ['HelloService']; constructor( // Add the parameter and type definition. public HelloService: MyModule.HelloService ){} public getWelcomeMessage():String { // Access the service as: `this.HelloService` // Enjoy auto-completion and type safety :) var helloMsg = this.HelloService.getWelcomeMessage(); return "Welcome from AnotherService, " + helloMsg; } } } // Using the services. angular.module('app.services.helloService', []) .service('HelloService', MyModule.HelloService) .service('AnotherService', MyModule.AnotherService) .run(['AnotherService', function(AnotherService: MyModule.AnotherService){ console.log(AnotherService.getWelcomeMessage()); }]);