README.md

Instalar dependências de projeto:

npm install

Dependências instaladas, vamos entender a estrutura inicial. Você vai encontrar alguns arquivos já criados e trabalhar a partir daí. A ideia aqui é exercitar um pouco de TDD (Test Driven Development). A primeira coisa que você precisa fazer é rodar na sua linha de comando o seguinte:

Projeto Angular

ng serve

Componentes:

Login

Encontra-se na pasta de src/app/login. Todas as definições dessa tela encontram-se lá.

Signup

As definições desse componente encontram-se em src/app/signup.

Foram criados componentes para servir de auxiliar as duas telas principais.

1. State 1.1 StateService: Responsável por baixar os dados referentes aos Estados e Cidades da API 1.2 State(model): foi deletado durante o desenvolvimento pois a API trabalha apenas com siglas, tratava-se de uma interface 1.3 City(model): foi deletado durante o desenvolvimento pois a API trabalha apenas com siglas, tratava-se de uma interface
2. User 2.1 UserService: Responsável por fazer a comunicação com a API de usuário. 2.2 User(model): classe que serve para mapear os usuários. Foi usado uma classe ao invés de uma interface pois essa poderia conter métodos mais complexos
3. Estilo 3.1 O estilo está sendo definido no arquivo style.css 3.2 Foi instalado o awesome para utilização de seus ícones 3.3 Foi instalado bootstrap para utilização das suas box(o que ficou renegado a segundo plano durante o desenvolvimento pois preferi desenvolver as funcionalidades)

TO-DO: Haviam coisas que eu gostaria de ter feito, mas a pouca experiência em Angular não me permitiu. Ficará listado abaixo as mudanças necessárias:

• transformar os inputs em um componente reutilizável, um bom exemplo pode ser visto a baixo:

<!-- HTML -->
<div class="form-group" [class.has-success]="hasSuccess()"
    [class.has-error]="hasError()">
    <label class="control-label sr-only" for="inputSuccess"><i class="fa fa-check"></i>{{label}}</label>
    <ng-content></ng-content>
    <span class="help-block" *ngIf="hasError()"><i class="fa fa-remove"></i>{{errorMessage}}</span>
    <span class="help-block" *ngIf="hasSuccess()"><i class="fa fa-check"></i>OK</span>
</div>

e com o controller dessa forma:

import { Component, OnInit, Input, ContentChild, AfterContentInit } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'mt-input-container',
  templateUrl: './input.component.html'
})
export class InputComponent implements OnInit, AfterContentInit {

  input: any;
  @Input() label: String;
  @Input() errorMessage: String;
  @ContentChild(NgModel) model: NgModel;

  constructor() { }

  ngOnInit() {
  }

  ngAfterContentInit() {
    this.input = this.model;
    if (this.input === undefined) {
      throw new Error('Esse component precisa ser usado com uma diretiva ngModel');
    }
  }

  hasSuccess(): boolean{
    return this.input.valid && (this.input.dirty || this.input.touched);
  }

  hasError(): boolean {
    return this.input.invalid && (this.input.dirty || this.input.touched);
  }
}

• API, criar uma área comum para que os services ficassem aninhados.
• Alinhar as coisas com seu devido CSS ou tentar usar o less.
• Substituir o HTML por slim, talvez, para que o código das telas não fique tão poluido.