Plex es un conjunto de componentes de UI/UX para el proyecto ANDES.
-
Crear una nueva aplicación con angular-cli
ng new my-app cd my-app
-
Descargar desde npm
npm install @andes/plex --save
-
Crear un nuevo archivo
src/styles.sass
y editarlo para vincular al archivo.sass
de Plex@import '~andes-plex/src/lib/styles.sass';
-
Registrar en
angular-cli.json
los siguiente archivos:... "styles": [ "styles.sass", ], "scripts": [ "../node_modules/intro.js/intro.js" ], ...
-
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
importarPlexModule
y registrar los routings y el servicioPlex
:import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { Plex, PlexModule } from '@andes/plex'; 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: [ Plex, appRoutingProviders ], bootstrap: [AppComponent] }) export class AppModule { }
-
Correr la aplicacion
ng serve
ng serve
-
Navegar hasta
http://localhost:4200
La siguiente secuencia de pasos permite publicar la librería en NPM:
- Incrementar la versión package.json y package-lock.json. Por ejemplo
"version": "1.1.17"
- Realizar commit con la nueva versión
- Crear un tag con la versión, tiene que ser la misma que en package.json. Por ejemplo
git tag 1.1.17
- Realizar push de los cambios
- Realizar el PR con la versión y luego mergear a Master
- Volver a Master y obtener últimos cambios
- Ejecutar
npm login
(usando las credenciales de Andes) - Ejecutar
npm publish