Angular

Awesome Angular

Awesome Angular Awesome Build Status

很棒的名单 Angular 种子存储库、初学者、样板、示例、教程、组件、模块、视频以及 Angular 生态系统中的任何其他内容. View as github page.

> 如果您正在寻找 AngularJS(版本 1.xx),请访问 https://github.com/gianarb/awesome-angularjs

Current Angular version:

npm version

目录:

Angular

> Angular 是一个用于构建移动和桌面 Web 应用程序的开发平台.

Official Resources

Community

Angular Team on twitter

Experts on Twitter

> 您应该在 Twitter 上关注的 Angular 专家列表(排名不分先后). 这个列表绝不是完整的.

Google Developer Experts

Server-Side Rendering

Material Design

  • Official Angular Material Design (GitHub)
  • md2 基于 Angular2 的 Material Design 组件、指令和服务包括 Accordion、Autocomplete、Collapse、Colorpicker、Datepicker、Dialog(Modal)、Menu、Multiselect、Select、Switch、Tabs、Tags(Chips)、Toast 和 Tooltip.
  • ng2-material 建立在@angular2-material/core 之上的一组 material2 示例和额外组件(数据表、对话框等)
  • angular2-mdl 基于 Material Design Lite 的 Angular 2 组件、指令和样式
  • mdl-ext Material Design Lite Ext(轮播、网格、灯箱、选择字段、粘性标题等)
  • ng2-materialize 一个 Angular 2 环绕 Materialize 库
  • Material Light 用于 Angular 2+(特别是移动 UI)的轻量、快速且易于使用的 Material Design 组件. 有几种替代方案,但在我看来,这一方案具有附加值和优势(详情请查看 Readme.md). 还有一个在线演示可以查看它的运行情况. (API 文档仍然缺乏,但正在处理中).
  • Blox Material Angular 的轻量级 Material Design 库,基于 Google 的 Material Components for the Web.
  • Material Web Components 用于 Angular 的 Material Web 组件. 忠实而准确地再现了网络上所设想的 Material Design.
  • MDBootstrap 使用 Angular 7、Bootstrap 4 和 TypeScript 强大的 UI KIT 构建,提供一组流畅的响应式页面模板、布局、组件和小部件,以快速构建响应式、移动优先的网站和应用程序.

Cheatsheet

Features

Directives

指令允许您将行为附加到 DOM 中的元素.

Components

组件是使用 shadow DOM 来创建封装视觉行为的指令. 组件通常用于创建 UI 小部件或将应用程序分解为更小的组件.

View

视图是 angular 用来渲染 DOM 树的核心原语.

Templates

模板是添加到 HTML 中的标记,用于声明性地描述应用程序模型应该如何 投射到 DOM 以及哪些 DOM 事件应该调用控制器上的哪些方法.

Change detection

每个组件都有一个变更检测器,负责检查其模板中定义的绑定.

Dependency Injection

Angular 1.x 有两个 API 用于将依赖项注入指令. Angular 2 统一了这两个 API,使代码更易于理解和测试.

Pipes

可以在表达式的末尾附加管道以将值转换为不同的格式.

Web Workers

Angular 中的 WebWorker 支持旨在让您可以轻松地在您的 Web 应用程序中利用并行化. 当您选择在 WebWorker 中运行您的应用程序时,angular 会同时运行您的应用程序逻辑和 WebWorker 中的大部分核心 Angular 框架.

HTTP

HttpClient 为基于浏览器公开的 XMLHttpRequest 接口的 Angular 应用程序提供了一个简化的客户端 HTTP API. HttpClient 的其他好处包括可测试性功能、类型化请求和响应对象、请求和响应拦截、Observable api 和简化的错误处理.

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 一堆有用的网络装饰器!
  • ng-portal Angular 应用程序中的组件属性连接.
  • ng-lock 用于在任务运行时锁定功能和用户界面的 Angular 装饰器.

Site Templates

Pipes

  • fuel-ui OrderBy 和 Range 管道从 Angular 1.x 移植到 Angular 2
  • ngx-filter-pipe Pipe for filtering arrays
  • ngx-pipes 一系列适用于 Angular 及其他领域的有用管道!
  • ngx-order-pipe 用于 Angular4+ 的 OrderBy 管道 - 按字段对集合进行排序
  • angular2-camelcase Angular2 管道将驼峰字符串转换为人类可读的字符串 编辑
  • ng-generic-pipe 用于 Angular 应用程序的通用管道.

Generators

Documentation tools

  • Storybook :“您会喜欢使用的 UI 开发环境”

  • Compodoc :“您的 Angular 2 应用程序缺少的文档工具”,与 npm 脚本很好地集成

  • NgModule-Viz :可视化 Angular 2+ 应用程序中 NgModules 之间的依赖关系.

  • ng-app-counter :计算 Angular 应用程序中使用的模块、延迟模块、管道、提供者、指令、组件的数量.

Developer tools

  • Angular State Inspector - 帮助您调试 Angular 组件状态. 支持 Angular ½+/Ivy.
  • Augury - 用于调试和分析 Angular 应用程序的浏览器扩展.
  • CodeSandbox - 用于快速 Angular 开发的在线 IDE 和原型设计工具.
  • Bugfender - 实时收集日志和 Angular 错误的云服务.

TodoMVC

Schematics

  • Cypress:将 Cypress 添加到 Angular CLI 应用程序
  • Jest: 配置 Angular 以使用 Jest 而不是 Karma + Jasmine 执行单元测试
  • Prettier: 添加 Prettier 和预提交挂钩,用于在 Angular 应用程序中格式化暂存文件
  • Tailwind CSS:将 Tailwind CSS 添加到 Angular 应用程序
  • Threejs:新的three.js入门应用

Third Party Components

Animations

Auth Components

  • casl-angular - 集成同构权限管理库的模块 CASL 使用 Angular2+
  • ng2-permission - 功能齐全的基于权限的访问控制,适用于 Angular 4+ 应用程序. 这个模块的灵感来自 angular-permission.
  • ngx-auth-firebaseui - 用于firebase``authentication的Angular Material UI组件
  • ngx-auth -@fulls1z3 的 Angular 身份验证实用程序
  • ngx-permissions - 基于权限和角色的 angular(angular 2、angular 4,5+)应用程序的访问控制(AOT,兼容惰性模块)

Backend Components

  • Cloudinary - 用于云端图像和视频管理的 Angular2 SDK
  • ng-s-resource - 简化 Angular 4+ 的 RESTful http 资源生成器.
  • ngx-restangular - 用于 Angular 2 及更高版本的 Retangular.

Calendars

  • angular-calendar - 用于 Angular 6.0+ 的灵活日历组件,可以在月、周或日视图中显示事件.
  • ng-data-picker - 基于 Angular 4+ 的数据选择器(如 iOS 原生日期时间选择器)
  • ng-fullcalendar 用于 Angular 的 Fullcalendar 模块

Charts

  • @ctrl/ngx-chartjs - Angular 的功能 Chart.js 包装器
  • dl-chart - 简单轻量的图表库,没有外部依赖
  • ng2-charts 基于 Chart.js 的 Angular2 漂亮图表
  • ngx-charts - Angular2 及更高版本的声明性图表框架!
  • ngx-f2 - Angular2+ 包装器,用于面向 antv f2 移动设备的图表
  • ngx-trend - Angular 的简单、优雅的火花线

Drag/Drop

Editor Components

File Upload

  • @ctrl/ngx-droppable - 为任何元素或组件提供文件删除功能
  • file-droppa 带有文件列表的简单文件删除和上传组件
  • ng2-file-upload 易于使用的文件上传指令
  • ngx-awesome-uploader 用于上传文件的 Angular 库. 它支持:文件上传和预览(还可以使用灯箱预览图像)、验证、图像裁剪器、具有多语言支持的拖放.
  • ngx-dropzone - 高度可定制的组件来处理文件删除和选择.
  • ngx-flow - Angular7+ 包装器 flow.js 用于文件上传

Form Controls

Icons

Keyboard Mouse

  • @ctrl/ngx-rightclick - Angular 的上下文菜单服务
  • angular-clickable-click - 使用标准的“(点击)”输出在元素上设置指针光标,并允许禁用此类事件
  • angular-esc - 添加由 Escape 键触发的 (esc) 输出
  • ngx-konami - 在 Angular 2+ 应用程序中添加复活节彩蛋的简单指令

Layout Components

  • angular-fullpage fullPage.js 的官方组件,全屏滚动库.
  • angular-split 角度分割组件
  • angular2-infinite-scroll - Angular2 的无限滚动指令(基于 Observables)
  • egjs-infinitegrid - 根据各种布局类型(如 Angular 的砌体)排列无限的卡片元素.
  • ng2-card - Angular2 的卡片视图组件
  • ng2-fullpage 基于 fullPage.js 的 Angular2 整页滚动
  • ng2-sheet Angular2 Components 将您的组件添加到工作表窗口中并重复添加
  • ng2-swipeable-card - Angular2 的可刷卡组件
  • ngx-scrolltop - 轻量级,Material Design 灵感按钮用于滚动到页面顶部. 无依赖. 纯 Angular!(兼容性:Angular 9、Ivy、Universal、ng add
  • od-virtualscroll Angular 中基于 Observable 的虚拟滚动实现

Loaders

Maps

Notifications

State Management

  • angular2-query-builder 基于 jquery QueryBuilder 的现代化查询构建器
  • angular2-jwt 用于发送经过身份验证的 HTTP 请求和解码 JWT 的库
  • angular2-cookie 在 Angular 2 中实现 Angular 1.x $cookies 服务的库
  • angular-safeguard 围绕 angular2 的 cookie/sessionStorage/localStorage 包装. 如果所有都不可用,将使用内存存储.
  • ng2-storage 使用 ES6 代理为 Angular 2 编写的 localStorage 和 sessionStorage 包装器
  • ngx-store - 用于管理localStoragesessionStorage 和cookies 的复杂库,允许观察数据变化,提供基于构建器模式的装饰器和API
  • ngx-liquid-cache - 适用于任何地方的强大、自动和优化的 Angular 2 缓存系统!
  • ng-http-cache - 通过在客户端上自动缓存它们来加速您的远程请求.
  • ngx-cache -@fulls1z3 的 Angular 缓存实用程序(包括浏览器和服务器平台实现)
  • universal-model-angular - Angular 的存储和状态管理
  • ng-http-caching - 在 Angular 应用程序中缓存 HTTP 请求.

Tables

  • ag-grid 纯 Javascript / AngularJS 1.x / AngularJS 2 / Web 组件的高级数据网格
  • ng2-handsontable 类似 Excel 的数据网格/电子表格
  • ng2-smart-table 具有排序、过滤、分页和添加/编辑/删除功能的智能数据表库.
  • ng2-table 用于 Angular2 应用程序的带有排序、过滤、分页功能的简单表格扩展
  • ngfb-sortable-table - 角度 Firebase 可排序表. 能够使用自己的 Firebase 查询工具过滤和排序数据.
  • ngx-datatable 为 Angular2 及更高版本制作的功能丰富但轻量级的数据表!
  • ignite-ui-angular's grid - 数据网格、树形网格、分层网格中 Ignite UI for Angular 提供excel风格的过滤、实时数据、排序、可拖动行等工具栏.

UI Libraries

General
Material Based
Bootstrap Based
  • @firebaseui/ng-bootstrap - Angular Bootstrap UI 库,用于firebase authentication 由@ng-bootstrap 提供支持
  • angular-bootstrap-md Bootstrap 4 的材料设计(Angular)
  • fuel-ui 用于 Angular 2 的 Bootstrap 4 组件和指令
  • ng-bootstrap - ui-bootstrap 团队针对 Bootstrap 4 的 Angular 4 指令
  • ng2-bootstrap 原生 Angular2 Bootstrap 3&4 组件
  • ng2-bs 对 Bootstrap 的 Angular 2 指令进行实验.
  • ng2-modal angular2 和 bootstrap 3 的模态窗口
  • ng2-paginator angular2 和 bootstrap 3 的分页控制
  • ng2-tabs angular2 和 bootstrap 3 的选项卡控件

UX Components

Viewers

Misc Components

  • @ngx-context - Angular Context:路由器出口和嵌套组件树的简单属性绑定..
  • Angular SizeObserver - 根据显示大小(而不是浏览器屏幕大小)设置 DOM 元素的样式.
  • angular2-simple-countdown - 一个多语言的简单倒计时 angular2 指令
  • ng-chat - 用于 Angular 应用程序的简单 facebook/linkedin 类似聊天模块
  • ng-google-sheets-db 🚀 使用 Google 表格作为您的(只读)后端!
  • ng-katex 使用 KaTeX 库增强的 TeX 语法编写漂亮的数学表达式的 Angular 模块
  • ng-wormhole - 在 DOM 中的其他地方渲染组件
  • ng2-adsense - 用于 Angular 应用程序的简易 AdSense
  • ngx-avatar - 头像组件,可以根据您拥有的用户信息生成/获取头像.
  • ngx-cdmon - 用于监控 Angular 变化检测性能的库.
  • ngx-countdown - 角度的简单,容易和性能倒计时
  • @ngneat/transloco - Angular 的国际化 (i18n) 库
  • ngx-i18n-router -@fulls1z3 的 Angular 路由国际化实用程序
  • ngx-linkifyjs -linkifyjs 的 Angular V6 包装器 - 用于在纯文本中查找链接并通过 linkifyjs将它们转换为 HTML标签的库
  • ngx-meta -@fulls1z3 用于 Angular(带服务器端渲染)的动态页面标题和元标记实用程序
  • ngx-wheel - 角奖轮组件!
  • xng-breadcrumb - 零配置面包屑解决方案. 适用于 Angular 6 及更高版本的轻量级、可配置和反应式面包屑导航.

JAM Stack

  • scully - Scully 是一个静态站点生成器,用于希望拥抱 Jamstack 的 Angular 项目.

Universal Angular 2

> 对 Angular 2 的通用(同构)javascript 支持

Universal Courses And Tutorials

Universal General Resources

Universal Seed Projects

  • universal-starter -@Angular-Class 的 Angular 2 通用入门套件
  • ng-seed/universal - Angular Universal 应用的种子项目,具有服务器端渲染 (SSR)、Webpack、开发/生产模式、DLL、AoT 编译、HMR、SCSS 编译、延迟加载、配置、缓存、i18n、SEO 和 TSLint/codelyzer 由@@满1z3
  • angular-universal - Angular Universal 100% 由 Angular CLI 提供支持的快速、无偏见、极简的入门套件
  • angular-universal-heroku-starter - 具有服务器端渲染 (SSR) 和易于部署到 Heroku 的 Angular 7 通用入门套件

Angular 2 in TypeScript

> TypeScript 可让您以真正想要的方式编写 JavaScript. > TypeScript 是 JavaScript 的类型化超集,可编译为纯 JavaScript.

TypeScript General Resources

TypeScript Seed Projects


Ionic 2 in Angular 2

> Ionic 是一款漂亮的开源前端 SDK,用于使用 Web 技术开发混合移动应用程序.

Ionic 2 General Resources

Angular 2 in Cordova

Apache Cordova 是一种流行的移动应用程序开发框架,它使用 CSS3、HTML5 和 JavaScript,而不是依赖于特定于平台的 API.

Cordova Seed Projects

Angular 2 in Dart

> Dart 是一种开源、可扩展的编程语言,具有强大的库和运行时,用于构建 Web、服务器和移动应用程序.

Dart General Resources

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

> 用于编写下一代 JavaScript 的编译器.

Babel General Resources

Babel Angular 2 Online Playground

Babel Seed Projects

Babel Demo, Samples, and Examples

Babel Plugins


Angular 2 in ES5

> 一种 ECMAScript 语言,包括结构化、动态、函数式和基于原型的特性.

ES5 General Resources

ES5 Seed Projects

angular2-es5-starter-kit Angular2 ES5 入门套件


Meteor in Angular 2

> 使用 Angular 和 Meteor 构建实时 Web 和移动应用程序

Meteor General Resources

Meteor Seed Projects


Angular 2 in NativeScript

> 使用 Javascript 和 CSS 构建真正的原生 iOS、Android 和 Windows Phone 应用程序. 尝试用于跨平台开发的 NativeScript 开源框架.

NativeScript General Resources

NativeScript Seed Projects


Angular 2 in React Native

> React Native 使您能够使用基于 JavaScript 的一致开发人员体验在本机平台上构建世界一流的应用程序体验

React Native General Resources

React Native Projects

React Native Seed Projects


Angular 2 in Haxe

> Haxe 是一个开源工具包,它基于现代、高级、严格类型的编程语言、交叉编译器、完整的跨平台标准库以及访问每个平台本机功能的方法. 通用语言,使用 Haxe,您可以轻松构建针对所有主流平台的跨平台工具. “在任何地方编写一次编译”,具有强大的易于扩展的宏系统和强大的、高度优化的 DCE 编译器(以及使用内联构造函数的 fe). 可用于服务器端渲染和同构方式 - 可以共享相同的源代码编译到 javascript 中的客户端和 pyhton 中的服务器端(或 java/php/node - 可以稍后选择/在缩放时更改). Haxe 代码可以包含(内联)任何目标语言片段(可用于逐步移植),externs 机制以类型安全的方式提供对本机 API 和库的访问. > 服务器、客户端、移动设备(同时使用 Android 和 iOS)、桌面设备、嵌入式(Raspbery、屡获殊荣的 TIVO 机顶盒)、Playstation ......所有这些都可以在本地访问,输入更少、更防错、更稳定和即使对于非类型安全的目标(fe JavaScript、PHP),也可以在编译时类型检查代码!

Haxe General Resources

Haxe Seed Projects


Angular 2 in Scala

> 通用语言; 多范式(面向对象、函数式、并发元素); 静态类型,类型安全; 重点:Web 服务.

Scala General Resources

Scala Seed Projects


Angular 2 components with Bit

> Bit 是一个开源虚拟存储库(代码库),旨在使组件易于管理和跨应用程序使用. 您可以在处理任何项目时从任何上下文快速导出任何 Angular 组件到位分布式范围. Bit 的可重用组件环境减少了为导出每个新组件而配置构建和测试环境的开销. Scope 是一个虚拟组件存储库,用于存储、组织、管理和测试您的组件. 一旦在 Scope 上建模,您的组件就可以在任何 Angular 应用程序中轻松找到和使用. 组件可以组织在一起,并且仍然可以单独修改和使用,而无需拉入整个库.

Bit Resources

Security

NgRx


请享用 - PatrickJS


License

CC0