Rodando seu projeto Angular 2+ via Cordova

Supondo que você já fez um app angular 2+, devidamente responsivo, já consumindo JSON de um servidor de API, penso eu….Seria realmente necessário refazer (DRY) outro projeto de front-end para criar um mobile hibrido rodando dentro de uma web view? A resposta é não! É possível empacotar seu projeto angular 2+ via Cordova e disponibilizar nas lojas via hibrido reusando o mesmo código. Veja nesse artigo um HOW TO de como fazer tal operação. Quando sobrar um tempinho e vejo se funciona mesmo.

“Nós amamos porque Deus nos amou primeiro.” 1 João 4:19

Anúncios

Kit Componentes Angular #2

Queria usar Angular 4 mas não quero criar e customizar meu componentes. Existe provedores de kit de componentes prontos? Opaaa, claro que sim, tem grátis e pagos! :D, segue alguns ai:

Para as empresas que não querem perder seu precioso tempo fazendo componentes, faça sua escolha e bora desenvolver!

“É perigoso ter medo dos outros, mas confiar no SENHOR dá segurança.”Provérbios 29:25

Kit Componentes Angular #1

Queria usar Angular 4 mas não quero criar e customizar meu componentes. Existe provedores de kit de componentes prontos? Opaaa, claro que sim :D, segue alguns ai:

Para as empresas que não querem perder seu precioso tempo fazendo componentes, faça sua escolha e bora desenvolver!

“É perigoso ter medo dos outros, mas confiar no SENHOR dá segurança.”Provérbios 29:25

Angular4 com PrimeNG

Nas últimas semanas tive estudando e validando uma nova arquitetura com o Angular4 + PrimeNG. Como a coisa é muito nova, tem muita informações desencontrada, documentação ainda não é suficiente, ta tudo sempre mudando rápido, vira e meche agente fica patinando. Assim, segue abaixo então os passos corretos para você criar, instalar e rodar um projeto Angular4 com kit de componentes visuais PrimeNG.

Passo 1

Cria o projeto angular com angular-cli: ng new lab-angular4-primeng

Passo 2

Instale o primeNg: npm install primeng –save

Passo 3

Instale o font-awesome usado pelo primeNG: npm install font-awesome –save

Passo 4

Instale o animations usado pelo primeNG: npm install @angular/animations –save

Passo 5

No modulo principal, ative o modulo BrowserAnimationsModule de funcionamento do primeNG:

2

Passo 6:

Acrescente os css’s básicos usados pelo primeNG na configuração .angular-cli.json:

x

Assim o projeto esta configurado e pronto para uso!

Passo 7

Para cada componente que você deseja usar, é necessário ativar o seu respectivo modulo dentro do modulo principal do seu projeto. Segue um exemplo ativando PanelModule e InputMaskModule:

x1

Passo 8

Crie seus componentes e adicione os widgets do primeNG a vontade! Segue um exemplo abaixo usando primeNg Panel e InputMask com mascara de telefone:

x2

Executando no navegador:

3

A partir disso,  é só elaborar sua solução e criar seu sistema 100% front-end! Até a próxima galera 🙂 .

Git

Esse projeto esta disponível no meu git.

“Tu és o meu Deus; ensina-me a fazer a tua vontade. Que o teu Espírito seja bom para mim e me guie por um caminho seguro!” Salmos 143:10