Scribd
Upload
114 views

Manual 1 Frontend Angular

The document provides instructions for installing and configuring an Angular dashboard using the AdminLte template. It involves: 1) Installing Angular CLI and downloading the AdminLte template 2) Generating Angular components for views like posts, installing dependencies 3) Creating Angular interfaces and services for models like Post 4) Configuring TypeScript and generating services to interface with API

Uploaded by

Edicson Pineda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
114 views

Manual 1 Frontend Angular

The document provides instructions for installing and configuring an Angular dashboard using the AdminLte template. It involves: 1) Installing Angular CLI and downloading the AdminLte template 2) Generating Angular components for views like posts, installing dependencies 3) Creating Angular interfaces and services for models like Post 4) Configuring TypeScript and generating services to interface with API

Uploaded by

Edicson Pineda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Guía de instalación y configuración del dashboard y diseño lógico del FrontEnd utilizando

angular
1) Instalar el angular (https://cli.angular.io/)
npm install -g @angular/cli
2) Descargar el dashborad modelo AdminLte
https://github.com/erdkse/adminlte-3-angularType equation here.
3) Instalar los componentes desde la carpeta descomprimida
npm install
4) Borrar todo los que esta en el archivo
Tsconfig.json ubicado en el directorio raíz
Copiar
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}

5) Para cada uno de los modelos crear un componente de la siguiente manera

ng generate component views/post/index

ng generate component views/post/view

ng generate component views/post/create

ng generate component views/post/edit


6) Crear los modelos en angular de la siguiente manera
Ng generate interface post/post
y lo crear de la siguiente manera para cada modelo

export interface Post {

id: number;

title: string;

body: string;

7) Crear los servicios


ng generate service post/post

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';

import { catchError } from 'rxjs/operators';

import { Post } from './post';

@Injectable({

providedIn: 'root'

})

export class PostService {


private apiURL = "https://jsonplaceholder.typicode.com";

httpOptions = {

headers: new HttpHeaders({

'Content-Type': 'application/json'

})

constructor(private httpClient: HttpClient) { }

getAll(): Observable<Post[]> {

return this.httpClient.get<Post[]>(this.apiURL + '/posts/')

.pipe(

catchError(this.errorHandler)

create(post): Observable<Post> {

return this.httpClient.post<Post>(this.apiURL + '/posts/', J


SON.stringify(post), this.httpOptions)

.pipe(

catchError(this.errorHandler)

}
find(id): Observable<Post> {

return this.httpClient.get<Post>(this.apiURL + '/posts/' + i


d)

.pipe(

catchError(this.errorHandler)

update(id, post): Observable<Post> {

return this.httpClient.put<Post>(this.apiURL + '/posts/' + i


d, JSON.stringify(post), this.httpOptions)

.pipe(

catchError(this.errorHandler)

delete(id){

return this.httpClient.delete<Post>(this.apiURL + '/posts/'


+ id, this.httpOptions)

.pipe(

catchError(this.errorHandler)

}
errorHandler(error) {

let errorMessage = '';

if(error.error instanceof ErrorEvent) {

errorMessage = error.error.message;

} else {

errorMessage = `Error Code: ${error.status}\nMessage: ${er


ror.message}`;

return throwError(errorMessage);

You might also like