Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alfredo1995/spa
Angular 7 being efficiently consumed by the REST API created with ASP.NET Core WebAPI, enabling powerful interactions with data.
https://github.com/alfredo1995/spa
angular javascript microservice spa
Last synced: about 18 hours ago
JSON representation
Angular 7 being efficiently consumed by the REST API created with ASP.NET Core WebAPI, enabling powerful interactions with data.
- Host: GitHub
- URL: https://github.com/alfredo1995/spa
- Owner: alfredo1995
- Created: 2023-06-05T18:32:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-14T09:02:03.000Z (6 months ago)
- Last Synced: 2024-05-14T10:25:56.217Z (6 months ago)
- Topics: angular, javascript, microservice, spa
- Language: TypeScript
- Homepage:
- Size: 208 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
inicialização front end ( abrindo aplicação)
npm install
npm update
npm start
npm s
inicialização back end (abrindo swagger)
ctrl + shift + b
inicializar na DevIO.Api
soluções para possiveis erro na depedencia do front
npm cache clean --force
npm pkill node
npm install
api em: https://github.com/alfredo1995/REST.git
Pronto! kkk Agora vamos ao passo a passo do desenvolvimento de SPA em Angular ;)
ng new --minimal -g MeuProjeto
Dando uma cara para aplicação
MeuProjeto > index.html
costumizar a paginia inicial index.html
Minnha Aplicação Angular
Criar templateUrl em MeuProjeto > app > app.component.ts
import { Component, inject, Injectable } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'MeuProjeto';
}
criar o app.component.html
MeuProjeto > app > app.component.html
criar html de navegação e o corpo da pagina app.component.html
Desenvolivimento SPA com Angular
Aplicação está rodando com sucesso guy
Multiplataforma
Lorem ipsum dolor
performance
Lorem ipsum dolor
Produtividade
Lorem ipsum dolor
Funcionalidade
Lorem ipsum dolor
Definindo os componentes de navegação
criar component para cada parte da aplicação ( menu , corpo e rodape )
terminal git bash
ng g c navegacao/menu
MeuProjeto > navegacao> menu > menu.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html'
})
export class MenuComponent { }
terminal git bash
ng g c navegacao/home
MeuProjeto > navegacao> home > home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent { }
terminal git bash
ng g c navegacao/footer
MeuProjeto > navegacao> footer > footer.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})
export class FooterComponent { }
extrair a parte de navegação do app.component.html
criar dentro da pasta menu > menu.component.html > jogar o arquivo nav extraido
extrair a parte de do app.component.html
Desenvolivimento SPA com Angular
Aplicação está rodando com sucesso
Multiplataforma
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI
performance
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI
Produtividade
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI
Funcionalidade
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI
criar dentro da pasta home > home.component.html > jogar o arquivo nav extraido
Desenvolivimento SPA com Angular
Aplicação está rodando com sucesso
Multiplataforma
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo
utilizado desde o século XVI
performance
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo
utilizado desde o século XVI
Produtividade
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo
utilizado desde o século XVI
Funcionalidade
Lorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo
utilizado desde o século XVI
extrair a parte de do app.component.html
criar dentro da pasta home > home.component.html > jogar o arquivo nav extraido
chamando os component em app.component.html
definindo roteamento e configurações
abrir git bash na pasta da aplicação
criar component
ng g c institucional/sobre
git bash
ng g c institucional/contato
criar arquivo de configuração de rotas em app > app.routes.ts
import { RouteConfigLoadStart, Routes } from "@angular/router";
import { ContatoComponent } from "./institucional/contato/contato.component";
import { SobreComponent } from "./institucional/sobre/sobre.component";
import { HomeComponent } from "./navegacao/home/home.component";
export const rootRouterConfig: Routes =
[
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'contato', component: ContatoComponent},
{path: 'sobre', component: SobreComponent}
];
configurar a rota criada no model
MeuProjeto > app > app.modules.ts
importa o caminho da rota e fixar os provides em app.modules.ts
import { RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
imports: [
BrowserModule,
[RouterModule.forRoot(rootRouterConfig, { useHash: false})]
],
@NgModule({
imports: [
BrowserModule,
[RouterModule.forRoot(rootRouterConfig, { useHash: false})]
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
substuir a pela diretiva de navegação
app.component.html =
criar views do sobre e contato
app > sobre > sobre.component.html
app > contato > contato.component.html
costumizar view do component contato.component.html
Contato!
Aqui você pode colocar um mapa para informar seu local de trabalho.
Nome
E-mail
Telefone
Mensagem
Enviar
costumizar view do component sobre.component.html
Quem somos
Utilize a criatividade aqui!
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn More
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn More
Our team
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Manuella Nevoresky
CEO -
Founder
Samuel Hardy
CEO - Founder
Tom Sunderland
CEO -
Founder
John Tarly
CEO - Founder
linkar as view nos menus de navegações
menu.component.html
link diretivar trocando os href pelos [routerLink]="['/']" em menu.component.html
Sobre
Contato
menu.component.html
dataBind
ng g c demos/DataBinding
app.routes.ts
{path: 'feature-data-binding', component: DataBindingComponent}
criar interporlação app > demos > data-binding.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-data-binding',
templateUrl: './data-binding.component.html',
styles: [
]
})
export class DataBindingComponent {
public contadorClique: number = 0;
}
interpolar app > demos > data-binding.component.html
interpolação
o numero de cliques é: {{contadorClique}}
exibição data-binding.component.html
interpolação
o numero de cliques é: {{contadorClique}}
Property Binding
Event Binding
Clique em Mim!
Two-way Binding
seu nome é: {{nome}}
exibição data-binding.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-data-binding',
templateUrl: './data-binding.component.html',
styles: [
]
})
export class DataBindingComponent {
public contadorClique: number = 0;
public nome: string = "";
adicionarClique(){
this.contadorClique++;
}
keyUp(event: any){
this.nome = event.target.value;
}
}
importando o FormsModule no app.modules.ts
import { FormsModule } from '@angular/forms';
import { Server } from 'http'
import { endianness } from 'os'
import { ProdutoService } from 'src/app/produtos/produtos.service'
imports: [
BrowserModule,
FormsModule,
consumindo dados do fake back end
npm install -g json-server
Rodando o npm json server
Set-ExecutionPolicy Unrestricted -Scope CurrentUser
Se necessario abra o PowerShell em modo ADM
aperta Windows + X
Set-ExecutionPolicy Unrestricted -Scope CurrentUser
execute os comando json novamente
npm install -g json-server
Set-ExecutionPolicy Unrestricted -Scope CurrentUser
criar o serviço responsalve por acessar o fake back endianness
criar pasta > produtos > ProdutoService.cs
declarar a class ProdutoService.cs
import { Injectable } from '@angular/core';
import { ListaProdutoComponent } from 'src/app/produtos/lista-produto/lista-produto.component'
@Injectable()
export class ProdutoService{}
fixar a url do end point (service)
@Injectable()
export class ProdutoService {
protected UrlServiceV1: string = "http://localhost:3000/";
}
}
criar metodo para retornar uma ListaProdutoComponent
@Injectable()
export class ProdutoService {
protected UrlServiceV1: string = "http://localhost:3000/";
obterProdutos() : Observable {
return this.http
.get(this.UrlServiceV1 + "produtos");
}}
acesando end point externo usando a class HttpClient ( injectar no construtor)
@Injectable()
export class ProdutoService {
constructor(private http: HttpClient) { }
protected UrlServiceV1: string = "http://localhost:3000/";
obterProdutos() : Observable {
return this.http
.get(this.UrlServiceV1 + "produtos");
}
}
Class ProdutoService.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Produto } from './produto';
import { Observable } from 'rxjs';
@Injectable()
export class ProdutoService {
constructor(private http: HttpClient) { }
protected UrlServiceV1: string = "http://localhost:3000/";
obterProdutos() : Observable {
return this.http
.get(this.UrlServiceV1 + "produtos");
}
}
consumindo o serviço atraves do componente
app.routes.ts
adiciona nas rotas o caminho do produto
{ path: 'produtos', component: ListaProdutoComponent },
{ path: 'produto-detalhe/:id', component: ListaProdutoComponent }
app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './navegacao/home/home.component';
import { ContatoComponent } from './institucional/contato/contato.component';
import { SobreComponent } from './institucional/sobre/sobre.component';
import { DataBindingComponent } from './demos/data-binding/data-binding.component';
import { ListaProdutoComponent } from './produtos/lista-produto/lista-produto.component';
export const rootRouterConfig: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent},
{ path: 'contato', component: ContatoComponent },
{ path: 'sobre', component: SobreComponent },
{ path: 'feature-data-binding', component: DataBindingComponent },
{ path: 'produtos', component: ListaProdutoComponent },
{ path: 'produto-detalhe/:id', component: ListaProdutoComponent }
];
criar view de produto lista-produto.component.html
{{ produto.nome | titlecase }}
Promoção!
Por apenas:
De:
{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}
Por: {{ produto.valorPromo | currency:'BRL':true:'1.2-2':'pt' }}
{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}
receber os dados e gerar uma Lista em ListaProdutoComponent.ts
import { Component, OnInit } from '@angular/core';
import { Produto } from '../produto';
import { ProdutoService } from '../produtos.service';
@Component({
selector: 'app-lista-produto',
templateUrl: './lista-produto.component.html'
})
export class ListaProdutoComponent implements OnInit {
constructor(private produtoService: ProdutoService) { }
public produtos: Produto[];
ngOnInit() {
this.produtoService.obterProdutos()
.subscribe(
produtos => {
this.produtos = produtos;
console.log(produtos);
},
error => console.log(error)
);
}
}
adicionar o suporte HttpClient no modulo app.module.ts
import { HttpClientModule } from '@angular/common/http';
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
[RouterModule.forRoot(rootRouterConfig, { useHash: false})]
],
class app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';
registerLocaleData(localePt);
import { AppComponent } from './app.component';
import { MenuComponent } from './navegacao/menu/menu.component';
import { HomeComponent } from './navegacao/home/home.component';
import { FooterComponent } from './navegacao/footer/footer.component';
import { SobreComponent } from './institucional/sobre/sobre.component';
import { ContatoComponent } from './institucional/contato/contato.component';
import { rootRouterConfig } from './app.routes';
import { DataBindingComponent } from './demos/data-binding/data-binding.component';
import { ProdutoService } from './produtos/produtos.service';
import { ListaProdutoComponent } from './produtos/lista-produto/lista-produto.component';
@NgModule({
declarations: [
AppComponent,
MenuComponent,
HomeComponent,
FooterComponent,
SobreComponent,
ContatoComponent,
DataBindingComponent,
ListaProdutoComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
[RouterModule.forRoot(rootRouterConfig, { useHash: false})]
],
providers: [
ProdutoService,
{provide: APP_BASE_HREF, useValue: '/'}
],
bootstrap: [AppComponent]
})
export class AppModule { }
informar os dados de cada Produto usando interpoletion
{{ produto.nome | titlecase }}
Promoção!
Por apenas:
De:
{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}
Por: {{ produto.valorPromo | currency:'BRL':true:'1.2-2':'pt' }}
lista-Produto.component.Html
{{ produto.nome | titlecase }}
Promoção!
Por apenas:
De:
{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}
Por: {{ produto.valorPromo | currency:'BRL':true:'1.2-2':'pt' }}
{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}