Angular JS vs. Reagir JS

Angular e React são duas das principais estruturas de front-end para aplicativos da Web. Embora seus escopos sejam ligeiramente diferentes (um é uma plataforma de desenvolvimento e o outro uma biblioteca), eles são vistos como principais concorrentes. É seguro assumir que você pode usar qualquer estrutura para desenvolver um aplicativo.

A grande questão então se torna: por que você escolheria um sobre o outro? Este artigo visa respondê-la desenvolvendo um formulário de inscrição simples. O formulário dependerá exclusivamente dos recursos de validação de cada estrutura.

Pré-requisitos

Para continuar, você deve ser capaz de instale o React e ter uma compreensão geral como funciona um aplicativo React. Você também deve saber como instalar e usar Angular.

A estrutura de arquivos de cada aplicativo

O formulário React tem a seguinte estrutura de arquivos:

O formulário Angular tem a seguinte estrutura de arquivos:

A imagem acima exibe apenas a seção editada do aplicativo Angular.

A partir das estruturas de arquivos acima, você pode ver que ambas as estruturas dependem muito do uso de componentes.

Criando a lógica para cada aplicativo de formulário

Cada aplicação terá a mesma finalidade: o formulário só é enviado se todos os campos de entrada contiverem dados válidos. O campo nome de usuário é válido se contiver pelo menos um caractere. Os dois campos de senha são válidos se seus valores forem idênticos.

O Angular fornece dois métodos de criação de formulários: orientado por modelo e reativo. A abordagem reativa permite que o desenvolvedor crie critérios de validação personalizados. A abordagem orientada a modelos vem com propriedades que simplificam a validação de formulários.

O React só é capaz de desenvolver um formulário com validação personalizada. No entanto, o React é o framework mais popular e tem uma comunidade maior, então muitas bibliotecas de manipulação de formulários estão disponíveis para o React. Dado que o objetivo aqui é evitar o uso de bibliotecas externas, a aplicação React contará com validação customizada.

Desenvolvendo o modelo para cada aplicativo

Ambos os aplicativos contam com modelos para criar a saída HTML final.

Modelo HTML angular

o form-signup.component.html arquivo contém o seguinte código:

<classe div="conteúdo do formulário">
<classe de formulário="Formato" #myForm="ngFormName">
<h1>Preencha o formulário para se juntar à nossa comunidade!</h1>
<classe div="entradas de formulário">
<etiqueta para ="nome do usuário" classe="rótulo de formulário">Nome do usuário:</label>
<entrada
 id="nome do usuário"
 tipo="texto"
aula="form-input"
 espaço reservado="Insira nome de usuário"
 nome="nome do usuário"
 ngModel
 requerido
 #username="ngModel"
 />
<p *ngSe="nome de usuário.inválido && nome de usuário.tocou">Nome de usuário (necessário</p>
</div>
<classe div="entradas de formulário">
<etiqueta para ="senha" classe="rótulo de formulário">Senha:</label>
<entrada
 id="senha"
 tipo="senha"
 nome="senha"
aula="form-input"
 espaço reservado="Digite a senha"
 ngModel
 requerido
 #senha="ngModel"
 [(ngModel)]="modelo.senha"
 />
<p *ngSe="Senha inválida && senha.tocado">Senha requerida</p>
</div>
<classe div="entradas de formulário">
<etiqueta para ="validar senha" classe="rótulo de formulário">Senha:</label>
<entrada
 id="Confirme sua senha"
 tipo="senha"
 nome="Confirme sua senha"
aula="form-input"
 espaço reservado="Confirme sua senha"
 ngModel
 requerido
 #senha2="ngModel"
 ngValidateEqual="senha"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && senha2.inválida">
<p *ngSe="password2.hasError('não igual') && senha.válida">
 Senhas Faznãopartida
</p>
</div>
</div>
<botão
aula="form-input-btn"
 tipo="enviar"
 [desativado]="meuFormulário.inválido"
 roteadorLink="/success"
>
 Inscrever-se
</button>
</form>
</div>

Reagir Modelo HTML

o Signup.js arquivo contém o seguinte código:

importar Reagir a partir de "reagir";
importar useFormulário a partir de "../useForm";
importar validar a partir de "../validateData";
importar "./Signup.css"
const Inscrição = ({submitForm}) => {
const {handleChange, valores, handleSubmit, errors} = useForm( submitForm, validate);
Retorna (
<div className="conteúdo do formulário">
<formulário className="Formato" onSubmit={handleSubmit}>
<h1>Preencha o formulário para se juntar à nossa comunidade!</h1>
<div className="entradas de formulário">
<rótulo htmlPara="nome do usuário" className="rótulo de formulário">Nome do usuário:</label>
<entrada
 id="nome do usuário"
 tipo="texto"
 nome="nome do usuário"
 className="entrada de formulário"
 espaço reservado="Insira nome de usuário"
 value={values.username}
 onChange={handleChange}
 />
{errors.username &&<p>{errors.username}</p>}
</div>
<div className="entradas de formulário">
<rótulo htmlPara="senha" className="rótulo de formulário"> Senha: </label>
<entrada
 id="senha"
 tipo="senha"
 nome="senha"
 className="entrada de formulário"
 espaço reservado="Digite a senha"
 valor={valores.senha}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</p>}
</div>
<div className="entradas de formulário">
<rótulo htmlPara="validar senha" className="rótulo de formulário"> Senha: </label>
<entrada
 id="validar senha"
 tipo="senha"
 nome="validar senha"
 className="entrada de formulário"
 espaço reservado="Confirme sua senha"
 valor={valores.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<botão className="form-input-btn" tipo="enviar">Inscrever-se</button>
</form>
</div>
 )
}
exportarpredefinição Inscrever-se;

Você notará que ambos os aplicativos usam código HTML básico, exceto por algumas pequenas diferenças. Por exemplo, o aplicativo Angular usa o atributo “class” padrão para identificar classes CSS. O React usa sua própria propriedade “className” customizada. O React transforma isso no atributo “class” padrão na saída final. A interface do usuário desempenha um papel importante no sucesso de qualquer aplicativo. Como ambos os aplicativos usam a mesma estrutura HTML e nomes de classe, ambos os aplicativos podem usar a mesma folha de estilo.

Todas as propriedades não padrão nos modelos acima estão relacionadas à validação.

Criando a validação de formulário para o aplicativo Angular

Para acessar as propriedades de validação que fazem parte da abordagem orientada por modelo do Angular, você precisará importar o Módulo de formulários no app.module.ts Arquivo.

O arquivo app.module.ts

importar { NgModule } a partir de '@angular/core';
importar { FormsModule } a partir de '@angular/forms';
importar { BrowserModule } a partir de '@angular/plataforma-navegador';
importar { ValidateEqualModule } a partir de 'ng-validate-igual'
importar { AppRoutingModule } a partir de './app-routing.module';
importar { AppComponent } a partir de './app.component';
importar { FormSignupComponent } a partir de './form-signup/form-signup.component';
importar { FormSuccessComponent } a partir de './form-success/form-success.component';
@NgModule({
 declarações: [
 AppComponent,
 FormSignupComponent,
 Componente FormSuccess
 ],
 importações: [
 BrowserModule,
 Módulo de formulários,
 ValidateEqualModule,
 AppRoutingModule
 ],
provedores: [],
inicialização: [AppComponent]
})
exportaraulaAppModule{ }

Ao importar o Módulo de formulários no arquivo acima, agora você tem acesso a várias propriedades de validação diferentes. Você precisará adicionar o ngModel aos campos de entrada do modelo HTML Angular. Se você olhar para o modelo Angular acima, verá que cada um dos elementos de entrada tem essa propriedade.

o Módulo de formulários e ngModel dar ao desenvolvedor acesso a propriedades de validação, como válido e inválido. A seção de parágrafo do modelo HTML Angular usa o #username="ngModel" propriedade. Ele produz um aviso se os dados no campo de entrada forem inválidos e o usuário os tiver alterado.

No app.module.ts arquivo, você também verá o ValidateEqualModule, que compara as duas senhas. Para fazer isso, você precisará criar um objeto de modelo no form-signup.component.ts Arquivo.

O arquivo form-signup.component.ts

importar { Componente, OnInit } a partir de '@angular/core';
@Componente({
 seletor: 'inscrição no formulário de aplicativo',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
exportar aulaFormSignupComponentimplementaOnInit{
construtor() { }
 ngOnInit(): vazio {}
 modelo = {
 senha: nulo,
 Confirme sua senha: nulo
 };
}

A segunda senha no modelo HTML Angular usa o modelo objeto no arquivo acima, para comparar seu valor com a primeira senha.

o Desativado A propriedade no botão de envio garante que ele permaneça inativo até que cada campo de entrada contenha dados válidos. O envio do formulário leva o usuário a uma página de sucesso com o auxílio do roteador da Angular.

O arquivo app.routing.module.ts

importar { NgModule } a partir de '@angular/core';
importar { RouterModule, Rotas } a partir de '@angular/roteador';
importar { FormSignupComponent } a partir de './form-signup/form-signup.component';
importar { FormSuccessComponent } a partir de './form-success/form-success.component';
const rotas: Rotas = [{
 caminho: '',
 componente: FormSignupComponent
},{
 caminho: 'sucesso',
 componente: FormSuccessComponent
}];
@NgModule({
importações: [RouterModule.forRoot (rotas)],
exportações: [RouterModule]
})
exportaraulaAppRoutingModule{ }

O módulo de roteamento acima contém dois caminhos; o caminho principal para o formulário e um caminho de sucesso para o componente de sucesso.

O arquivo app.component.html

<saída do roteador></router-outlet>

A saída do roteador no arquivo de componente do aplicativo acima permite que o usuário navegue facilmente entre os formulário de inscrição e forma-sucesso componentes usando URLs.

Criando a validação de formulário para o aplicativo React

exportarpredefiniçãofunçãovalidar dados(valores) {
deixar erros = {}
E se (!valores.nome do usuário.aparar()) {
 errors.username = "Nome de usuário (necessário";
 }
E se (!valores.senha) {
 erros.senha = "Senha requerida";
 }
E se (!valores.passwordvalidate) {
 errors.passwordvalidate = "Senha requerida";
 } senãoE se (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Senhas Faznãopartida";
 }
Retorna erros;
}

o validData.js arquivo contém o código acima. Ele monitora cada campo de entrada no formulário para garantir que cada campo contenha dados válidos.

O arquivo useForm.js

importar {useState, useEffect} a partir de 'reagir';
const useForm = (retorno de chamada, validar) => {
const [valores, setValues] = useState({
 nome do usuário: '',
 senha: '',
 validação de senha: ''
 });
const [erros, setErrors] = useState ({});
const [isEnviando, setIsEnviando] = useState (falso)
const handleChange = e => {
const {nome, valor} = e.destino;
setValues({
 ...valores,
[nome]: valor
 });
 }
const handleSubmit = e => {
e.preventDefault();
 setErrors (validar(valores));
 setIsEnviando(verdadeiro);
 }
 useEfeito(() => {
 if (objeto.chaves (erros).comprimento 0 && estáEnviando) {
 ligar de volta();
 }
 }, [erros, retorno de chamada, isSubmitting]);
Retorna { handleChange, valores, handleSubmit, erros };
}
exportarpredefinição useFormulário;

O costume useFormulário gancho acima determina se o usuário envia o formulário com sucesso. Este evento só ocorre se todos os dados do formulário forem válidos.

O arquivo Form.js

importar Reagir a partir de "reagir";
importar Inscrever-se a partir de "./Inscrever-se";
importar Sucesso a partir de "./Sucesso"
importar { useEstado } a partir de "reagir";
const Formulário = () => {
const [isEnviado, setIsEnviado] = useState(falso);
funçãoenviar o formulário() {
 setIsEnviado(verdadeiro);
 }
Retorna (
<div>
 {!éEnviado? (<Inscrição submitForm={submitForm} />): (<Sucesso />)}
</div>
 )
}
exportarpredefinição Forma;

o Forma O componente acima alterna a visualização entre o Inscrever-se componente e o Sucesso componente se o formulário for enviado.

O arquivo App.js

importar Forma a partir de "./components/Form";
funçãoAplicativo() {
Retorna (
<div className="Aplicativo">
<Forma/>
</div>
 );
}
exportarpredefinição Aplicativo;

A interface do usuário do aplicativo angular

A interface do usuário exibe um formulário com uma entrada para o nome de usuário e duas entradas de senha.

Quando o formulário contém dados inválidos, as páginas exibem mensagens de erro:

Quando o formulário contém dados válidos, o usuário pode enviá-lo com sucesso:

A interface do aplicativo React

Quando o formulário contém dados inválidos:

Quando o formulário contém dados válidos:

Semelhanças e diferenças entre React e Angular

As estruturas Angular e React são notavelmente semelhantes e capazes de produzir resultados idênticos. No entanto, as ferramentas que você pode usar para obter esses resultados serão diferentes. Angular é uma plataforma de desenvolvimento que fornece acesso a ferramentas como um roteador e uma biblioteca de formulários. React requer um pouco mais de criatividade do desenvolvedor para alcançar os mesmos resultados.

Reagir vs. Angular: Por que o React é muito mais popular?

Leia a seguir

Sobre o autor