Instantly share code, notes, and snippets.

Embed
What would you like to do?
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
model: usuarioModel[];
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http
.get<usuarioModel[]>('http://localhost:5000/api/values')
.subscribe(res => {
this.model = res;
});
}
}
export interface usuarioModel {
id: number;
nombre: string;
}
<h2>Lista de usuarios:</h2>
<ul *ngIf="model">
<li *ngFor="let usuario of model">
<h2>{{usuario.nombre}}</h2>
</li>
</ul>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '../../node_modules/@angular/common/http';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
C:\..> cd angular6_webapi
C:\..> npm install -g @angular/cli
C:\Users\mpetrini\AppData\Roaming\npm\ng -> C:\Users\mpetrini\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
> @angular/cli@6.0.8 postinstall C:\Users\mpetrini\AppData\Roaming\npm\node_modules\@angular\cli
> node ./bin/ng-update-message.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @angular/cli@6.0.8
added 2 packages from 4 contributors, removed 8 packages and updated 21 packages in 97.429s
C:\..\angular6_webapi>ng new front
CREATE front/angular.json (3539 bytes)
CREATE front/package.json (1309 bytes)
CREATE front/README.md (1022 bytes)
CREATE front/tsconfig.json (384 bytes)
CREATE front/tslint.json (2805 bytes)
CREATE front/.editorconfig (245 bytes)
CREATE front/.gitignore (503 bytes)
...
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseCors(opt => opt.WithOrigins("http://localhost:4200"));
app.UseMvc();
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace api.Controllers
{
[Route("api/[controller]")]
public class ValuesController : Controller
{
// GET api/values
[HttpGet]
public IEnumerable<dynamic> Get()
{
return new List<dynamic>() { new { Id = 1, Nombre = "usuario" }, new { Id = 2, Nombre = "usuario2" }, new { Id = 3, Nombre = "usuario3" }, };
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment