preloader

Angular un nuevo mundo

blog-image

Desarrollos a la medida con angular +

En newinntech realizamos desarrollos con este gran framework potente, fácil de entender.

Dicho framework nos permite segmentar una aplicación por partes, dirás comoasí?, pues es tan simple como decir, tu aplicación es como un robot, y cada parte del robot sera un componente de dicho robot, entonces siguiendo este ejemplo podemos decir que una aplicación angular divide en gran parte las vistas y funcionales que se tendrán para una aplicación web y facilitá el manejo de datos y división de tareas u acciones por componente 😮🤯.

Introducción al desarrollo web con angular

Antes de continuar con este explicación sobre angular, tomare un momento para darles una breve explicación sobre el mundo angular y sus funciones, como también te daré los pasos necesarios para configurar un ambiente angular.

¿Que es Angular y para que sirve?

Angular es un framework de desarrollo para JavaScript creado por Google. La finalidad de Angular es facilitarnos el desarrollo de aplicaciones web SPA y además darnos herramientas para trabajar con los elementos de una web de una manera más sencilla y optima.

Otro propósito que tiene Angular es la separación completa entre el front-end y el back-end en una aplicación web.

Nota: no solo está limitado a realizar aplicaciones SPA (Single Pages App), también puedes realizar las aplicaciones de multiples páginas que necesites para la solución web que estas desarrollando

Ya sabemos que es Angular, pero que sera eso de aplicación web SPA 🤔😵, como se come o para que sirve, ahora mismo te saco de la duda.

¿Que es una aplicación web SPA?

Una aplicación web SPA creada con Angular es una web de una sola página como su nombre lo indica en ingles (single pages App), en la cual la navegación entre secciones y páginas de la aplicación, así como la carga de datos, se realiza de manera dinámica, casi instantánea, asincronamente haciendo llamadas al servidor (backend con un API REST) y sobre todo sin refrescar la página en ningún momento.

Es pocas palabras las aplicaciones web que podemos hacer con Angular son reactivas y no recargan el navegador, todo es muy dinámico y asíncrono.

No te parece que esto es super genial….? 🙀😎🤩.

No se si has probado a crear una aplicación de este tipo usando solo JavaScript y jQuery. Si lo has hecho te habrás dado cuenta de que es muy complejo, tedioso y difícil de mantener. Además hay que trabajar y escribir muuucho código.

Pues bien, este problema es totalmente resuelto por angular en lo que a mi experiencia respecta, convirtiendo el desarrollo de una web SPA (Single Page App) en un proceso muy sencillo, muy limpio, más orientado a objetos y con una arquitectura basada en componentes y buenas prácticas.

Otra ventaja que tiene este framework es que está respaldado por Google y tiene una comunidad brutalmente grande detrás, tanto así que a hoy diá se le considera el framework más usado en el mundo para el desarrollo de web apps, y su eficiencia y evolución lo han demostrado en todo el tiempo que lleva en circulacion 🤗😉.

Ademas cabe a anotar que gracias a la popularidad del framework las empresas están solicitando profesionales que sepan desarrollar webapps con este framework.

image1

Ohhhhh si, se me olvidaba!!!….😅 te enseñare a configurar un ambiente de angular para que así te metas más en este enorme y hermoso mundo web 😁🤗🤩.

¿Como instalo eso llamado angular?

Antes de poder realizar la instalación de Angular 8, necesitamos instalar previamente:

  • Un IDE para poder editar el código. En este caso vamos a utilizar Visual Studio Code, pero se puede utilizar cualquier otro.

  • Node y npm , para poder instalar Angular:

    Instalación de Node

    Para descargar Node accedemos a nodejs.org/es, dónde nos aparecen dos opciones para descargar. En este caso elegiremos la opción de la izquierda, que es la opción estable y la más recomendada para la mayoría.

    image2

    Cuando finalice la descarga, ejecutamos el instalador y seguimos el proceso de instalación con las opciones marcadas por defecto.

  • CLI Angular 8 , que será lo último que instalaremos.

    Instalación de Angular

    Para instalar Angular vamos a utilizar el mismo terminal que hemos utilizado previamente, en el que ejecutaremos el comando npm install -g @angular/cli.

    De está forma instalaremos Angular de forma global, independientemente de la carpeta en la que nos encontremos, y, también se instalará la última versión estable que exista.

    Tras esperar que termine el proceso de instalación, de nuevo verificamos que la misma ha sido correcta, con el comando ng v , que nos devolverá la información de la versión instalada.

    Comenzando un proyecto con Angular 8

    Ya tenemos instalado todo lo necesario para comenzar nuestro primer proyecto con Angular 8, así que para crearlo utilizaremos una carpeta que previamente debe estar creada para almacenar el proyecto de angular, y lo generamos ejecutando el comando ng new nombre-proyecto en el terminal, con el nombre que queramos utilizar, que en nuestro caso será “angular8”.

    Durante el proceso de instalación, el asistente del CLI de Angular irá realizando una serie de preguntas para ofrecernos varias opciones. Lo primero que nos preguntará será si queremos auto generar las rutas , a lo que responderemos afirmativamente. Después nos preguntará qué opción queremos elegir para el CSS, y aquí seleccionaremos SCSS .

    Seguidamente comienza el proceso de creación de nuestro proyecto, que llevará unos minutos hasta que se complete. Una vez finalizado lo lanzamos ejecutando en la consola el comando ng serve -o , pero lo haremos siempre desde la carpeta de nuestro proyecto, por lo que previamente accedemos a ella con el comando cd angular8 .

    Tras esperar unos segundos ya tendríamos el proyecto ejecutándose, y se abre el navegador automáticamente con el puerto correspondiente, ya que habíamos utilizado la opción -o en la ejecución.

Con todo esto dicho espero que el mundo angular se vuelva una pasión para ti como lo es para mí, y podras verlo en un futuro como el superheroe de los frameworks, jejejeje, tengo una imaginación muy grande, pero así lo pienso yo, fue un gusto darte está breve explicación.

super-hero

Espero volverte a ver para otra noticia más, seguiremos reportandote más y más sobre este gran mundo web, se despide juanse con el super hero angular.