@andes/plex

Plex: UI/UX para ANDES

Plex es un conjunto de componentes de UI/UX para el proyecto ANDES.

Instalación

Crear una nueva aplicación con angular-cli
```
ng new my-app
cd my-app
```
Descargar desde npm
```
npm install andes-plex --save
```
Renombrar el archivo src/styles.css a src/styles.less y editarlo para vincular al archivo .less de Plex
```
@import '~andes-plex/src/lib/styles.less';
```
Crear un nuevo archivo src/styles.sass y editarlo para vincular al archivo .sass de Plex
```
@import '~andes-plex/src/lib/styles.sass';
```
Registrar ambos archivos de estilos en angular-cli.json, quitando styles.css
```
...
"styles": [
   "styles.less",
   "styles.sass"
],
...
```
Modificar app.component.html con el siguiente contenido:
```
<plex-app>  
</plex-app>
```

Crear un componente home.component.ts con el siguiente contenido:

import { Component } from '@angular/core';
 
@Component({
  template: 'Hello World',
})
export class HomeComponent {
}

Crear el archivo app.routing.ts y registrar el componente:

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { HomeComponent } from './home.component';
 
const appRoutes: Routes = [
 { path: '**', component: HomeComponent } 
];
 
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

En app.module.ts importar PlexModule y registrar los routings y PlexService:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PlexModule } from 'andes-plex/src/lib/module';
import { PlexService } from 'andes-plex/src/lib/core/service';
import { routing, appRoutingProviders } from './app.routing';
 
// Components
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
 
@NgModule({
 declarations: [
   AppComponent,
   HomeComponent
 ],
 imports: [
   BrowserModule,
   FormsModule,
   HttpModule,
   PlexModule,
   routing
 ],
 providers: [
   PlexService,  
   appRoutingProviders  
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }