La nueva consola de angular es una nueva interfaz con la que vamos a poder administrar nuestras aplicaciones de una manera más visual y eficaz.
Para empezar a usar la angular console, accedemos a la dirección https://angularconsole.com y nos descargamos la versión para nuestro sistema operativo (al momento de escribir esta entrada se trata de una version beta, aunque totalmente funcional y en general bastante estable, por otra parte no existe una versión para linux, pero es de esperar que este disponible en no mucho tiempo) .
Cuando arrancamos la aplicación veremos una pantalla, como la siguiente, donde nos da las opciones de crear un nuevo proyecto, importar o ver los proyectos recientes.
Vamos a ver como funciona la aplicación creando un nuevo proyecto.
Para ello pulsamos en el botón inferior que dice "Create" y nos aparecerá una especie de formulario donde nos preguntará:
1- Donde queremos crear nuestro espacio de trabajo (ojo!! no es el directorio de una aplicación especifica, sino un espacio de trabajo).
A diferencia del cli de angular, donde únicamente podemos crear una aplicación mediante el comando ng new, mediante la angular console podemos tener multiples aplicaciones en el mismo espacio, lo que sin duda es una enorme ventaja si por ejemplo
tenemos un equipo de desarrollo trabajando en varias aplicaciones en el
mismo espacio de trabajo.
2- Posteriormente daremos un nombre a dicho espacio de trabajo, en nuestro ejemplo le llamaremos AngularConsoleWorkSpace
3- Finalmente nos pedirá que schematics queremos usar, si la que trae angular por defecto en el cli, o la del fabricante de la aplicación, es decir la de nrwl (Narwhal Technologies Inc) y que veremos en entradas posteriores.
De momento vamos a seleccionar la del cli por defecto de angular y pulsamos el botón de Create.
Una vez que termina el proceso de creación, nos mostrará una pantalla similar a la que se muestra a continuación, donde podemos ejecutar los comandos que haciamos anteriormente con la cli, es decir, serve, test, build, generate componentes, entre otros
A la hora de arrancar el servidor con ng serve, en la configuración nos dará la opción de hacer seguimiento (watch) es decir de "regenerar" cada vez que haya algún cambio, o de usar compilación aot, el puerto, host, proxy, incluso de especificar si queremos la configuración por defecto o en modo producción, entre otras muchas más opciones:
Una vez que está configurado el comando serve pulsamos el botón de Run y nos levantará la aplicación con la configuración establecida en nuestro navegador especificado.
Tenemos otras tareas disponibles, para internacionalizacion, lint o testing, que podemos igualmente configurar, y que iremos viendo a lo largo de entradas posteriores.
En esta entrada de introdución a la angular console hemos visto que si bien el cli por defecto de angular es una herramienta estupenda, a partir de ahora tenemos la opción de gestionar nuestros proyectos (incluso a nivel monorepositorio con multiples proyectos en el mismo repo) mediante esta herramienta que promete mucho en un futuro próximo.
En entradas posteriores iremos viendo más funcionalidades de esta herramienta, y como usar la schematics de nrwl.
miércoles, 29 de agosto de 2018
martes, 7 de agosto de 2018
Tipos parciales en TypeScript
En esta entrada vamos a ver que son las clases parciales en typescript.
Imaginemos un escenario relativamente habitual en el que declaramos una funcion como la siguiente:
esta funcion recibe como parametro un objeto de tipo CSSStyleDeclaration, que es una clase para definir una serie de estilos de un elemento del DOM como por ejemplo la alineacion, el background, alto, ancho etc. entre otras muchisimas propiedades.
La función unicamente muestra las propidades de dicho objecto.
Para llamar a la funcion, declaramos un objeto de tipo CSSStyleDeclaration:
Si quisieramos utilizar este objeto nos obligaría a definir todas las propiedades y asignarles "undefined", y son unas cuantas propiedades :-(
En la siguiente imagen podemos ver algunas de las propiedades que debemos asignar a dicho objeto:
De hecho, si nos fijamos en la siguiente imagen, el editor de código se "queja" de que no hemos asignado al objeto todas las propiedades de la clase CSSStyleDeclaration
Para estos casos podemos usar un tipo genérico que se llama Partial<T> el cual hace que al tipo de objeto que se aplica permite establecer el valor "undefined" a las propiedades que no han sido asignadas por nosotros.
Modificamos el codigo anterior para declarar los objetos como Partial
de esta forma el objeto styles tiene asignada las propiedades que hemos establecido y el resto
tienen el valor "undefined", y ya no se "queja" el editor.
En la declaración de la función tambien vamos a cambiar la declaración del parametro
para decirle que es "parcial"
Los tipos parciales como hemos visto pueden sernos de utilidad en determinadas circunstancias.
Codigo de ejemplo: https://gist.githubusercontent.com/jorgetrigueros/e99c8b14df99346774e8ec9bd70e8159/raw/ee43bc26b3e128622563b1b12df252fb3fd87c46/partialclass.ts
Imaginemos un escenario relativamente habitual en el que declaramos una funcion como la siguiente:
esta funcion recibe como parametro un objeto de tipo CSSStyleDeclaration, que es una clase para definir una serie de estilos de un elemento del DOM como por ejemplo la alineacion, el background, alto, ancho etc. entre otras muchisimas propiedades.
La función unicamente muestra las propidades de dicho objecto.
Para llamar a la funcion, declaramos un objeto de tipo CSSStyleDeclaration:
Si quisieramos utilizar este objeto nos obligaría a definir todas las propiedades y asignarles "undefined", y son unas cuantas propiedades :-(
En la siguiente imagen podemos ver algunas de las propiedades que debemos asignar a dicho objeto:
De hecho, si nos fijamos en la siguiente imagen, el editor de código se "queja" de que no hemos asignado al objeto todas las propiedades de la clase CSSStyleDeclaration
Para estos casos podemos usar un tipo genérico que se llama Partial<T> el cual hace que al tipo de objeto que se aplica permite establecer el valor "undefined" a las propiedades que no han sido asignadas por nosotros.
Modificamos el codigo anterior para declarar los objetos como Partial
de esta forma el objeto styles tiene asignada las propiedades que hemos establecido y el resto
tienen el valor "undefined", y ya no se "queja" el editor.
En la declaración de la función tambien vamos a cambiar la declaración del parametro
para decirle que es "parcial"
Los tipos parciales como hemos visto pueden sernos de utilidad en determinadas circunstancias.
Codigo de ejemplo: https://gist.githubusercontent.com/jorgetrigueros/e99c8b14df99346774e8ec9bd70e8159/raw/ee43bc26b3e128622563b1b12df252fb3fd87c46/partialclass.ts
Suscribirse a:
Entradas (Atom)