Consumindo serviços

Para os exemplos utilizados nesta sessão serão utilizados os arquivos produzidos anteriormente. Os arquivos
package.json e tsconfig.json a serem utilizados deverão ser criados conforme os passos já apresentados ou apenas reutilizar os
mesmos copiando estes para a pasta onde será criado o novo projeto. Em src/ é preciso a existênica dos arquvivos
index.html e main.ts

Os novos arquivos que devem ser alterados estão em em src/app/

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppNewModule } from './new/app.new.module';
@NgModule({
    imports: [BrowserModule, AppNewModule],
    declarations: [AppComponent],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})

export class AppComponent {
    titulo:string = "Titulo da aplicacação";
    nome:string = "Fulando de tal";
    lista:Array<string>=["Nome 1", "Nome 2", "Nome 3"];
}

Demais arquivos em src/app/new;

Criar um novo serviço, para este exemplo será utilizado um arquivo json simulando uma resposta de um servidor
responsável pelo atendimento de uma solicitação com o seguinte conteúdo.

noticias.json

[ 
  {"id": 1, "titulo": "Noticia 1"},
  {"id": 2, "titulo": "Noticia 2"},
  {"id": 3, "titulo": "Noticia 3"},
  {"id": 4, "titulo": "Noticia 5"},
  {"id": 5, "titulo": "Noticia 5"}
]

Para consumir o conteúdo gerado pelo servico será criada uma nova classe responsável por realizar a conexão
com o servidor e entregar os dados para serem utilizados pela aplicação

app.new.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import { Noticias } from './noticias' ;

@Injectable()
export class NoticiasService {

    constructor(private http:Http){}

    getData(res: Response){
        return res.json();
    }

    getNoticias(): Observable<Noticias[]>{

        return this.http.get('noticias.json').map((res:Response) => res.json());
    };
}

Serão necessários adicionar algumas funcionalidade na aplicação criada para a apresentação do uso de módulos, incluindo
a identificação dos marcadores ng do Angular. O arquivo resultante destas alterarações deverá ficar com o seguinte
conteúdo:

app.new.module.ts

import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http';
import { AppNewComponent } from './app.new.component';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
    imports: [
        HttpModule, BrowserModule
    ],
    declarations: [
        AppNewComponent
    ],
    exports: [ AppNewComponent ]
})
export class AppNewModule { }

Deverão ser inseridas novas dependencias para o processamento das informações pela classe que faz a ligação
das variáveis do script com a aplicação. No exemplo a seguir foi inserida a funcionalidade OnInit que faz
com que a aplicação execute o código especificado no método OnInit, que é executado após o carregamento do
conteúdo html da página.

app.new.component.ts

import { Component, OnInit } from '@angular/core';
import { NoticiasService } from './app.new.service';
import { Noticias } from './noticias';
import 'rxjs/add/operator/map';

@Component({
    selector: 'new-module',
    template: `<p>Texto do novo componente é {{texto}}</p><ul><li *ngFor="let noticia of noticias">{{noticia.titulo}}</li> </ul>`,
    providers: [NoticiasService]
})

export class AppNewComponent implements OnInit{
    texto:string = "Um novo texto";

    noticias : Noticias[];

    constructor(private service: NoticiasService) { }

    ngOnInit(): void {
        this.service.getNoticias().subscribe(noticias=>this.noticias = noticias);
        console.log.bind(this.noticias);
    }

}

NO exemplo for adicionado um componente html para listas, UL, com a diretiva ngForm na tag LI mo template criado e vinculado ao
seletor new-module. Lembrando que é sempre possível, e recomendado, utilizar um templateUrl no lugar de template.

Para testar a nova aplicação bastas copiar os arquv

tsc
cd js
browserify main.js -o bundle.js
cd ..
cp js/bundle.js src/index.html src/app/app.component.html /var/www/html/angular2
cp js/bundle.js /var/www/html/angular2