Saltar al contenido

5 marcos angulares para que las aplicaciones estén en funcionamiento rápidamente

Bootstrap shield logo in blue color

Ahora que está bien versado en los conceptos básicos, es hora de comenzar construyendo su propia aplicación web con Angular. Angular hizo que la construcción de una aplicación web fuera más productiva usando lo que se llama directivas, que trabaja de la mano con sus marcas HTML.

Si crear una aplicación web desde cero le parece abrumador, no se preocupe. Algunos desarrolladores muy generosos han adaptó algunos marcos frontend para admitir Angular. Como un marco típico, vienen con componentes web prediseñados. Esto hace que el uso del marco sea la herramienta perfecta para cualquiera que necesite poner en marcha una aplicación web rápidamente.

Aquí hay 5 marcos que puede usar para poner en marcha una aplicación basada en web con Angular.

10 mejores tutoriales para aprender Angular en 2020

10 mejores tutoriales para aprender Angular en 2020

Angular es un marco de JavaScript impresionante que se puede utilizar para crear aplicaciones web potentes y dinámicas. Eso… Lee mas

1. Bootstrap angular

Logotipo del escudo Bootstrap en color azul

Bootstrap angular, como su nombre lo indica, está construido sobre uno de los frameworks front-end más populares, Bootstrap. Este marco contiene un conjunto de componentes Bootstrap como Carousel, Alert y Collapse junto con algunas adiciones, como Rating y TimePicker.

Todos estos componentes se han adaptado para usar directivas angulares y elementos HTML personalizados. Por ejemplo, en lugar de utilizar un

para envolver el carrusel, puede utilizar un elemento personalizado más «significativo», y :


    

      
Primera diapositiva aleatoria

Si eres un gran fanático de Bootstrap y al mismo tiempo disfrutas de la potencia y el rendimiento que ofrece Angular, esta podría ser una elección perfecta de marco.

2. Fundación angular

cimentación angular

Otro marco popular que también ha sido adaptado para usar Angular es Foundation, y simplemente se llama «Angular Foundation».

De manera similar, este marco ha modificado los componentes de Foundation para adoptar la directiva de Angular y los elementos HTML personalizados, por lo que ahora puede construir su aplicación web utilizando elementos HTML con nombres más semánticos como y , y , en lugar de lo ambiguo

. Aquí hay un ejemplo de cómo agregamos un componente de alerta con el elemento:


    This is a primary callout. This alert needs your attention, but it's not super important.

Si te gusta Foundation más que Bootstrap, entonces este es el marco que debes utilizar. Puede comenzar con Angular Foundation en esta página o mantenerse al día con el desarrollo del proyecto a través del repositorio de Github.

3. Marco iónico

iónico

Iónico viene con un puñado de bloques de construcción sólidos que hacen que el desarrollo de aplicaciones móviles sea fácil y rápido. Cada componente del marco Ionic está optimizado para la experiencia móvil, que depende básicamente del tacto y los gestos. Estos componentes de la interfaz de usuario también se componen de elementos HTML personalizados. Al implementar una navegación con pestañas, por ejemplo, usaría la :



    

    

    

    Schedule

    6

    

    

    

    

    Speakers

    

    

    

    

    Map

    

    

    

    

    About

    

    

Para que sea aún más fácil y rápido construir su aplicación, puede usar Ionic Creator, que le permite crear su aplicación arrastrando y soltando. Entonces, si el rendimiento y la velocidad son importantes para usted, Ionic es el mejor marco para combinar.

4. NativeScript + Angular

interfaz de usuario angular móvil

NativeScript es un marco para crear aplicaciones web y móviles con JavaScript, y aunque no requiere Angular, puede integrarlo con Angular para que pueda reutilizar completamente sus habilidades y código Angular para construir una hermosa aplicación.

Viene con un conjunto completo de componentes personalizados para crear una aplicación utilizable, como los botones, los selectores de fecha y el control deslizante.


Puede comenzar con el marco NativeScript + Anguular aquí

5. Nebular

cuadrícula de interfaz de usuario

Nebuloso es un conjunto de componentes de IU basados ​​en el sistema de diseño Ava. Consta de más de 35 componentes de IU reutilizables, como la tarjeta, el acordeón y las pestañas. También incluye 400 iconos, temas que incluyen el «modo oscuro» que se puede personalizar fácilmente para satisfacer sus necesidades de diseño.

Cada uno de los componentes tiene el prefijo nb-. Por ejemplo, puede agregar para crear el componente Tarjeta.


Card

Además de estos componentes, Nebular también viene con un par de módulos de autenticación y seguridad que puede instalar fácilmente con NPM. Esto le permite crear, no solo las IU, sino una aplicación web que funcione con una hermosa IU consistente rápidamente, todo en este único marco.

Oreja

Logotipo del escudo Bootstrap en color azul

Bootstrap angular, como su nombre lo indica, está construido sobre uno de los frameworks front-end más populares, Bootstrap. Este marco contiene un conjunto de componentes Bootstrap como Carousel, Alert y Collapse junto con algunas adiciones, como Rating y TimePicker.

Todos estos componentes se han adaptado para usar directivas angulares y elementos HTML personalizados. Por ejemplo, en lugar de utilizar un

para envolver el carrusel, puede utilizar un elemento personalizado más «significativo», y :


    

      
Primera diapositiva aleatoria

Si eres un gran fanático de Bootstrap y al mismo tiempo disfrutas de la potencia y el rendimiento que ofrece Angular, esta podría ser una elección perfecta de marco.

2. Fundación angular

cimentación angular

Otro marco popular que también ha sido adaptado para usar Angular es Foundation, y simplemente se llama «Angular Foundation».

De manera similar, este marco ha modificado los componentes de Foundation para adoptar la directiva de Angular y los elementos HTML personalizados, por lo que ahora puede construir su aplicación web utilizando elementos HTML con nombres más semánticos como y , y , en lugar de lo ambiguo

. Aquí hay un ejemplo de cómo agregamos un componente de alerta con el elemento:


    This is a primary callout. This alert needs your attention, but it's not super important.

Si te gusta Foundation más que Bootstrap, entonces este es el marco que debes utilizar. Puede comenzar con Angular Foundation en esta página o mantenerse al día con el desarrollo del proyecto a través del repositorio de Github.

3. Marco iónico

iónico

Iónico viene con un puñado de bloques de construcción sólidos que hacen que el desarrollo de aplicaciones móviles sea fácil y rápido. Cada componente del marco Ionic está optimizado para la experiencia móvil, que depende básicamente del tacto y los gestos. Estos componentes de la interfaz de usuario también se componen de elementos HTML personalizados. Al implementar una navegación con pestañas, por ejemplo, usaría la :



    

    

    

    Schedule

    6

    

    

    

    

    Speakers

    

    

    

    

    Map

    

    

    

    

    About

    

    

Para que sea aún más fácil y rápido construir su aplicación, puede usar Ionic Creator, que le permite crear su aplicación arrastrando y soltando. Entonces, si el rendimiento y la velocidad son importantes para usted, Ionic es el mejor marco para combinar.

4. NativeScript + Angular

interfaz de usuario angular móvil

NativeScript es un marco para crear aplicaciones web y móviles con JavaScript, y aunque no requiere Angular, puede integrarlo con Angular para que pueda reutilizar completamente sus habilidades y código Angular para construir una hermosa aplicación.

Viene con un conjunto completo de componentes personalizados para crear una aplicación utilizable, como los botones, los selectores de fecha y el control deslizante.


Puede comenzar con el marco NativeScript + Anguular aquí

5. Nebular

cuadrícula de interfaz de usuario

Nebuloso es un conjunto de componentes de IU basados ​​en el sistema de diseño Ava. Consta de más de 35 componentes de IU reutilizables, como la tarjeta, el acordeón y las pestañas. También incluye 400 iconos, temas que incluyen el «modo oscuro» que se puede personalizar fácilmente para satisfacer sus necesidades de diseño.

Cada uno de los componentes tiene el prefijo nb-. Por ejemplo, puede agregar para crear el componente Tarjeta.


Card

Además de estos componentes, Nebular también viene con un par de módulos de autenticación y seguridad que puede instalar fácilmente con NPM. Esto le permite crear, no solo las IU, sino una aplicación web que funcione con una hermosa IU consistente rápidamente, todo en este único marco.