- Capturas
- Versiones
- Mini-manual Angular 2
Proyecto con componentes de Angular2.
- Componentes
- Herencia
- Routing
- ReactiveForms
- Services
Existe herencia entre los siguientes componentes
RecetarioComponente : componente padre (imagen 1) con una lista de recetas obtenida mediante un servicio de Angular 2.
RecetarioComponente/RecetaDetalle : componenete hijo para mostrar el detalle de cada receta (imagen2).
RecetarioComponente/FormularioNuevaReceta : formulario reactivo de Angular2 que se muestra en un modal para añadir nuevas recetas (imagen3).
- Tag 0.1 : Receta --> Componente para mostrar una Receta con lista desplegable para los ingredientes.
- Tag 0.2 : Propiedades --> Ejemplos de uso de las propiedades de Angular.
- Tag 0.3 : Usuario --> Aprender a usar los modelos de clase en Angular.
- Tag 0.4 : Concesionario --> Estructura con varios componentes y herencia entre ellos.
- Tag 0.5 : Recetario --> Ejemplo con todos los componentes anteriores cargados mediante servicios de Angular en /providers en formato JSON ( Añadida dependencia para jQuery ).
- Tag 0.6 : Plantilla --> Ejemplos del componenete Template condicionados.
- Tag 0.7 : Tareas --> Lista de tareas cargadas desde un servidor creado con JSONPlaceholder
- Descargar el código y abrirlo en tu IDE preferido.
- Abrir consola de comandos en la carpeta del proyecto y ejecutar las siguientes lineas:
⋅⋅1.
npm install
para instalar las dependencias guardadas ennode-modules
. ⋅⋅2. Abrir servidor de desarrollo conng serve --open
.
- Instalar Node.js para poder instalar desde linea de comandos con
npm
(En caso de instalar y que la consola no reconozca el comandonpm
comprobar que se ha creado la variable de entorno y reiniciar el ordenador). - Instalar Angular CLI (Comand Line Interface: la herramienta de Angular para facilitar tareas), mediante
npm install -g @angular/cli
. - Crear estructura de proyecto mediante
ng new NombreDelProyecto
(ong new NombreDelProyecto --style=scss
para estilos en formato SCSS) situandonos en la carpeta donde quereremos crear el proyecto.
Este proyecto ha sido generado mediante Angular CLI version 1.7.1.
Ejecutar ng generate component <<component-name>>
para generar un nuevo componente. También se pueden crear: ng generate directive|pipe|service|class|guard|interface|enum|module
. Los componenete creados de esta manera, se añadiran al archivo app.module.ts
.
Ejecutar ng serve --open
parar lanzar en el navegador un servidor de desarrollo en http://localhost:4200/
. La app se actualizará automáticamente cada vez que se guarden los cambios en el area de trabajo.
Ejecutar ng test
para ejecutar test unitarios mediante Karma.
Ejecutar ng e2e
para ejecutar test exteremo-a-extremo (end-to-end) mediante Protractor.
Para más información acerca de Angular CLI usar ng help
o entrar en Angular CLI README.