Scribd
Upload
14 views

Angular App

This document provides instructions for creating Angular components, installing Bootstrap, creating services, and consuming a Web API from the backend of an Angular application. It describes using the Angular CLI to generate components and services, configuring Bootstrap in angular.json, routing components in app-routing modules, enabling CORS in a Web API, and making GET requests using HttpClient.

Uploaded by

NELSON MAURICIO HERNANDEZ GOMEZ
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Angular App

This document provides instructions for creating Angular components, installing Bootstrap, creating services, and consuming a Web API from the backend of an Angular application. It describes using the Angular CLI to generate components and services, configuring Bootstrap in angular.json, routing components in app-routing modules, enabling CORS in a Web API, and making GET requests using HttpClient.

Uploaded by

NELSON MAURICIO HERNANDEZ GOMEZ
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Crear componente

ng g c ruta con nombre Ejemplo ng g c components/home

Instalar bootstrap

npm install bootstrap –save

npm install jquery –save

npm install popper.js –save

angular.json

-> styles node_modules/bootstrap/dist/css/bootstrap.min.css

-> scripts node_modules/jquery/dist/jquery.slim.min.js

-> scripts node_modules/popper.js/dist/umd/popper.min.js

-> scripts node_modules/bootstrap/dist/js/bootstrap.min.js

app.component.html

Se agrega el componente que se desea visualizar Ejemplo <app-home></app-home>

app.routes.ts
app.module.ts -> tratar de tener todo ordenado por secciones

Crear servicio

ng g s ruta con nombre Ejemplo ng g s services/home

app.module -> import {HomeService} from './services/home.service';

providers[HomeService]

API

Nuget Microsoft.AspNet.WebApi.Cors

App_Start/WebApiConfig

public static void Register(HttpConfiguration config)

EnableCorsAttribute cors = new EnableCorsAttribute("http://localhost:4200", "*",

"GET,POST");

config.EnableCors(cors);

}
Consumir Web Api desde Back

Nuget Microsoft.AspNet.WebApi.Client

using (var client = new HttpClient())


{
client.BaseAddress = new Uri("http://localhost:85/api/");

var responseTask = client.GetAsync("prueba/ProbarApiGet");


responseTask.Wait();

var result = responseTask.Result;


if (result.IsSuccessStatusCode)
{
var readTask = result.Content.ReadAsAsync<string>();
readTask.Wait();

resultado = readTask.Result;
}
}

You might also like