components-and-services.md

Components and Services

ng-metadata lets us write code in an Angular 2 style. Components written in this style are prime candidates for an eventual upgrade using ng-upgrade.

Components

Components use @Component from ng-metadata. Lifecycle hooks similar to those in Angular 2 should work with ng-metadata.

import { Component, Inject, Input, Output, EventEmitter, OnInit } from 'ng-metadata/core';
import { HeroService } from './hero.service';

@Component({
  selector: 'hero',
  templateUrl: './hero.component.html'
})
export class HeroComponent implements OnInit {
  @Input() name: string;
  @Output() call = new EventEmitter<void>();

  // Services can be included using `@Inject` or by their class literal
  constructor(
    @Inject('$log') private $log: ng.ILogService,
    private heroSvc: HeroService
  ){
  }

  ngOnInit() {
    console.log('Component initialized');
  }
}```

## Services

Services use `@Injectable` from ng-metadata. This decorator is written preceding 
a TypeScript class. Angular 1 services can be added by using the `@Inject`
decorator in the service constructor.

```js
import { Injectable, Inject } from 'ng-metadata/core';

@Injectable()
export class HeroService {
  constructor(@Inject('$http') private $http: ng.IHttpService){
  }

  fetchAll(){
    return this.$http.get('/api/heroes');
  }
}```