Saltar al contenido

10 proyectos angulares y tipográficos para llevarte de cero a héroe – Código con el blog de Dan

Hay un montón de grandes muestras y mensajes por ahí para ayudar a empezar con Angular (versión 2 o superior), así como ES6/ES2015 y TypeScript. Sin embargo, algunos están desactualizados, algunos pueden ser más complejos de lo que quieres empezar, y otros han sido abandonados y ya no se mantienen. En este post voy a proporcionar una lista de 10 proyectos Angular/TypeScript que he creado y que pueden llevarte de “Cero a Héroe” si te gusta explorar el código del proyecto y estás interesado en invertir el tiempo para aprender.

Los proyectos están listados en orden de principiante a nivel intermedio/avanzado para mostrar la secuencia que recomendaría si desea comenzar lento o saltar a un proyecto más robusto. Muchos de estos proyectos se utilizan en mi Curso de capacitación dirigido por un instructor sobre Desarrollo de Aplicaciones Angulares y Tipográficas . Me doy cuenta de que no todo el mundo puede tomar el curso, por lo que estoy enumerando los proyectos aquí para, con suerte, añadir valor a la comunidad en general.

10 proyectos angulares y tipográficos para llevarte de cero a héroe – Código con el blog de Dan
10 proyectos angulares y tipográficos para llevarte de cero a héroe – Código con el blog de Dan

En una nota relacionada, si estás usando el editor de código VS (mi editor preferido) mira mi extensión de fragmentos de código Angular y TypeScript. Los fragmentos de código le ahorrarán mucho tiempo y aumentarán significativamente su productividad mientras construye aplicaciones Angular (v2 o superior) y TypeScript.

Proyecto 1: Ejemplos de códigos ES6/ES2015

URL del proyecto: https://github.com/DanWahlin/ES6Samples Nivel: Principiante Descripción: Este proyecto proporciona una mirada introductoria a las principales características disponibles en ES6/ES2015 que son importantes dado que TypeScript es un superconjunto de características de ES6/ES2015. Todos los proyectos Angular a continuación utilizan TypeScript, así que si usted es nuevo en el lenguaje TypeScript o en lo que ES6/ES2015 ofrece, le recomendaría aprender esos conceptos primero antes de sumergirse en los conceptos Angular.

Tengan en cuenta que algunos lo llaman ES6, otros ES2015, por lo que estoy listando ambos aquí. ES6 es lo mismo que ES2015.

Proyecto 2: Ejemplo de módulos ES6/ES2015

URL del proyecto: https://github.com/DanWahlin/ES6-Modules-Starter Nivel: Principiante Descripción: Los módulos ES6/ES2015 juegan un papel importante en las aplicaciones Angular (v2 o superior), por lo que aprender lo básico sobre cómo funcionan los módulos, cómo se configura un cargador de módulos, etc. es muy importante si quieres construir aplicaciones Angular. Este proyecto proporciona un simple ejemplo inicial de cómo empezar a trabajar con los módulos y el cargador de módulos SystemJS.

¿Qué es un cargador de módulos? Los navegadores aún no soportan los módulos ES6/ES2015, por lo que se necesita un script “polyfill” para añadir la funcionalidad que falta. SystemJS es uno de los varios cargadores de módulos que existen y que puede ser usado para trabajar con módulos en los navegadores.

Proyecto 3: Ejemplos de código tipográfico

URL del proyecto: https://github.com/DanWahlin/TypeScriptDemos Nivel: Principiante Descripción: Este proyecto proporciona una mirada introductoria a varias características que están disponibles en ES2015 y TypeScript. Todos los proyectos Angular que se muestran a continuación usan TypeScript, así que si eres nuevo en el lenguaje te recomendaría aprenderlo primero antes de sumergirte en los conceptos Angulares.

Si desea una formación más formal en el uso de la escritura, también puede ver el curso en vídeo de Fundamentos de la escritura que mi buen amigo John Papa y yo creamos para…

Proyecto 4: Mundo Hola Angular

URL del proyecto: https://github.com/DanWahlin/Angular-HelloWorld Nivel: Principiante Descripción: El proyecto Angular Hola Mundo proporciona un proyecto de inicio sencillo para las personas que son completamente nuevas en Angular (versión 2 o superior) y TypeScript. Proporciona una mirada básica a la estructura del proyecto, usando package.json y npm para cargar los módulos de Angular, así como la compilación de TypeScript con tsconfig.json. El proyecto sólo contiene un único módulo y componente, así que si quiere experimentar con varias características de Angular en un entorno sencillo, este proyecto le funcionará bien.

Bono: Aunque se trata de un proyecto muy básico, proporciona apoyo a la función de compilación de Webpack y Angular$0027s Ahead-of-Time (AOT), que es una gran manera de acelerar el tiempo de carga y minimizar el número de secuencias de comandos cargadas en el navegador (y hay varios otros grandes beneficios). La característica no se usa por defecto pero los detalles se pueden encontrar en el archivo readme si estás interesado en ponerlo en marcha.

Proyecto 5: Huesos desnudos angulares

URL del proyecto: https://github.com/DanWahlin/Angular-BareBones Nivel: Principiante Descripción: El proyecto Angular Bare Bones toma las cosas a un nivel del proyecto Hello World y añade un enrutamiento angular básico, múltiples componentes así como un servicio simple. Es un buen proyecto para que los principiantes miren a través de él para ver cuántas de las características clave que Angular y TypeScript proveen pueden ser unidas mientras que se mantiene el código muy simple en general.

Proyecto 6: Formas angulares impulsadas por plantillas y reactivas

URL del proyecto: https://github.com/DanWahlin/Angular-Forms Nivel: Principiante/Intermedio Descripción: El proyecto Formas Angulares muestra cómo empezar con la vinculación de datos en los formularios utilizando ngModel (enfoque basado en plantillas) o el enfoque de Formas Reactivas donde los controles de los formularios se definen en código y se vinculan en la interfaz de usuario. También se incluyen ejemplos de validadores personalizados, así como ejemplos de vinculación a diferentes tipos de controles de formulario y de acceso a los datos presentados.

Si está interesado en aprender más sobre las formas reactivas y guiadas por plantillas y cómo pueden ser usadas con un servicio de respaldo, vea mi curso de Integración de Angular con Nodo.js RESTful Services en .

Proyecto 7: Angular JumpStart

URL del proyecto: https://github.com/DanWahlin/Angular-JumpStart Nivel: Descripción de Principiante/Intermedio/Avanzado : El proyecto Angular JumpStart proporciona una aplicación completa que demuestra muchas características clave proporcionadas por el marco Angular. Algunas de las características del proyecto incluyen:

  • Clases y módulos de TypeScript
  • Los módulos están cargados con System.js
  • Definir las rutas, incluyendo las rutas de los niños y las rutas de los cargadores perezosos
  • Uso de componentes personalizados, incluyendo propiedades de entrada y salida personalizadas
  • Uso de directivas personalizadas
  • Usando tubos personalizados
  • Definir las propiedades y usar los eventos en los componentes/directivas
  • Usando el objeto Http para las llamadas de Ajax junto con los observables RxJS
  • Trabajando con clases de Utilidad y Servicio (como para clasificación y llamadas Ajax)
  • Usando la sintaxis de la base de datos angular [], () y [()]
  • Uso de la funcionalidad de formularios reactivos y basados en plantillas para la captura y validación de datos
  • Opcional: La funcionalidad del Webpack está disponible para la carga de módulos y más (véase el léame para más detalles)
  • Opcional: El soporte Ahead-Of-Time (AOT) está disponible (ver el léame para más detalles)
  • ¡Mucho más!

Este es uno de los proyectos clave utilizados en nuestra clase de entrenamiento dirigida por un instructor de Desarrollo de Aplicaciones Angulares y Tipográficas .

Proyecto 8: Angular, Node.js RESTful Services y MongoDB

URL del proyecto: https://github.com/DanWahlin/Angular-NodeJS-MongoDB-CustomersService Nivel: Principiante/Intermedio Descripción: Este proyecto muestra cómo Angular puede ser usado para integrarse con un servicio Node.js RESTful que utiliza MongoDB como base de datos backend. La aplicación se basa en un servicio Angular que puede realizar operaciones CRUD (crear, leer, actualizar y eliminar) y también demuestra el uso de formas reactivas y basadas en plantillas. Los observables y el RxJS juegan un papel clave en las operaciones de sincronización que realiza la aplicación.

El proyecto puede ejecutarse localmente o utilizando contenedores Docker. Para más información sobre los conceptos cubiertos en este proyecto, vea mi curso de Servicios de Integración Angular con Nodo.js RESTful en .

Proyecto 9: Docker, Angular, Node.js RESTful Services y MongoDB

Proyecto 10: Docker, Angular, ASP.NET Core RESTful Services y PostgreSQL