angularjs – devs4j

Databinding en Angular 4 Parte 2 Event binding

octubre 26, 2017 por raidentrance, posted in Español

En este post se explicará Event Binding y será utilizado para disparar eventos desde la vista html hacía el controller en Typescript, para esto crearemos un nuevo componente llamado events, veamos los pasos a seguir para hacerlo.

1 Crear el componente events

Para crear el componente events ejecutaremos el siguiente comando:

ng generate component events

Una vez generado el componente lo incluiremos en nuestro app.component.html Con el siguiente código:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
<app-events></app-events>

Esto mostrará la siguiente vista:

2 Modificar events.component.ts

El siguiente paso será modificar el componente events.component.ts como se muestra a continuación:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {
  eventMessage = 'Where is Geeks México ?';

  ngOnInit() {
  }

  onSearchIt(){
    this.eventMessage='Geeks México is here !';
  }

}

Ahora analizaremos el código anterior:

Se creó el atributo eventMessage y se le asignó el valor Where is Geeks México ?

Se creó un método llamado onSearchIt() que al ejecutarlo cambia el valor de la variable eventMessage a ‘Geeks México is here !’

3 Modificar events.component.html

Una vez que nuestro método esta listo el siguiente paso es agregarlo a nuestro archivo events.component.html, para hacerlo utilizaremos el siguiente código:

<h3>{{eventMessage}}</h3>
<button class="btn btn-primary" (click)="onSearchIt()">Search</button>

Ahora analizaremos el código anterior:

En un título se colocará el valor del atributo eventMessage utilizando String interpolation

Cuando se oprima el botón con la leyenda Search se ejecutará el método onSearchIt() definido en typescript.

Del mismo modo que es posible utilizar el evento click utilizando la siguiente sintaxis (evento)=”método o código typescript” es posible definir otros eventos definidos en html

4 Probando todo junto

Una vez que creamos el código anterior lo siguiente será probarlo, para hacerlo ejecutaremos el comando ng serve y veremos la siguiente vista:

Una vez que se oprima el botón Search se mostrará lo siguiente:

Como se puede observar al oprimir el botón Search el título que mostraba Where is Geeks México ? Será actualizado a Geeks México is here ! Sin necesidad de actualizar ningún componente HTML.

Si tienes alguna duda o comentario no dudes en hacerlo en la sección de comentarios o en nuestras redes sociales.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

Databinding en Angular 4 Parte 1

octubre 13, 2017octubre 12, 2017 por raidentrance, posted in Español

Databinding en Angular 4 es utilizado para comunicar los templates (Archivos html) con typescript (La lógica de negocio de nuestra aplicación). Esto nos permitirá generar aplicaciones web dinámicas que puedan generar contenido diferente de acuerdo a los usuarios.

Existen distintos modos de comunicación:

Para envío de información (Typescript->HTML):Permite tomar información de nuestro código typescript, este puede obtenerlo de un servicio web o de un cálculo y desplegarlo en una pantalla HTML, realizar este envío de información es posible a través de las siguientes opciones:
- String interpolation:{{data}}
- Property binding:[property]=”data”
Para la reacción a eventos del usuario(HTML-> Typescript): Los archivos HTML son la forma en la que el usuario interactúa con una aplicación, por esto es necesario disparar eventos hacia el código que es capaz de ejecutar la lógica de negocio, para hacerlo lo haremos con lo siguiente:
- Event binding : (event)=”expression”
Combinación de ambos (Two way binding): También seremos capaces de ejecutar ambos al mismo tiempo con esto seremos capaces de disparar eventos y mostrar información al mismo del siguiente modo:
- Two way data binding : [(ngModel)]=”data”

Con esto seremos capaces de realizar la comunicación entre nuestro sitio código typescript y nuestros templates html, veamos algunos ejemplos de cada modo. Se tomará como base para este post el ejemplo Crear componentes en Angular 4.

String interpolation

String interpolation funciona muy parecido a expression language, con esto es posible tanto declarar variables en el archivo typescript e utilizarlas dentro de nuestro html como escribir cualquier expresión que pueda ser traducida a un String veamos un ejemplo editando nuestro componente posts.components:

posts.components.ts

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {
    author='@raidentrance';
    title='Angular from scratch';

    getTitle(){
        return this.title;
    }
}

Como se puede observar, dentro de nuestro componente PostsComponent declararemos 2 atributos el atributo author y el atributo title y los inicializaremos con algunos valores por defecto. Es importante mencionar que es posible declarar métodos que devuelvan el valor de alguno de nuestros atributos, muestra de esto es el método getTitle().

posts.component.html

<div align="center">
    <h3>Post List</h3>
    <div>
        <table  class="table">
            <tr>
                <th>Author Twitter</th>
                <th>Post name</th>
                <th>Post date</th>
            </tr>
            <tr>
                <td>{{author}}</td>
                <td>{{getTitle()}}</td>
                <td> {{'19/08/1988'}}</td>
            </tr>
        </table>
    </div>
</div>

Es momento de analizar el funcionamiento del archivo HTML, como se puede observar en la tabla se utilizarán los símbolos {{}} para definir que utilizaremos String interpolation y se colocarán las variables definidas dentro de nuestra clase en typescript, a demás es importante resaltar que la fecha fue declarada como una expresión String, por esto es posible colocarla dentro de nuestro String interpolation y que del mismo modo que podemos obtener el valor de un atributo podemos obtener el resultado de un método.

Property binding

Una vez que entendimos como funciona String interpolation es tiempo de entender como funciona property binding, para esto agregaremos un botón a nuestro componente posts y lo modificaremos de acuerdo a un evento dirigido por un componente typescript, veamos el ejemplo:

posts.component.ts

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {
    author = '@raidentrance';
    title = 'Angular from scratch';
    disableNewPost = true;

    constructor() {
        setTimeout(() => { this.disableNewPost = false }, 2000);
    }

    getTitle() {
        return this.title;
    }
}

Podrás notar que al código anterior se realizaron las siguientes modificaciones:

Se le agregó el atributo disableNewPost inicializado en true, con esto seremos capaces de determinar que un botón que se agregará se encontrará desactivado al principio

Se declaró un constructor el cual se ejecutará cuando se cree el objeto de nuestra clase

Se utilizó la función setTimeout() la cual definirá que una vez pasados 2 segundos se cambiará el valor de la variable disableNewPost a false lo cual permitirá que el botón se active después de este periodo de tiempo

posts.components.html

<div align="center">
    <h3>Post List</h3>

    <button class="btn btn-primery" [disabled]="disableNewPost">Create</button>
    <div>
        <table  class="table">
            <tr>
                <th>Author Twitter</th>
                <th>Post name</th>
                <th>Post date</th>
            </tr>
            <tr>
                <td>{{author}}</td>
                <td>{{getTitle()}}</td>
                <td> {{'19/08/1988'}}</td>
            </tr>
        </table>
    </div>
</div>

Al principio del archivo HTML se agregó un botón nuevo con el texto Create, como ya sabrán el tag button contiene una propiedad tipo boolean llamada disabled, con esta es posible determinar si el elemento será habilitado o no. Utilizando property binding determinaremos el valor de este atributos de acuerdo al valor del atributo disableNewPost que se encuentra en nuestro archivo typescript, con esto el botón se encontrará des habilitado durante 2 segundos y pasando esto se habilitará de nuevo sin necesidad de actualizar algún elemento del DOM.

En el siguiente post se explicarán los otros modos disponibles en Angular 4 para realizar el databinding en nuestras aplicaciones. Si tienes alguna duda o comentario no dudes en hacerlo en la sección de comentarios o en nuestras redes sociales.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

Crear componentes en Angular 4

octubre 11, 2017octubre 11, 2017 por raidentrance, posted in Español

Como se explicó en el primer post de Angular 4, la forma en la que se crea una aplicación es a través de componentes. En este post se explicará como crear componentes manualmente y haciendo uso de la CLI(Command line interface). Se tomará como base el post Configura Bootstrap en Angular 4.

Una vez que se tiene un proyecto construido veremos un componente llamado app.component que será utilizado para cargar el contenido al archivo index.html. A continuación veremos como crear componentes adicionales a nuestra aplicación.

Creación de componentes manualmente

A continuación crearemos un componente nuevo llamado posts siguiendo los siguientes pasos:

Crear un folder con el nombre del componente dentro del folder src/app/ , en este caso nuestro folder sería /src/app/posts.
Dentro del folder /src/app/posts crearemos los siguientes archivos:
- posts.component.html : Contendrá el HTML que se desplegará donde se inserte el componente
- posts.component.ts : Contendrá una clase typescript que definirá el componente.
Dentro del folder /src/app editaremos el archivo app.modules.ts para registrar el nuevo componente.

Paso 1 Editar el archivo app.component.html

El primer paso para este ejemplo será editar el archivo app.component.html con el siguiente código:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>

Con esto la aplicación se verá como se muestra en la siguiente imagen:

Paso 2: Agregar un nuevo componente

Una vez que tenemos el componente base que es app.component, el siguiente paso es crear el componente posts. Para esto seguiremos los siguientes pasos:

1.- Crear un folder vacío en el folder /src/app/ llamado posts

2.- Crear el archivo posts.components.html dentro del folder /src/app/posts.

<div align="center">
<h3>Post List</h3>
<div>
<table  class="table">
<tr>
<th>Author Twitter</th>
<th>Post name</th>
<th>Post date</th>
</tr>
<tr>
<td>@raidentrance</td>
<td>Angular from scratch</td>
<td> 10/10/2017</td>
</tr>
</table>
</div>
</div>

3.- Crear el archivo posts.components.ts dentro del folder /src/app/posts.

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {

}

Paso 3: Incluir el nuevo componente en el archivo app.modules.ts

Una vez que ya se creó el componente el siguiente paso es registrarlo dentro del archivo app.modules.ts. Para hacerlo debemos editar el archivo como se muestra a continuación:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PostsComponent } from './posts/posts.component';

@NgModule({
  declarations: [
    AppComponent,PostsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Las modificaciones que se harán al archivo app.modules.ts son las siguientes:

Incluir la sentencia import para PostsComponent desde ./posts/posts.component

Incluir PostsComponent en el objeto declarations

Paso 4: Incluir el nuevo componente en el componente principal

Para hacer esto lo único que debemos hacer es editar el archivo app.components.html Como se muestra a continuación:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
<app-posts></app-posts>

Como se puede observar,la única modificación fue agregar al final el selector de nuestro componente llamado .

Una vez concluido lo anterior la página se verá como se muestra a continuación:

Creando un componente utilizando la CLI

Crear un componente utilizando la línea de comandos es mucho más sencillo, solo debes ejecutar el siguiente comando:

ng generate component posts

Una vez hecho esto verás que todos los archivos necesarios fueron creados automáticamente y que lo único que resta es editar los archivos para tener todo listo. Si tienes alguna pregunta sobre como hacerlo tu mismo, agrégala a los comentarios.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

Configura Bootstrap en Angular 4

septiembre 12, 2017 por raidentrance, posted in Español

En este post se explicará como configurar bootstrap en una aplicación de Angular 4, para esto se tomará como base la aplicación creada en el post Introducción a Angular JS en español.

Paso 1 : Ir al folder del proyecto

El primer paso es, haciendo uso de la linea de comandos posicionarse en el directorio que contiene nuestro proyecto de angular:

cd angular-js-example

Y ejecutar el siguiente comando :

npm install --save bootstrap

Una vez que el comando termina de ejecutarse, bootstrap estará disponible en el folder ../node_modules/bootstrap/dist/css/bootstrap.min.css .

Paso 2: Incluir el css en Angular

Para hacer esto el siguiente paso es editar el archivo angular-cli.json e incluir en el arreglo de styles el css de bootstrap:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

Paso 3: Probar todo junto

El tercer y último paso es probar todo junto, para esto simplemente ejecutaremos de nuevo nuestro servidor de angular utilizando el comando:

ng serve

Con esto tu aplicación tendrá soporte para bootstrap y ya serás capaz de usarlo en cualquier parte de tu aplicación.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

Introducción a Angular JS en español

agosto 25, 2017 por raidentrance, posted in Español

Angular es un framework de Javascript que permite crear reactive single page applications (SPAs), pero ¿qué es una single page application?, Es una aplicación en la que puedes navegar y verás en la url que son páginas diferentes pero es solo un archivo html.

Javascript es más rápido que muchos frameworks como JSF or Struts ya que no necesita hacer una petición al servidor por cada cambio que se quiere hacer a la pagina, en dado caso que necesite alguna información del lado del servidor la puede realizar de modo asíncrono sin interrumpir la navegación del usuario actualizando solo en componente del dom que se desea.

¿Qué versión de Angular utilizar (Angular 1, Angular 2 o Angular 4)?

Existen varias versiones de Angular JS así que definamos cada una de ellas:

Angular 1 = Fue la primera versión de Angular JS y fue liberada un par de años atrás. Permitiendo por primera vez escribir reactive applications, lo cual lo hizo muy popular.
Angular 2 = Angular 2 es un framework completamente nuevo ya que fue re escrito completamente y es el futuro de angular. Fue liberado aproximadamente un año atrás (así que si ya sabes Angular 1 olvida todo lo que sabes e inicia de nuevo :D).
Angular 3 = Es una actualización a Angular 2, pero, ¿Por qué no llamarlo Angular 3 ? (La versión 3 se saltó debido a un conflicto interno en el versionamiento)

Instalando Angular

Para instalar angular utilizando la línea de comandos debemos seguir los siguientes pasos:

Instala u actualiza tu versión de node js, para esto ve a http://nodejs.org descarga e instala la versión más reciente. En estos ejemplos no es necesario utilizar nodejs para crear algún tipo de backend, solo se descargará porque la CLI lo requiere.
Actualiza la CLI con

npm uninstall -g angular-cli @angular/cli
npm install -g @angular/cli

Creando nuestro primer proyecto

Una vez que tenemos instalado Angular y nodejs el siguiente paso es crear nuestro proyecto, para hacerlo seguiremos los siguientes pasos:

ng new angular-js-example
cd angular-js-example
ng serve

Con los pasos anteriores se creará un proyecto angular y se iniciará un servidor de desarrollo, una vez que los comandos anteriores se ejecutaron correctamente podremos acceder a la url http://localhost:4200/ y ver la aplicación que hemos creado:

Si se desea ejecutar el servidor en un puerto diferente es posible ejecutar:

 ng serve --port 8080

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

How to create a RESTful web application in minutes with JHipster (Spring Boot + AngularJS )

junio 14, 2017 por ozfranco, posted in English

JHipster is an scaffolding tool developed by Yeoman and used to develop Spring Boot + AngularJS projects. The present post intends to guide you on how to create a new web application step by step.

Installing JHipster

Before starting with our application, you must be sure that you cover the following requirements:

Install and configure Java 8 on your system.
Install Node-js from its website, this will also install npm.
Install Yeoman using npm install –g yo.
Install Bower using npm install –g bower.
Install Gulp using npm install –g gulp-cli.
Install JHipster using npm install –g generator-jhipster.

With this simple steps JHipster has been successfully installed.

Creating an application

Once you have JHipster installed in your system, follow the next steps to create your new application.

Create an empty directory where the project is going to be allocated.
```
mkdir jhipster-example
```
Go to the new directory.
```
cd jhipster-example
```
Create a new application using the following command:
```
yo jhipster
```
JHipster will ask for authorization to send anonymously a report of usage statistics, you can decide this according to your preference.
The type of application you want to create, for this post we will choose Monolithic application.

Application name:
- raidentrance
Base package name:
- com.raidentrance.jhipster
Authentication type:
- HTTP Session Authentication (stateful, default Spring Security Mechanism).
Data Base type:
- SQL
Data Base to be used in production:
- MySQL
Data Base to be used in development:
- MySQL
Are you planning to use a second layer of cache on Hibernate?:
- Yes, with ehcache (local cache for a single node).
Building tool:
- Maven
Additional Tools:
- None
Use LibSass for CSS files processing:
- Yes
Internationalization Support:
- No. (By saying yes you will have to choose a native language and then additional languages you would like to install).
Testing framework:
- Gatling
Override .gitignore file:
- Yes

Once you are done with the initial configuration JHipster will generate the complete application displaying the following message:

Running the application

Up to now we should have a full project ready to be configured, compiled and run. To do this, we require some additional steps:

Compile the project using mvn clean install.
Create an empty data base for the project.
Modify the project configurations in the file application-dev.yml located on src/main/resources/config, in this post you have to fill the DB Url, DB User and password.
To execute the project you can run inside your IDE the RaidentranceApp.java as Spring Boot Application or you can use the command mvn spring-boot:run

Now you will be able to open a browser and look for http://127.0.0.1:8080 to retrieve the Welcome page from JHipster containing: In the top-left corner the profile that is being used (dev) and an account tab to register new users or use an existent account.

By default JHipster will generate an admin user with password admin, once you are authenticated you should see the following screen:

This screen will contain different sections described below:

Entities: here you will see the entities defined for the project, at the very beginning this is going to be empty since we haven’t created anyone.
Account:
- Settings: Used to modify the username, last name and e-mail.
- Password: Used to change the current user password.
- Sessions: Shows the active sessions.
- Sign Out.
Administration:
- User management: Will allow you to view an modify your user accounts.
- Metrics: Shows application metrics such as the number of http requests, use of the REST web services, cache and use of datasource.
Health: Shows the checks defined by the application.
Configuration: Shows all the current configurations for the application.
Audits: Allows you to enable and check entity audits.
Logs: Used to change the log levels on the application.
API: Shows the web services in the application together with a brief description on how to use each one of them.

All the features showed were created following development best practices by only executing one command and completing a quick wizard.

On the next post we will explain how to create new Web Pages , the idea will be to create a complete application piece by piece and in just a couple of minutes.

Author: Alejandro Agapito Bautista

Twitter: @raidentrance

Contact:raidentrance@gmail.com

Translated By: Oscar Camacho – melchior01

Contact: adamfirstangel@hotmail.com

5 Comandos, una aplicación web completa con JHipster en español

octubre 4, 2016octubre 4, 2016 por raidentrance, posted in Español

En el post anterior se explicó la configuración del entorno de trabajo con JHipster, para verlo ir a Crea una aplicación Web+REST (Spring boot + AngularJS) en minutos utilizando JHipster . En este post se explica paso a paso como crear una aplicación completa haciendo uso de comandos simples con JHipster.

Creación de entidades

En JHipster no es necesario escribir una sola línea de código para crear una aplicación web debido a que es una herramienta scaffolding lo cual permite crear la aplicación en base a comandos.

Definiendo aplicación a crear

La aplicación a crear será una aplicación para registrar departamentos, empleados y habilidades de una empresa, la idea de este post es crear la aplicación completa sin escribir una sola línea de código. Para conseguir esto se deben crear las siguientes entidades:

Departamento
Empleado
Habilidad

Creando entidad department

Lo primero será crear la entidad departamento utilizando el siguiente comando:

yo jhipster:entity department

Una vez que se ejecuta el comando, JHipster preguntará la siguiente información sobre la entidad que se desea construir:

Desea agregar un campo a la entidad?
- Nombre del campo
- Tipo del campo
- Reglas de validación del campo

Para la entidad department se crearán el siguiente campo:

name
- String

Una vez hecho esto JHipster preguntará si se desea agregar una relación a la entidad que se generó, en este caso se seleccionará que si se desea y se proporcionará la siguiente información:

Nombre de la otra entidad : Employee
Nombre de la relación :employee
Tipo de relación : one-to-many
Nombre de la relación en la otra entidad: department

Cuando se termine JHipster preguntará lo siguiente:

Si desea crear otra relación: Seleccionaremos en este ejemplo que no.
Si se desea utilizar DTO para los endpoints que se generen. es importante mencionar que dichos DTO’s son creados utilizando MapStruct, para más información sobre esto ver el post Mapeo de Beans con MapStruct : Seleccionaremos en este ejemplo que no.
Si se desea que el servicio REST acceda directamente al repositorio de Spring data o si se desea que se genere un servicio separado para esto: Seleccionaremos en este ejemplo Yes, generate a separate service class.
Si se desea agregar paginación a la entidad consultada:Seleccionaremos en este ejemplo no.

Una vez hecho esto JHipster notificará los archivos a sobre escribir, seleccionaremos que si deseamos que lo haga y la entidad se generará de forma completa.

Creando entidad employee

En la definición de la entidad department se definió que existirá una relación entre ella y employee, pero falta definir la entidad employee con el fin de definir los campos que contendrá y las reglas de cada uno. Para esto ejecutaremos el siguiente comando:

yo jhipster:entity employee

Una vez que se ejecuta el comando, agregaremos los siguientes campos a la entidad:

name
- String
age
- Integer
salary
- Double

El siguiente paso es definir las relaciones que tendrá la entidad employee, para este caso serán 2 la que se registrarán una con la entidad ya creada department y una con la entidad Skills que contendrá las habilidades del empleado, para hacerlo se responderá lo siguiente:

Desea agregar una relación a otra entidad: Si
- Nombre de la otra entidad: Department
- Nombre de la relación: department
- Tipo de relación: many-to-one
- Cuando se muestre esta relación en la aplicación, que campo de Department desea utilizar : id
- Desea agregar validaciones a la relación: No
Desea agregar una relación a otra entidad : Si
- Nombre de la otra entidad : Skill
- Nombre de la relación :skill
- Tipo de relación : one-to-many
- Nombre de la relación en la otra entidad: employee

Creando entidad skill

La última entidad será skill la cuál contendrá información sobre las habilidades del empleado. Para generarla ejecutaremos lo siguiente:

yo jhipster:entity skill

Una vez que se ejecuta el comando, agregaremos los siguientes campos a la entidad:

name
- String
yearsExperience
- Integer

Una vez definidos los campos de la entidad skill se definirá la relación que tiene con la entidad empleado:

Desea agregar una relación a otra entidad: Si
- Nombre de la otra entidad: Employee
- Nombre de la relación: employee
- Tipo de relación: many-to-one
- Cuando se muestre esta relación en la aplicación, que campo de Employee desea utilizar : id
- Desea agregar validaciones a la relación: No

Probando todo junto

Con estos comandos ya se tiene lista la aplicación completa de JHipster lo único que resta es ejecutar los siguientes dos comandos:

mvn clean install

Construirá la aplicación de nuevo con los nuevos cambios generados con Spring boot.

mvn spring-boot:run

Ejecutará la aplicación y la pondrá disponible en la siguiente URL http://localhost:8080/.

A continuación se muestra como se ve la aplicación:

Como se puede observar el menu Entities ahora contiene las 3 entidades que se generaron:

Department

Employee

Skill

Department

La primera pantalla de entidad que se mostrará será department ya que no depende de ninguna otra:

Como se puede observar la entidad Department tiene la siguiente funcionalidad:

Crear nuevos departamentos

Ver departamentos existentes

Editar departamentos existentes

Borrar departamentos

Employee

La pantalla employee se ve como se muestra a continuación

Como se puede observar la entidad Employee tine la siguiente funcionalidad:

Crear nuevos empleados

Ver empleados existentes

Editar departamentos existentes

Borrar departamentos existentes

Nota : Como se puede observar en la columna Department aparece un número el cual es el id del departamento con un link a la pantalla del departamento, la razón por la que aparece el id es porque se seleccionó “Cuando se muestre esta relación en la aplicación, que campo de Department desea utilizar”

Skill

La pantalla employee se ve como se muestra a continuación

Otros recursos creados

Además de las pantallas creadas JHipster crea lo siguiente de forma automática:

Web services REST y documentación de los mismos:

Estadísticas de uso de los servicios web:

Código siguiendo buenas prácticas

Es importante saber que si se desea modificar la aplicación para cambiar la apariencia o mostrar otro tipo de información es posible hacerlo modificando el código, ya que el código generado por JHipster sigue buenas prácticas de desarrollo lo cual lo hace muy fácil de modificar.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com