Angular Recursos
Angular Recursos

Contenidos

Recursos oficiales

Representación del lado del servidor

Diseño de materiales

  • Diseño oficial de material angular (GitHub)
  • Los componentes, las directivas y los servicios de Material Design basados en md2 Angular2 son Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog (Modal), Menu, Multiselect, Select, Switch, Tabs, Tags (Chips), Toast y Tooltip.
  • ng2-material conjunto de ejemplos de material2 y componentes adicionales (tabla de datos, diálogo, …) construido sobre @ angular2-material / core
  • Angular2-mdl Componentes, directivas y estilos de Angular 2 basados en Material Design Lite
  • mdl-ext Material Design Lite Ext (carusel, grid, lightbox, selectfield, sticky header, …)
  • ng2-materialize Una envoltura de Angular 2 alrededor de la biblioteca Materialise
  • Material Light Componentes de Material Design ligeros, rápidos y fáciles de usar para Angular 2+ (especialmente para UI móviles). Hay varias alternativas, pero esta tiene un valor agregado y ventajas en mi opinión (obtenga un botín en Readme.md para más detalles). También hay una demostración en línea para verlo en acción. (La documentación de la API aún falta, pero está en proceso).
  • Blox Material Una biblioteca ligera de diseño de materiales para Angular, basada en los componentes de materiales de Google para la Web.
  • Componentes web de materiales Componentes web de materiales para Angular. Una representación fiel y precisa del Material Design según lo previsto en la web.
  • MDBootstrap Creado con Angular 7, Bootstrap 4 y el poderoso KIT de interfaz de usuario de TypeScript que proporciona un conjunto de plantillas de página, diseños, componentes y widgets elegantes y receptivos para crear rápidamente sitios web y aplicaciones que responden primero a los dispositivos móviles.

Hoja de trucos

Características

Directivas

Las directivas le permiten adjuntar comportamiento a elementos en el DOM.

Componentes

Un componente es una directiva que usa shadow DOM para crear un comportamiento visual encapsulado. Los componentes se utilizan normalmente para crear widgets de IU o para dividir la aplicación en componentes más pequeños.

Vista

Una vista es una primitiva básica utilizada por angular para representar el árbol DOM.

Plantillas

Las plantillas son marcas que se agregan a HTML para describir de manera declarativa cómo se debe proyectar el modelo de aplicación en DOM, así como qué eventos DOM deben invocar qué métodos en el controlador.

Detección de cambios

Cada componente recibe un detector de cambios responsable de verificar los enlaces definidos en su plantilla.

Inyección de dependencia

Angular 1.x tiene dos API para inyectar dependencias en una directiva. Angular 2 unifica las dos API, lo que hace que el código sea más fácil de entender y probar.

Tubería

Se pueden agregar tuberías al final de las expresiones para traducir el valor a un formato diferente.

Trabajadores web

El soporte de WebWorker en Angular está diseñado para facilitar el aprovechamiento de la paralelización en su aplicación web. Cuando elige ejecutar su aplicación en un WebWorker angular, se ejecuta tanto la lógica de su aplicación como la mayoría del marco angular central en un WebWorker.

HTTP

HttpClient ofrece una API HTTP de cliente simplificada para aplicaciones angulares que se basa en la interfaz XMLHttpRequest expuesta por los navegadores. Los beneficios adicionales de HttpClient incluyen funciones de capacidad de prueba, objetos de solicitud y respuesta escritos, interceptación de solicitudes y respuestas, API observables y manejo de errores optimizado.

Enrutador

Prueba

Compilación anticipada

CLI angular

Webpack

Serie

Tutoriales en vídeo

Guías de estilo

Conexión angular

Libros

En el lugar de entrenamiento

Enfoque y explicación

Integraciones

Decoradores

  • segal-decorators ¡ Montón de decoradores útiles para la web!
  • Conexión de la propiedad del componente ng-portal en la aplicación Angular.
  • ng-lock Decorador angular para bloquear una función y una interfaz de usuario mientras se ejecuta una tarea.

Plantillas del sitio

Tubería

Generadores

Herramientas de documentación

  • Storybook : “El entorno de desarrollo de la interfaz de usuario que le encantará usar”
  • Compodoc : “La herramienta de documentación que falta para su aplicación Angular 2”, se integra bien con los scripts npm
  • NgModule-Viz : visualice las dependencias entre los NgModules en su aplicación Angular 2+.
  • ng-app-counter : cuente el número de módulos, módulos perezosos, tuberías, proveedores, directivas y componentes utilizados en una aplicación angular.

Herramientas de desarrollo

  • Inspector de estado angular : lo ayuda a depurar el estado del componente angular. Soporta Angular 1/2 + / Ivy.
  • Augury : extensión del navegador para depurar y perfilar aplicaciones angulares.
  • CodeSandbox : un IDE en línea y una herramienta de creación de prototipos para un desarrollo angular rápido.
  • Bugfender : un servicio en la nube para recopilar registros y errores angulares en tiempo real.

TodoMVC

Esquemas

  • Cypress : agregue Cypress a una aplicación CLI angular
  • Jest : configure Angular para ejecutar pruebas unitarias con Jest en lugar de Karma + Jasmine
  • Prettier : agregue Prettier y un gancho de confirmación previa para formatear archivos en etapas en una aplicación Angular
  • Tailwind CSS : agregue Tailwind CSS a una aplicación angular
  • Threejs : nueva aplicación de inicio three.js

Componentes de terceros

Animaciones

  • lottie-angular2 : renderiza animaciones de After Effects en Angular2 basadas en Bodymovin.
  • ng-animate -🌙 Una colección de animaciones geniales, reutilizables y flexibles para Angular
  • ngx-interactive-paycard : biblioteca interactiva de tarjetas de pago con animaciones fluidas
  • ng-partículas : un componente para agregar fácilmente animaciones de partículas a su aplicación Angular

Componentes de autenticación

  • casl-angular – Módulo que integra la biblioteca de administración de permisos isomórficos CASL con Angular2 +
  • ng2-permiso : control de acceso basado en permisos con todas las funciones para sus aplicaciones angulares 4+. Este módulo inspirado en angular-permission.
  • ngx-auth-firebaseui : componente de interfaz de usuario de material angular parafirebase authentication
  • ngx-auth -Utilidad de autenticación para Angular por @ fulls1z3
  • ngx-permissions : control de acceso basado en permisos y roles para sus aplicaciones angulares (angular 2, angular 4,5+) (AOT, compatible con módulos perezosos)

Componentes de backend

  • Cloudinary : SDK de Angular2 para la gestión de imágenes y videos en la nube
  • ng-s-resource : simplifica el generador de recursos http RESTful para Angular 4+.
  • ngx-restangular – Restangular para Angular 2 y versiones superiores.

Calendarios

  • angular-calendar : un componente de calendario flexible para angular 6.0+ que puede mostrar eventos en una vista de mes, semana o día.
  • ng-data-picker – 🏄🏼 Un selector de datos basado en Angular 4+ (como el selector de fecha y hora nativo de iOS)
  • ng-fullcalendar Módulo de calendario completo para Angular

Gráficos

  • @ ctrl / ngx-chartjs – Contenedor funcional Chart.js para Angular
  • dl-chart : biblioteca de gráficos simple y liviana sin dependencias externas
  • ng2-charts Hermosos gráficos para Angular2 basados en Chart.js
  • ngx-charts – ¡Marco declarativo de gráficos para Angular2 y más allá!
  • ngx-f2 : envoltorio Angular2 + para gráficos orientados a dispositivos móviles antv f2
  • ngx-trend -📈 Líneas de chispa simples y elegantes para Angular

Arrastrar y soltar

Componentes del editor

Subir archivo

  • @ ctrl / ngx-droppable – Otorga la capacidad de soltar archivos a cualquier elemento o componente
  • file-droppa Componente de carga y descarga de archivos simples con lista de archivos
  • ng2-file- upload Directivas de carga de archivos fáciles de usar
  • ngx-awesome-uploader Angular Library para cargar archivos. Admite: Carga y vista previa de archivos (además, vista previa de imágenes con caja de luz), validación, recorte de imágenes, arrastrar y soltar con soporte en varios idiomas.
  • ngx-dropzone : componente altamente personalizable para manejar archivos y selección.
  • ngx-flow : contenedor de Angular7 + para flow.js para la carga de archivos

Controles de formulario

Iconos

  • Angular2-fontawesome Componentes y directivas de Angular2 para Fontawesome
  • ng2-fontawesome Una pequeña directiva que hace que la fuente asombrosa sea aún más fácil de usar.
  • ngx-icon-blur Un componente angular que se puede usar para crear un efecto de vidrio esmerilado de iconos.

Ratón del teclado

Componentes de diseño

  • angular-fullpage Componente oficial para fullPage.js, una biblioteca de desplazamiento a pantalla completa.
  • componente de división angular de división angular
  • angular2-infinite-scroll : una directiva de desplazamiento infinito para Angular2 (basada en Observables)
  • egjs-infinitegrid : organiza elementos de tarjeta infinitos de acuerdo con varios tipos de diseño, como mampostería para Angular.
  • ng2-card – Componente de vista de tarjeta para Angular2
  • ng2-fullpage Desplazamiento de página completa para Angular2 basado en fullPage.js
  • ng2-sheet Angular2 Components para agregar sus componentes dentro de una ventana de hoja y repetidamente
  • ng2-swipeable-card – Componente de tarjeta deslizable para Angular2
  • ngx-scrolltopBotón ligero inspirado en Material Design para desplazarse hacia la parte superior de la página.🔼 Sin dependencias. Pure Angular! (Compatibilidad: Angular 9, Ivy, Universal, ng add)
  • od-virtualscroll Implementación de desplazamiento virtual basada en observaciones en Angular

Cargadores

Mapas

Notificaciones

  • ng-snotify – Centro de notificaciones de Angular 4
  • ng2-sweetalert2 Un contenedor de sweetalert2 para usar con Angular 2.
  • ngx-popper : gestión de información sobre herramientas, contenedor para popper.js ( https://popper.js.org/ )
  • ngx-toastr – Notificaciones / Toastr

Administración del Estado

  • angular2-query-builder Generador de consultas modernizado basado en jquery QueryBuilder
  • Biblioteca angular2-jwt para enviar solicitudes HTTP autenticadas y decodificar JWT
  • Biblioteca angular2-cookie que implementa el servicio de cookies Angular 1.x $ en Angular 2
  • Envoltura de protección angular alrededor de cookies / sessionStorage / localStorage para angular2. Si no todos están disponibles, se utilizará un almacenamiento en memoria.
  • ng2-storage Un contenedor localStorage y sessionStorage escrito usando los proxies ES6 para Angular 2
  • NGX-store – Complejo biblioteca para la gestión localStorage, sessionStoragey las cookies, permite ver los cambios de datos, ofrece decoradores y API se basa en Builder
  • ngx-liquid-cache : un sistema de caché Angular 2 potente, automático y optimizado que cabe en todas partes.
  • ng-http-cache : acelere sus solicitudes remotas almacenándolas en caché automáticamente en el cliente.
  • ngx-cache : utilidad de caché para Angular (incluidas implementaciones de plataforma de navegador y servidor) de @ fulls1z3
  • universal-model-angular – Gestión de almacenamiento y estado para Angular
  • ng-http-caching : caché para solicitudes HTTP en la aplicación Angular.

Mesas

Bibliotecas de UI

General

  • @ ngx-kit / sula – Conjunto de componentes temáticos para Angular.
  • Axponents: de componentes web accesibles (Dylan Barrell)
  • Element Angular : componentes de Element Design construidos sobre Angular 2
  • Essential JS 2 para Angular de Syncfusion : más de 60 componentes de interfaz de usuario de alto rendimiento, ligeros, modulares y receptivos para Angular.
  • Nebular : conjunto de módulos esenciales (tema, kit de interfaz de usuario, autenticación, seguridad) para aplicaciones angulares complejas
  • NG ZORRO MOBILE : un componente de interfaz de usuario móvil de clase empresarial basado en Ant Design Mobile y Angular.
  • NG ZORRO : un componente de interfaz de usuario de clase empresarial basado en Ant Design y Angular.
  • ng-lightning Native Angular 2 componentes y directivas para Lightning Design System
  • ng-metro4 – Implementación angular del marco de interfaz de usuario Metro4
  • ng-sq-ui : kit de interfaz de usuario de calidad simple para Angular. ¡Construido por desarrolladores para desarrolladores![contribuciones bienvenidas](https://camo.githubusercontent.com/abbd1d450cda21931f7eca3fdaf5161757379a863bbc462cd143dcd8a7840361/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6973737565732d77656c636f6d652d627269676874677265656e2e7376673f7374796c653d666c6174) Mantenibilidad
  • ngSemantic : componentes de la interfaz de usuario basados en la interfaz de usuario semántica
  • ngx-qrcode2 : una biblioteca de componentes Angular 4+ para generar códigos QR (respuesta rápida)
  • ngx-ui – ¡Biblioteca de estilos y componentes para Angular2 y más allá!
  • Colección prime-ng de componentes de interfaz de usuario enriquecidos para Angular 2
  • Claridad de vmware : principalmente un marco de CSS solo, pero algunos componentes se transfieren a Angular 2
  • Wijmo 5 : conjunto de componentes de interfaz de usuario para Angular2

Basado en material

Basado en Bootstrap

  • @ firebaseui / ng-bootstrap – Biblioteca de interfaz de usuario de Bootstrap angular para la firebase authenticationtecnología @ ng-bootstrap
  • diseño de material angular-bootstrap-md para Bootstrap 4 (angular)
  • Fuel-ui Bootstrap 4 componentes y directivas para usar en Angular 2
  • ng-bootstrap – Directivas de Angular 4 para Bootstrap 4 por el equipo de ui-bootstrap
  • ng2-bootstrap Native Angular2 Bootstrap 3 y 4 componentes
  • ng2-bs Experimentos con directivas de Angular 2 para Bootstrap.
  • ng2-modal Ventana modal para angular2 y bootstrap 3
  • ng2-paginator Control de paginación para angular2 y bootstrap 3
  • ng2-tabs Control de pestañas para angular2 y bootstrap 3

Componentes UX

  • angular-shepherd – Servicio Angular 7 que envuelve la biblioteca de visitas del sitio Shepherd
  • ng2-archwizard – Componente asistente para Angular 2
  • ngx-app-tour : complemento de Angular2 + para crear un recorrido, un escaparate o un recorrido para su aplicación

Espectadores

Componentes misceláneos

  • @ ngx-context – Contexto angular: enlace de propiedad fácil para la salida del enrutador y los árboles de componentes anidados.
  • Angular SizeObserver : elementos DOM de estilo según su tamaño de visualización (en lugar del tamaño de la pantalla del navegador).
  • angular2-simple-countdown : una directiva angular2 simple de cuenta regresiva con varios idiomas
  • ng-chat : un sencillo módulo de chat similar a facebook / linkedin para aplicaciones angulares
  • ng-google-sheets-db 🚀 Utilice Hojas de cálculo de Google como su backend (de solo lectura).
  • ng-katex Módulo angular para escribir hermosas expresiones matemáticas con sintaxis TeX impulsada por la biblioteca KaTeX
  • ng-wormhole : renderiza componentes en otro lugar del DOM
  • ng2-adsense : AdSense sencillo para aplicaciones angulares
  • ngx-avatar – Componente Avatar que permite generar / buscar avatar en base a la información que tiene sobre el usuario.
  • ngx-cdmon : biblioteca para monitorear el rendimiento de detección de cambios angulares.
  • ngx-countdown : cuenta regresiva simple, fácil y de rendimiento para angulares
  • @ ngneat / transloco -🚀 😍 La biblioteca de internacionalización (i18n) para Angular
  • ngx-i18n-router : utilidad de internacionalización de rutas para Angular por @ fulls1z3
  • ngx-linkifyjs : contenedor Angular V6 para linkifyjs: biblioteca para encontrar enlaces en texto plano y convertirlos en etiquetas HTML a través de linkifyjs
  • ngx-meta : utilidad dinámica de título de página y metaetiquetas para Angular (con representación del lado del servidor) por @ fulls1z3
  • ngx-wheel – ¡Componente de rueda premiadora angular!
  • xng-breadcrumbSolución de migas de pan de configuración cero. Un pan rallado ligero, configurable y reactivo para Angular 6 y más allá.

Pila de mermelada

  • scully : Scully es un generador de sitios estáticos para proyectos angulares que buscan adoptar Jamstack.

Universal Angular 2

Soporte javascript universal (isomórfico) para Angular 2

Cursos y tutoriales universales

Recursos generales universales

Proyectos de semillas universales

  • universal-starter – Kit de inicio universal Angular 2 de @ Angular-Class
  • ng-seed / universal : proyecto semilla para aplicaciones Angular Universal con renderización del lado del servidor (SSR), Webpack, modos dev / prod, DLL, compilación AoT, HMR, compilación SCSS, carga diferida, configuración, caché, i18n, SEO y TSLint / codelyzer por @ fulls1z3
  • angular-universal – Kit de inicio rápido, sin pinchazos y minimalista para Angular Universal 100% impulsado por Angular CLI
  • angular-universal-heroku-starter – Angular 7 Universal Starter Kit con Server-Side Rendering (SSR) y fácil implementación en Heroku

Angular 2 en TypeScript

TypeScript te permite escribir JavaScript de la forma que realmente quieras. TypeScript es un superconjunto escrito de JavaScript que se compila en JavaScript simple.

Recursos generales de TypeScript

Proyectos semilla de TypeScript


Ionic 2 en Angular 2

Ionic es el hermoso SDK de front-end de código abierto para desarrollar aplicaciones móviles híbridas con tecnologías web.

Recursos generales de Ionic 2


Angular 2 en Córdoba

Apache Cordova es un marco de desarrollo de aplicaciones móviles popular que utiliza CSS3, HTML5 y JavaScript en lugar de depender de API específicas de la plataforma.

Proyectos Semilla de Córdoba


Angular 2 en Dardo

Dart es un lenguaje de programación escalable y de código abierto, con bibliotecas y tiempos de ejecución robustos, para crear aplicaciones web, de servidor y móviles.

Recursos generales de Dart

  • Dardo página oficial de dardo
  • Dartpad Dartpad permite jugar con Dart en línea, en un entorno de instalación cero y configuración cero.
  • Organización de Dart (GitHub) Organización oficial de GitHub para Dart
  • Pub Repositorio de paquetes de software para el lenguaje de programación Dart.
  • Dartisans La comunidad oficial de Dart en Google+
  • Dart Slack Channel El canal oficial de Dart Slack.

Proyectos de semillas de dardos

  • Inicio rápido de Angular 2 Dart Un proyecto de inicio rápido mínimo.

Demostración, muestras y ejemplos de Dart


Angular 2 en Traceur

Traceur es un compilador JavaScript.next-to-JavaScript-of-today

Recursos generales de Traceur

Proyectos de semillas de Traceur


Angular 2 en Babel

El compilador para escribir JavaScript de próxima generación.

Recursos generales de Babel

Zona de juegos en línea de Babel Angular 2

Proyectos Semilla de Babel

Demostración, ejemplos y ejemplos de Babel

Complementos de Babel


Angular 2 en ES5

Un lenguaje ECMAScript que incluye características estructuradas, dinámicas, funcionales y basadas en prototipos.

Recursos generales de ES5

Proyectos Semilla ES5

Kit de inicio angular2-es5 Kit de inicio Angular2 ES5


Meteor en Angular 2

Cree aplicaciones web y móviles en tiempo real con Angular y Meteor

Recursos generales de meteoritos

Proyectos de semillas de meteoritos


Angular 2 en NativeScript

Cree aplicaciones verdaderamente nativas para iOS, Android y Windows Phone con Javascript y CSS. Pruebe el marco de código abierto NativeScript para el desarrollo multiplataforma.

Recursos generales de NativeScript

Proyectos semilla de NativeScript


Angular 2 en React Native

React Native le permite crear experiencias de aplicaciones de clase mundial en plataformas nativas utilizando una experiencia de desarrollador consistente basada en JavaScript.

Reaccionar recursos generales nativos

Reaccionar proyectos nativos

Reaccionar proyectos de semillas nativas


Angular 2 en Haxe

Haxe es un conjunto de herramientas de código abierto basado en un lenguaje de programación moderno, de alto nivel y estrictamente escrito, un compilador cruzado, una biblioteca estándar multiplataforma completa y formas de acceder a las capacidades nativas de cada plataforma. Lenguaje de propósito general, con Haxe, puede crear fácilmente herramientas multiplataforma dirigidas a todas las plataformas principales de forma nativa. “Escriba una vez compile en cualquier lugar”, con un sólido sistema de macros fácilmente ampliable y un compilador potente y altamente optimizador con DCE (y fe usando constructores en línea). Se puede usar para la representación del lado del servidor y de manera isomórfica; es posible compartir el mismo código fuente compilando en el lado del cliente en javascript y en el lado del servidor en pyhton (o java / php / node; se puede elegir más adelante / cambiar en la escala). El código Haxe puede contener (en línea) cualquier fragmento del idioma de destino (se puede usar para realizar la migración paso a paso), El mecanismo externo proporciona acceso a las API y bibliotecas nativas de forma segura. Servidor, cliente, móvil (Android e iOS a la vez), escritorio, integrado (Raspbery, decodificadores TIVO premiados), Playstation … todos se pueden acceder de forma nativa con mucho menos mecanografía, más a prueba de errores, más estable y compilado código verificado de tipo-time incluso para objetivos no seguros de tipo (fe JavaScript, PHP)!

Recursos generales de Haxe

Proyectos de semillas de Haxe


Angular 2 en Scala

Lenguaje de propósito general; multiparadigma (elementos concurrentes, funcionales, orientados a objetos); tipado estáticamente, con seguridad de tipeo; foco: servicios web.

Recursos generales de Scala

Proyectos Scala Seed


Angular 2 componentes con Bit

Bit es un repositorio virtual de código abierto (base de código) creado para hacer que los componentes sean fácilmente administrables y utilizables en todas las aplicaciones. Puede exportar rápidamente cualquier componente Angular desde cualquier contexto mientras trabaja en cualquier proyecto a un Scope poco distribuido. El entorno de componentes reutilizables de Bit reduce la sobrecarga de configurar entornos de prueba y compilación para exportar cada componente nuevo. El Scope es un repositorio de componentes virtual que almacena, organiza, administra y prueba sus componentes. Una vez modelados en un Scope, sus componentes se pueden encontrar y usar fácilmente en cualquier aplicación Angular. Los componentes se pueden organizar juntos y aún así modificar y usar individualmente sin tener que extraer bibliotecas enteras.

Recursos de bits

  • Poco
  • Bit-Javascript
  • bitsrc : centro comunitario gratuito para compartir, administrar y encontrar componentes de código abierto.

Seguridad

NgRx