Muito bem, até agora criamos o componente AppComponent, que nada mais é do que a página principal da nossa aplicação, aquela que lista todas as nossas fotos. Talvez você ainda não tenha se acostumado com a ideia de uma página ser um componente, mas até o final do treinamento essa ideia vai se acomodando. Falando em página, cedo ou tarde precisaremos criar a página de cadastro de fotos, ou seja, um novo componente. Vamos criá-lo logo, mas exibindo apenas o título da página, ainda sem qualquer formulário.

Vamos criar o componente alurapic/client/app/cadastro/cadastro.component.ts:

// alurapic/client/app/cadastro/cadastro.component.ts

import {Component, Input} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'cadastro',
    templateUrl: './cadastro.component.html' 
})
export class CadastroComponent { }

E claro, o seu template:

<!-- alurapic/client/app/cadastro/cadastro.component.html -->

<h1 class="text-center">Cadastro de Fotos</h1>

Um ponto que vamos melhorar também é que extrairemos de AppComponent todo o seu código para o novo componente ListagemComponent. A ideia é que AppComponent fique com seu template vazio por enquanto.

// alurapic/client/app/listagem/listagem.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'listagem',
    templateUrl: './listagem.component.html' 
})
export class ListagemComponent { 

    fotos: Object[] = [];

    constructor(http: Http) {

        http.get('v1/fotos')
            .map(res => res.json())
            .subscribe(
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );
    }

}

O template do componente:

<!-- alurapic/client/app/listagem/listagem.component.html -->

<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>
<div class="container">

    <div class="row">
        <painel *ngFor="let foto of fotos" titulo="{{foto.titulo}}" class="col-md-2">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
            </foto>
        </painel>
    </div><!-- fim row -->
</div>

Com isso, o arquivo alurapic/client/app/app.component.html ficará vazio. É isso que queremos nesse momento. O componente AppComponent ficará assim:

// alurapic/client/app/app.component.ts

import { Component, Inject } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent { }

Outro ponto a destacar é que dessa vez não declaramos os novos componentes dentro de seu respectivo módulo. A razão disso é que eles estão atrelados ao módulo AppModule. Criamos uma subpasta dentro de app para evitar a explosão de arquivos dentro dessa pasta. Agora, precisamos adicionar CadastroComponent e ListagemComponent nas declarations do módulo AppModule, para que o componente faça parte do módulo:

// alurapic/client/app/app.module.ts

import 'rxjs/add/operator/map';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { FotoModule } from './foto/foto.module';
import { HttpModule } from '@angular/http';

import { CadastroComponent }   from './cadastro/cadastro.component'; // importou
import { ListagemComponent }   from './listagem/listagem.component'; // importou

@NgModule({
  imports:      [ BrowserModule, FotoModule, HttpModule ],
  declarations: [ AppComponent, CadastroComponent, ListagemComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Agora, a pergunta que não quer calar: hoje, em AppModule, o primeiro componente que carregamos no bootstrap do módulo é o AppComponent, mas veja que seu template se encontra vazio! Se trocarmos este componente por CadastroComponent, iremos exibir a página de cadastro assim que nossa página for carregada, e não é isso que queremos. Aliás, queremos que o usuário acesse determinada URL e ora carregue o componente CadastroComponent, ora ListagemComponent! Como fazer isso? Houston, we have a problem!

Para podermos resolver esse problema, precisamos entender o motivo pelo qual o Angular é um framework voltado para a criação de Single Page Applications.