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);