Angular Utilizando Una Plantilla

Angular utilizando una plantilla.
Instalar todo lo requerido, revisar pf.
Generar un nuevo proyecto: ng new proyecto1
Generar un componente: ng g c pages/home
Generar un componentes sin el archivo de estido ni el de pruebas: ng g c /pages/about - is –-

spec=false
Generar un componente para controlar las paginas, sin colocar en una carpeta: ng g c
/pages/mainpage about - is –-spec=false –-flat
Para crear un servicio: ng g s services/usuario –spec=false
Para crear un servicio guards (Autentificacion) : ng g g guards/auth –-spec=false
“Guards = Retorna una promesa, un observable o un booleano, que le dice al usuario si

puede entrar a una ruta o activar esa ruta. ”
1. Generar los componentes, El login debe estar a nuvel del SRC-app.

 ng g c login --spec=false -is
 ng g c nopagefound --spec=false -is
 ng g c pages/dashboard --spec=false -is
 ng g c pages/clientes/nuevocliente --spec=false
 ng g c pages/clientes/listacliente --spec=false
 ng g c shared/header --spec=false ///Encabezado
 ng g c shared/sidebar --spec=false ///La barra lateral
 ng g c shared/breadcrumbs --spec=false //Para la infamación de las paginas
2. Crear los servicios:
 ng g s servicios/shared --spec=false
 ng g s servicios/sidebar --spec=false
3. Agregar las librerías externas necesarias del template.
 Copiar las carpetas del main: CSS, JS, SCSS y pegar en src/assets, plugins
4. Buscar la página que desea copiar la plantilla.
 En este caso buscamos la pagina que contenga los componentes, pero este
blanco. Pages-blank.html.
 Abrir el documento en visual o en Notepad++ para analizar el código y sacar las
partes que se utilizaran.
o Para este caso se pasa el icono al index.html
 <link rel="icon" type="image/png" sizes="16x16"
href="../assets/images/favicon.png">
 !-- Bootstrap Core CSS -->
<link href="../assets/plugins/bootstrap/css/bootstrap.min.css"
rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

<link href="css/colors/default-dark.css" id="theme"
rel="stylesheet">
5. Copiar las librerias de los plugins en el index.
 


<script src="../assets/plugins/jquery/jquery.min.js"></script>

<script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<script src="js/perfect-scrollbar.jquery.min.js"></script>

<script src="js/waves.js"></script>

<script src="js/sidebarmenu.js"></script>

<script src="../assets/plugins/sticky-kit-master/dist/sticky
kit.min.js"></script>
<script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>

<script src="js/custom.min.js"></script>
6. Para crear el sidebar, header y breadcrumbs.
 Copiar la clase de la plantilla en el body del index html.
i. <body class="fix-header card-no-border fix-sidebar">
 Colocar la precarga antes de que aparezca la pantalla el código seguido del
body componen y antes del <app-root></app-root>.
i. <div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Admin Pro</p>
</div>
</div>
7. Luego si, ya no trabajaremos en el index, ahora a darle forma a la página.
8. En App.component.htm colocal la clase general de la plantilla:
<div id="main-wrapper">
</div>
9. Copiar el código del encabezado en el componente del encabezado que creamos.
 Colocar en el app.component.html para que salga el encabezado:
<app-header></app- header >
 Debera escoger solo que necesita, y borrar lo que no requiere la pagina, al
igual que cambiar los direcctorios de imágenes,
 Adicionalmente deberá crar o colocar las imágenes del encabezado
personalizado.
 Cerrar el header luego de personalizar lo que se necesita.
10. Ahora Copiar de la plantilla el sidebar, (Page-blanck.html)
 Colocar en el app.component.html para que salga el sidebar:
<app-sidebar></app-sidebar>
 Personalizar el sidebar, y dejar solo lo que se requiere.
11. Colocar en el app.component.html es parte de la plantilla necesaria.
<div class="page-wrapper">
<div class="container-fluid">
</div>
</div>
12. Luego de la plantilla sacar el breadcrumbs y colocar en el html del componente.
 Colocar el <app-breadcrumbs> </app-breadcrumbs> dentro del container-
fluid en el app.components.html
13. En el app component colocar el que seria el contenido de las rutas:
<router-outlet> </router-outlet>
14. Para continuar procedemos a crear las rutas principales del proyecto.
 Importar los componentes:
import { LoginComponent } from './login/login.component';
import { NopagefoundComponent } from

'./shared/nopagefound/nopagefound.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
 Generar las rutas:

const routes: Routes = [
{path: 'Dashboar', component: DashboardComponent },
{path: 'login', component: LoginComponent },
{path: ' ', component: DashboardComponent },
{path: '**', component: NopagefoundComponent }
];
 Exportar:
export class AppRoutingModule {useHash: true }
15. Separar el login del template.


Angular Utilizando Una Plantilla

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Angular Utilizando Una Plantilla

Caricato da

Copyright:

Formati disponibili

Angular utilizando una plantilla.

Instalar todo lo requerido, revisar pf.

Generar un nuevo proyecto: ng new proyecto1

Generar un componente: ng g c pages/home

Generar un componentes sin el archivo de estido ni el de pruebas: ng g c /pages/about - is –-

Para crear un servicio: ng g s services/usuario –spec=false

Para crear un servicio guards (Autentificacion) : ng g g guards/auth –-spec=false

“Guards = Retorna una promesa, un observable o un booleano, que le dice al usuario si

1. Generar los componentes, El login debe estar a nuvel del SRC-app.

import { LoginComponent } from './login/login.component';

import { NopagefoundComponent } from

import { DashboardComponent } from './pages/dashboard/dashboard.component';

 Generar las rutas:

Potrebbero piacerti anche