登录
当前位置： 首页 > 软件库 > Web应用开发 > Web框架 >

awesome-angular

📄 A curated list of awesome Angular resources
授权协议 CC0-1.0 License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 益富
操作系统 跨平台
开源组织 无
适用人群 未知
软件官网
软件文档
官方下载
安全指数
 软件概览

Awesome Angular

Awesome list of Angular seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular ecosystem. View as github page.

If you're looking for AngularJS (version 1.x.x) please visit https://github.com/gianarb/awesome-angularjs

Current Angular version:

Table of contents:

Angular

Angular is a development platform for building mobile and desktop web applications.

Official Resources

Community

Angular Team on twitter

Experts on Twitter

List of Angular experts you should follow on Twitter (in no particular order). This list is by no means complete.

Google Developer Experts

Server-Side Rendering

Material Design

  • Official Angular Material Design (GitHub)
  • md2 Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Switch, Tabs, Tags(Chips), Toast and Tooltip.
  • ng2-material set of material2 examples and extra components (data table, dialog, ...) built on top of @angular2-material/core
  • angular2-mdl Angular 2 components, directives and styles based on Material Design Lite
  • mdl-ext Material Design Lite Ext (carusel, grid, lightbox, selectfield, sticky header, ...)
  • ng2-materialize An Angular 2 wrap around Materialize library
  • Material Light Light, fast and easy to use Material Design components for Angular 2+ (Especially for mobile UI). There are several alternatives but this one has added value and advantages in my opinion (Take a loot at the Readme.md for details). There is also an online demo to see it in action. (API documentation is still lacking but in process).
  • Blox Material A lightweight Material Design library for Angular, based upon Google's Material Components for the Web.
  • Material Web Components Material Web Components for Angular. A faithful and accurate representation of Material Design as envisioned on the web.
  • MDBootstrap Built with Angular 7, Bootstrap 4 and TypeScript powerful UI KIT providing a set of slick, responsive page templates, layouts, components and widgets to rapidly build responsive, mobile-first websites and apps.

Cheatsheet

Features

Directives

Directives allow you to attach behavior to elements in the DOM.

Components

A component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.

View

A View is a core primitive used by angular to render the DOM tree.

Templates

Templates are markup which is added to HTML to declaratively describe how the application model should beprojected to DOM as well as which DOM events should invoke which methods on the controller.

Change detection

Every component gets a change detector responsible for checking the bindings defined in its template.

Dependency Injection

Angular 1.x has two APIs for injecting dependencies into a directive. Angular 2 unifies the two APIs, making the code easier to understand and test.

Pipes

Pipes can be appended on the end of the expressions to translate the value to a different format.

Web Workers

WebWorker support in Angular is designed to make it easy to leverage parallelization in your web application.When you choose to run your application in a WebWorker angular runs both your application's logic and themajority of the core angular framework in a WebWorker.

HTTP

The HttpClient offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable apis, and streamlined error handling.

Router
Test
Ahead-of-Time Compilation

Angular CLI

Webpack

Series

Video Tutorials

Style Guides

Angular Connect

Books

On-Site Training

Approach and Explanation

Integrations

Decorators

  • segal-decorators Bunch of useful decorators for the web!
  • ng-portal Component property connection in Angular application.
  • ng-lock Angular decorator for lock a function and user interface while a task running.

Site Templates

Pipes

Generators

Documentation tools

  • Storybook : "The UI development environment you'll love to use"

  • Compodoc : "The missing documentation tool for your Angular 2 application", integrate well with npm scripts

  • NgModule-Viz : Visualize the dependencies between the NgModules in your Angular 2+ application.

  • ng-app-counter : Count the number of Modules, Lazy Modules, Pipes, Providers, Directives, Components used in an Angular application.

Developer tools

  • Angular State Inspector - Helps you debug Angular component state. Supports Angular 1/2+/Ivy.
  • Augury - Browser extension for debugging and profiling Angular applications.
  • CodeSandbox - An online IDE and prototyping tool for rapid Angular development.
  • Bugfender - A cloud service to collect logs and Angular errors in Real-Time.

TodoMVC

Schematics

  • Cypress: Add Cypress to an Angular CLI application
  • Jest: Configure Angular to execute unit tests with Jest instead of Karma + Jasmine
  • Prettier: Add Prettier and a pre-commit hook for formatting staged files in an Angular application
  • Tailwind CSS: Add Tailwind CSS to an Angular application
  • Threejs: New three.js starter app

Third Party Components

Animations

  • lottie-angular2 - Render After Effects animations on Angular2 based on Bodymovin.
  • ng-animate - �� A collection of cool, reusable and flexible animations for Angular
  • ngx-interactive-paycard - Interactive payment card library with smooth animations
  • ng-particles - A component to easily add Particles animations to your Angular application

Auth Components

  • casl-angular - Module which integrates isomorphic permissions management library CASL with Angular2+
  • ng2-permission - Fully featured permission based access control for your angular 4+ applications. This module inspired from angular-permission.
  • ngx-auth-firebaseui - Angular Material UI component for firebase authentication
  • ngx-auth -Authentication utility for Angular by @fulls1z3
  • ngx-permissions - Permission and roles based access control for your angular(angular 2, angular 4,5+) applications(AOT, lazy modules compatible)

Backend Components

  • Cloudinary - Angular2 SDK for image and video management in the cloud
  • ng-s-resource - Simplify RESTful http resource generator for Angular 4+.
  • ngx-restangular - Restangular for Angular 2 and higher versions.

Calendars

  • angular-calendar - A flexible calendar component for angular 6.0+ that can display events on a month, week or day view.
  • ng-data-picker - ���� A data picker based on Angular 4+ (like iOS native datetime picker)
  • ng-fullcalendar Fullcalendar module for Angular

Charts

  • @ctrl/ngx-chartjs - Functional Chart.js wrapper for Angular
  • dl-chart - Simple and lightweight Chart library without extern Dependencies
  • ng2-charts Beautiful charts for Angular2 based on Chart.js
  • ngx-charts - Declarative Charting Framework for Angular2 and beyond!
  • ngx-f2 - Angular2+ wrapper for antv f2 mobile oriented charts
  • ngx-trend - �� Simple, elegant spark lines for Angular

Drag/Drop

  • angular2-grid A drag/drop/resize grid-based plugin directive for angular2.
  • ng2-dragula Drag and Drop so simple it hurts!

Editor Components

File Upload

  • @ctrl/ngx-droppable - Give file dropping ability to any element or component
  • file-droppa Simple files drop and upload component with files list
  • ng2-file-upload Easy to use file upload directives
  • ngx-awesome-uploader Angular Library for uploading files. It supports: File Upload and Preview (additionally preview images with lightbox), validation, image cropper , drag and drop with multi language support.
  • ngx-dropzone - Highly customizable component to handle file drops and selection.
  • ngx-flow - Angular7+ wrapper for flow.js for file upload

Form Controls

  • @ctrl/ngx-emoji-mart - Customizable Slack-like emoji picker for Angular
  • angular-imask Angular 4+ input mask
  • angular2-multiselect-dropdown Angular 2 multiselect dropdown component for web applications
  • angular2-text-mask Angular 2 input mask directive
  • ng-fveh - Form Validations Errors Helper - Some helpers to help you with form validation :)
  • ng-select Angular ng-select - All in One UI Select, Multiselect and Autocomplete
  • ng2-dropdown Dropdown menu for angular2 and bootstrap 3
  • ng2-radio-group Angular2 directives for radio and checkbox inputs and radio input groups
  • ng2-select Angular2 based replacement for select boxes
  • ngx-color - �� Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
  • ngx-credit-cards - A Credit Card Directives and Form Validators package for Angular X (4+).
  • ngx-flag-picker - �� Customizable Angular component which containing a dropdown with country flags
  • ngx-flexible-select - The most flexible and customized select
  • ngx-recursive-form - Angular recursive form at any level based on your json input.

Icons

  • angular2-fontawesome Angular2 Components and Directives for Fontawesome
  • ng2-fontawesome A small directive making font awesome even easier to use.
  • ngx-icon-blur An Angular component that can be used to create frosted glass effect of icons.

Keyboard Mouse

Layout Components

  • angular-fullpage Official component for fullPage.js, a fullscreen scrolling library.
  • angular-split Angular split component
  • angular2-infinite-scroll - An Infinite Scroll Directive for Angular2 (based on Observables)
  • egjs-infinitegrid - Arrange infinite card elements according to various layout types like masonry for Angular.
  • ng2-card - Card view component for Angular2
  • ng2-fullpage Fullpage scrolling for Angular2 based on fullPage.js
  • ng2-sheet Angular2 Components to add yours components inside a sheet window and repeatedly
  • ng2-swipeable-card - Swipeable card component for Angular2
  • ngx-scrolltop - Lightweight, Material Design inspired button for scroll-to-top of the page. �� No dependencies. Pure Angular! (Compatibility: Angular 9, Ivy, Universal, ng add)
  • od-virtualscroll Observable-based virtual scroll implementation in Angular

Loaders

Maps

Notifications

State Management

  • angular2-query-builder Modernized query builder based on jquery QueryBuilder
  • angular2-jwt Library for sending authenticated HTTP requests and decoding JWTs
  • angular2-cookie Library that implements Angular 1.x $cookies service in Angular 2
  • angular-safeguard Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.
  • ng2-storage A localStorage and sessionStorage wrapper written using ES6 Proxies for Angular 2
  • ngx-store - Complex library for managing localStorage, sessionStorage and cookies, allows to watch data changes, provides decorators and API based on builder pattern
  • ngx-liquid-cache - A powerful, automatic and optimized Angular 2 cache system that fits everywhere!
  • ng-http-cache - Speed up your remote requests by automatically caching them on client.
  • ngx-cache - Cache utility for Angular (incl. browser & server platform implementations) by @fulls1z3
  • universal-model-angular - Store and state management for Angular
  • ng-http-caching - Cache for HTTP requests in Angular application.

Tables

  • ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
  • ng2-handsontable Excel-like data grid / spreadsheet
  • ng2-smart-table Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
  • ng2-table Simple table extension with sorting, filtering, paging... for Angular2 apps
  • ngfb-sortable-table - Angular Firebase Sortable Table. Ability to filter and sort data with own firebase quering tools.
  • ngx-datatable A feature-rich yet lightweight data-table crafted for Angular2 and beyond!
  • ignite-ui-angular's grid - The data grid, tree grid, hierarchical grid in Ignite UI for Angular provide excel-style filtering, live-data, sorting, draggable row and other toolbar.

UI Libraries

General
  • @ngx-kit/sula - Set of themed components for Angular.
  • Axponents: of Accessible Web Components (Dylan Barrell)
  • Element Angular - Element Design components built on top of Angular 2
  • Essential JS 2 for Angular by Syncfusion - Over 60 high-performance, lightweight, modular, and responsive UI components for Angular.
  • Nebular - set of essential (Theme, UI Kit, Auth, Security) modules for complex Angular applications
  • NG ZORRO MOBILE - An enterprise-class mobile UI components based on Ant Design Mobile and Angular.
  • NG ZORRO - An enterprise-class UI components based on Ant Design and Angular.
  • ng-lightning Native Angular 2 components & directives for Lightning Design System
  • ng-metro4 - Angular implementation of UI framework Metro4
  • ng-sq-ui - Simple Quality UI kit for Angular. Build by developers for developers!
  • ngSemantic - UI components based on Semantic UI
  • ngx-qrcode2 - An Angular 4+ Component library for Generating QR (Quick Response ) Codes
  • ngx-ui - Style and Component Library for Angular2 and beyond!
  • prime-ng Collection of rich UI components for Angular 2
  • vmware clarity - Mostly a CSS only framework but some components are ported to Angular 2
  • Wijmo 5 - Set of UI components for Angular2
Material Based
Bootstrap Based
  • @firebaseui/ng-bootstrap - Angular Bootstrap UI library for firebase authentication powered by @ng-bootstrap
  • angular-bootstrap-md Material Design for Bootstrap 4 (Angular)
  • fuel-ui Bootstrap 4 components and directives for use in Angular 2
  • ng-bootstrap - Angular 4 directives for Bootstrap 4 by the ui-bootstrap team
  • ng2-bootstrap Native Angular2 Bootstrap 3&4 components
  • ng2-bs Experiments with Angular 2 directives for Bootstrap.
  • ng2-modal Modal window for angular2 and bootstrap 3
  • ng2-paginator Pagination control for angular2 and bootstrap 3
  • ng2-tabs Tabs control for angular2 and bootstrap 3

UX Components

Viewers

Misc Components

  • @ngx-context - Angular Context: Easy property binding for router outlet and nested component trees..
  • Angular SizeObserver - style DOM elements based on their display size (rather than browser screen size).
  • angular2-simple-countdown - a simple countdown angular2 directive with multiple language
  • ng-chat - A simple facebook/linkedin lookalike chat module for Angular applications
  • ng-google-sheets-db �� Use Google Sheets as your (read-only) backend!
  • ng-katex Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library
  • ng-wormhole - Render components somewhere else in the DOM
  • ng2-adsense - Easy AdSense for Angular Applications
  • ngx-avatar - Avatar component that makes it possible to genearte / fetch avatar based on the information you have about the user.
  • ngx-cdmon - Library for monitoring Angular change detection performance.
  • ngx-countdown - Simple, easy and performance countdown for angular
  • @ngneat/transloco - �� �� The internationalization (i18n) library for Angular
  • ngx-i18n-router - Route internationalization utility for Angular by @fulls1z3
  • ngx-linkifyjs - Angular V6 wrapper for linkifyjs - library for finding links in plain text and converting them to HTML tags via linkifyjs
  • ngx-meta - Dynamic page title & meta tags utility for Angular (w/server-side rendering) by @fulls1z3
  • ngx-wheel - Angular prize winning wheel component!
  • xng-breadcrumb - Zero config breadcrumb solutuon. A lightweight, configurable and reactive breadcrumbs for Angular 6 and beyond.

JAM Stack

  • scully - Scully is a static site generator for Angular projects looking to embrace the Jamstack.

Universal Angular 2

Universal (isomorphic) javascript support for Angular 2

Universal Courses And Tutorials

Universal General Resources

Universal Seed Projects

  • universal-starter - Angular 2 Universal starter kit by @Angular-Class
  • ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer by @fulls1z3
  • angular-universal - Fast, Unopinionated, Minimalist starter kit for Angular Universal 100% powered by Angular CLI
  • angular-universal-heroku-starter - Angular 7 Universal Starter Kit with Server-Side Rendering (SSR) and easy deployment to Heroku

Angular 2 in TypeScript

TypeScript lets you write JavaScript the way you really want to.TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript General Resources

TypeScript Seed Projects

Ionic 2 in Angular 2

Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.

Ionic 2 General Resources

Angular 2 in Cordova

Apache Cordova is a popular mobile application development framework using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs.

Cordova Seed Projects

Angular 2 in Dart

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

Dart General Resources

  • Dart Official Website for Dart
  • Dartpad Dartpad lets play with Dart on-line, in a zero-install, zero configuration environment.
  • Dart Organization (GitHub) Official GitHub Organization for Dart
  • Pub Repository of packages of software for the Dart programming language.
  • Dartisans The Official Dart Google+ community
  • Dart Slack Channel The Official Dart Slack channel.

Dart Seed Projects

Dart Demo, Samples, and Examples

Angular 2 in Traceur

Traceur is a JavaScript.next-to-JavaScript-of-today compiler

Traceur General Resources

Traceur Seed Projects

Angular 2 in Babel

The compiler for writing next generation JavaScript.

Babel General Resources

Babel Angular 2 Online Playground

Babel Seed Projects

Babel Demo, Samples, and Examples

Babel Plugins

Angular 2 in ES5

An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.

ES5 General Resources

ES5 Seed Projects

angular2-es5-starter-kit Angular2 ES5 Starter Kit

Meteor in Angular 2

Build Realtime Web and Mobile Apps With Angular and Meteor

Meteor General Resources

Meteor Seed Projects

Angular 2 in NativeScript

Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.

NativeScript General Resources

NativeScript Seed Projects

Angular 2 in React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript

React Native General Resources

React Native Projects

React Native Seed Projects

Angular 2 in Haxe

Haxe is an open source toolkit based on a modern, high level, strictly typed programming language, a cross-compiler, a complete cross-platform standard library and ways to access each platform's native capabilities. General purpose language, with Haxe, you can easily build cross-platform tools targeting all the mainstream platforms natively. "Write once compile anywhere", with strong easily extendable macro system and powerfull, highly optimizing compiler with DCE (and f.e. using inline constructors). Can be used for server side rendering and in isomorphic way - possible to share the same source code compiling into client side in javascript and server side in pyhton (or java/php/node - can be choosen later/changed at scaling). Haxe code can contain (inline) any target language fragments (can be used to step by step porting), the externs mechanism provides access to the native APIs and libraries in a type-safe manner.Server, client, mobile (Android and iOS at once), desktop, embedded (Raspbery, award winning TIVO set top boxes), Playstation ... all can be reached natively with much less typing, more error-proof, more stable and compile-time type checked code even for non type-safe targets (f.e. JavaScript, PHP)!

Haxe General Resources

Haxe Seed Projects

Angular 2 in Scala

General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.

Scala General Resources

Scala Seed Projects

Angular 2 components with Bit

Bit is an open source virtual repository (code base) built to make components easily manageable and usable across applications. You can quickly export any Angular component from any context while working on any project to a bit distributed Scope. Bit's reusbale component environment cuts the overhead of configuring build and test environments for exporting every new component. The Scope is a virtual component repository which stores, organizes, manages and tests your components. Once modeled on a Scope, your components can be easily found and used in any Angular application. Components can be organized together and still modified and used individually without pulling in entire libraries.

Bit Resources

Security

NgRx

enjoy — PatrickJS

License

CC0

 相关资料
  • awesome-awesome-nodejs

    Awesome Awesome Node.js A curated list of awesome lists that are about or related to Node.js. Inspired by the awesome list thing, going deeper down the rabbit hole. �� Meta stuff about this awesome li

  • Awesome Vite.js

    A curated list of awesome things related to Vite.js This awesome list is for Vite 2.x and onward. Vite 1.x's list is archived. Resources Official Resources 文档 GitHub Repo Release Notes Vue 3 Docs Awes

  • Awesome Python

    Awesome Python 是一个资源整理集合，由 vinta 发起和维护。内容包括：Web框架、网络爬虫、网络内容提取、模板引擎、数据库、数据可视化、图片处理、文本处理、自然语言处理、机器学习、日志、代码分析等。 这个系列没有推荐 Python 书籍、经典博文、交互教程，所以另外推荐：《25本免费的Python电子书》、《学习Python编程的11个（教程）资源》、《PythonMonk：Py

  • Font Awesome

    Font Awesome 是一个图标工具包。其已经被重新设计并从头构建。除此之外，还增加了一些功能，比如 icon font ligature、SVG 框架、流行的前端库（如 React）的官方 NPM 包，以及对新 CDN 的访问。Font Awesome 已扩展至 7,865 个图标。

  • awesome-android

    awesome-android 收录了来自 github 或其他网站的关于 Android 的大部分库。

  • Awesome-CryptoNote

    The Lithe Project Development Team Awesome CryptoNote A curated list of awesome CryptoNote open-source blockchains, resources, projects, and shiny other things related.Many projects are derived from f

同类工具

KshopPHPDevShellJSFberowraangular-firebase-crudawesome-angularswoolefytempli

相关阅读

更改Font Awesome图标的颜色angular-route和angular-ui-router有什么区别？Angular 2 简单类扩展angular的Http类Angular 2 链管Angular ui.bootstrap.pagination分页

相关文章

相关问答

angular - Angular现在值得升到16吗？Angular 6和karma '无法加载“@angular-devkit/build-angular”，它没有注册'禁用字体颜色awesome图标angular-route和Angular-UI-Router有什么区别？Angular hybrid app - angular 2路由器不工作

相关文档

Angular Material 中文教程Angular 2 中文教程Angular 4 中文教程Rangle's Angular 2 Training Book 中文版Element Angular 组件帮助中文文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.