Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /www/wwwroot/dev.zhalaotie.com/wp-includes/wp-db.php on line 3215

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /www/wwwroot/dev.zhalaotie.com/wp-includes/wp-db.php on line 3215
Angular 2 各种组件,图表,Excel,Table 等 component and modules – 扎老铁
Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /www/wwwroot/dev.zhalaotie.com/wp-includes/wp-db.php on line 3215

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /www/wwwroot/dev.zhalaotie.com/wp-includes/wp-db.php on line 3215
Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /www/wwwroot/dev.zhalaotie.com/wp-includes/wp-db.php on line 3215
class="post-51963 post type-post status-publish format-standard hentry">

Angular 2 各种组件,图表,Excel,Table 等 component and modules

WAIT

https://github.com/auth0-blog/angular2-authentication-sample

http://www.cnblogs.com/whitewolf/p/5851196.html

web app & local app

http://ionicframework.com/docs/v2/components/#modals

ANGULAR 2 ADMIN TEMPLATE

RXJS

SERVER SIDE RENDERing

Universal服务端渲染能够更好提升首屏加载的性能,以及单页面应用的SEO问题;

AOT技术引入,能够让组件处理的生成代码提前到构建时期;再加上TypeScript的tree shaking等技术,能够更大化的减小加载JavaScript文件大小和提升运行时性能;

Components

=======================================

Material Components for Angular2 

https://material.angular.io/

https://github.com/angular/material2

Material Design 2 (166 star)

http://code.promactinfo.com/md2/#/select

valor-software Bootstrap 4 & 4 Components (2345 star)

https://github.com/valor-software/ng2-bootstrap

http://valor-software.com/ng2-bootstrap/

supports bootstrap 2 & 4

fuel-ui Bootstrap 4 Components (228 star)

http://fuelinteractive.github.io/fuel-ui/#/installation

http://angularscript.com/category/form/

ng2 modules coordination repo

https://github.com/valor-software/ng2-plans

Angular 2 directive for Handsontable (Complex  Editable Table、Excel Sheet、)

https://github.com/valor-software/ng2-handsontable

Simple drag and drop with dragula

https://github.com/valor-software/ng2-dragula

Select

https://github.com/valor-software/ng2-select

https://github.com/softsimon/angular-2-dropdown-multiselect

http://angularscript.com/angular-2-dropdown-treeview-component/

http://angularscript.com/select-box-input-module-angular2/

https://github.com/farin99/angular2-virtual-select

http://angularscript.com/select-box-input-module-angular2/

File upload drop or browse

https://github.com/valor-software/ng2-file-upload

======================================================

Angular2 – Form Wizard Component

https://github.com/maiyaporn/angular2-wizard

http://angularscript.com/resizing-cropping-images-angular-2/

http://angularscript.com/angular2-elastic-textarea-component/

Kendo UI For Angular 2 (Free Beta) Released!

http://www.telerik.com/kendo-ui

http://www.telerik.com/kendo-angular-ui/

http://www.telerik.com/kendo-angular-ui/getting-started/

multi select ,这个的交互逻辑做的比较合理,该展示的展示了

sparkline

ng2-charts  

Angular2 directives for Chart.js

开源免费

http://valor-software.com/ng2-charts/

http://www.chartjs.org/

http://www.chartjs.org/docs/#getting-started

  • ng2-nvd3 – Open-source wrapper for nvd3 using Angular2 Components
  • ng2-charts – Open-source Angular2 wrapper directives for Chart.js
  • angular2-highcharts – Open-source Angular2 wrapper for HighCharts
  • recharts – Open-source composable charting library built on React components
  • Vega – Open-source Canvas/SVG viz framework
  • C3 – Open-source D3-based reusable chart library
  • Plotly – Commercial business intelligence and data science.
  • Highcharts – Commercial chart framework
  • eCharts – Open-source JavaScript chart framework
  • dc.js – Open-source JavaScript charting library

Highcharts for your Angular project (182 star)

https://github.com/gevgeny/angular2-highcharts

http://angularjs.jqueryrain.com/angular2-charting-components-based-highcharts/

支持 angular ts 语义化配置,和回调

<chart [options]=options>

     <xAxis (afterSetExtremes)=onAfterSetExtremesX($event)></xAxis>

     <yAxis (afterSetExtremes)=onAfterSetExtremesY($event)></yAxis>

</chart>

<p>{{minX}} – {{maxX}}<p>

<p>{{minY}} – {{maxY}}<p>

Highcharts 商用收费

NGX-CHARTS (582 star)

https://swimlane.github.io/ngx-charts/

https://swimlane.gitbooks.io/ngx-charts/content/

文档很好

sample project

======

webpack  & bootstrap TODO MVC 

Angular Webpack Starter with AoT compilation, Lazy-loading, and Tree-shaking (Updated to 2.0.1)

 https://github.com/antonybudianto/angular-webpack-starter

A complete angular2 kitchen sink project for bootstraping any SPA  

https://github.com/born2net/ng2Boilerplate

 

calendar

===========

https://github.com/mattlewis92/angular2-calendar

admin

==================

https://github.com/akveo/ng2-admin

demo:http://akveo.com/ng2-admin/

https://github.com/start-angular/SB-Admin-BS4-Angular-2

Free Angular JS Themes and Templates

http://startangular.com/

http://builtwithangular2.com/

paid

https://wrapbootstrap.com/

data-table

==============

http://swimlane.github.io/ngx-datatable/

  • ng2-table Simple table extension with sorting, filtering, paging… for Angular2 apps
  • ng2-smart-table Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
  • dynamic add new

Features

  • Local data source (Server/API DataSource is on its way)
  • Filtering
  • Sorting
  • Pagination
  • Inline Add/Edit/Delete
  • Flexible event model

 

 

 

Notifications

(not angular)

https://github.com/mouse0270/bootstrap-notify

http://bootstrap-notify.remabledesigns.com/

Modal & Dialog & Alert

=================

TEXT FORMAT & VALIDATE

=================

SCROLL

=================

  • ng2-fullpage Fullpage scrolling for Angular2 based on fullPage.js

==============

  • ng2-select (include multipie,children,rich select item)
  • ng2-sweetalert2 A wrapper for sweetalert2 for use with Angular 2.
  • Material 2 – Angular team’s Material Design components built on top of Angular 2
  • ng2-fullpage Fullpage scrolling for Angular2 based on fullPage.js

Charts

Beautiful charts for Angular2 based on Chart.js

https://github.com/valor-software/ng2-charts

PrimeNG is a collection of UI components for Angular 2.

http://www.primefaces.org/primeng/#/

● Galleria● Responsive● Validation● Theming● ProgressBar● CodeHighlighter● Terminal

Charts 

● ChartModel● Bar● Doughnut● Line● PolarArea● Pie● Radar

 

All Components list

=================

  • Material 2 – Angular team’s Material Design components built on top of Angular 2
  • Axponents: of Accessible Web Components (Dylan Barrell)
  • ng2-bootstrap Native Angular2 Bootstrap 3&4 components
  • ng2-charts Beautiful charts for Angular2 based on Chart.js
  • ng2-dragula Drag and Drop so simple it hurts!
  • ng2-file-upload Easy to use file upload directives
  • ng2-handsontable Excel-like data grid / spreadsheet
  • ng2-select Angular2 based replacement for select boxes
  • ng2-safe-img Very tiny and safe img for Angular 2
  • ng2-table Simple table extension with sorting, filtering, paging… for Angular2 apps
  • ng2-smart-table Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
  • ng2-bs Experiments with Angular 2 directives for Bootstrap.
  • ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
  • angular2-jwt Library for sending authenticated HTTP requests and decoding JWTs
  • angular2-cookie Library that implements Angular 1.x $cookies service in Angular 2
  • angular2-fontawesome Angular2 Components and Directives for Fontawesome
  • angular2-locker Library for interfacing with Localstorage/session/cookies with in-memory backup
  • angular2-google-maps Angular2 directives for Google Maps
  • ng2-radio-group Angular2 directives for radio and checkbox inputs and radio input groups
  • ng2-dropdown Dropdown menu for angular2 and bootstrap 3
  • ng2-progress-bar Simple progress bar for angular2 and bootstrap 3
  • ng2-tabs Tabs control for angular2 and bootstrap 3
  • ng2-modal Modal window for angular2 and bootstrap 3
  • ng2-paginator Pagination control for angular2 and bootstrap 3
  • fuel-ui Bootstrap 4 components and directives for use in Angular 2
  • prime-ng Collection of rich UI components for Angular 2
  • ng2-ace Ace editor directive made for Angular 2
  • ng2-storage A localStorage and sessionStorage wrapper written using ES6 Proxies for Angular 2
  • ng2-fontawesome A small directive making font awesome even easier to use.
  • ng2-sweetalert2 A wrapper for sweetalert2 for use with Angular 2.
  • angular2-text-mask Angular 2 input mask directive
  • ng2-fullpage Fullpage scrolling for Angular2 based on fullPage.js
  • file-droppa Simple files drop and upload component with files list
  • ng2-img-fallback Load placeholder image on image error
  • angular2-data-table A feature-rich yet lightweight data-table crafted for Angular2
  • angular2-busy Show busy/loading indicators on any promise, or on any Observable’s subscription
  • ng2-pdf-viewer PDF viewer component
  • Covalent – a UI platform built on Angular 2.0 + Material Design
  • angular2-infinite-scroll – An Infinite Scroll Directive for Angular2 (based on Observables)
  • ng2-card – Card view component for Angular2
  • Wijmo 5 – Set of UI components for Angular2
  • ng2d3 – Native Angular2 Chart Rendering Framework with D3 for utils
  • ng2-swipeable-card – Swipeable card component for Angular2

Pipes

  • fuel-ui OrderBy and Range pipes ported from Angular 1.x to Angular 2
  • ng2-filter-pipe Pipe for filtering arrays

code utility

dataquery (sorting, filtering,aggregate …)

import { orderBy } from ‘@progress/kendo-data-query’;

const data = [

  { name“Pork”category“Food”subcategory“Meat” },

  { name“Pepper”category“Food”subcategory“Vegetables” },

  { name“Beef”category“Food”subcategory“Meat” }

];

const result = orderBy(data, [{ field“name”dir“asc” }]);

console.log(result);

/* output

[

  { “name”: “Beef”, “category”: “Food”, “subcategory”: “Meat” },

  { “name”: “Pepper”, “category”: “Food”, “subcategory”: “Vegetables” },

  { “name”: “Pork”, “category”: “Food”, “subcategory”: “Meat” }

]

code

An Angular 2 Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod), Material Design, Karma, Protractor, Jasmine, Istanbul, TypeScript, TsLint, Codelyzer, Hot Module Replacement, Typings, and Webpack 

https://github.com/AngularClass/angular2-webpack-starter

Resources 

First of all you must understand that angular2 is not ready yet. It’s in very active development at this moment. API is changing over time. So any resources can be out of date. And what you’ll learn may not be useful in the future:(. But, anyway, if you want to start learning it now, first of all look at these to repos:

  1. https://github.com/angular-class/awesome-angular2:
  2. https://github.com/timjacobi/angular2-education:

There you can find a lot of resources to learn angular2

Small list from me:

UPD Two more things. Thanks to Eric Martinez (@eric-martinez) for them!

  • syntaxsuccess.com Angular 2 articles in Torgeir Helgevold’s blog
  • gitter.im/angular/angular Angular2 gitter chat room. It’s not a resource for learning, but you always can find help there. It’s pretty active.

Demo Code

This is a simple demo of building a Todo App with WebWorker support in Angular 2.

https://github.com/jteplitz602/ng2_web_worker_todo_demo#ng2-webworker-todo-demo

http://www.syntaxsuccess.com/angular-2-samples/#/about

Lazy Loaded Tree ViewRxJs StreamsRxJs CachingReact IntegrationGraphInsertion SortReduxBuffering in RxJsDynamic FormPub SubText EditorFormChange DetectionHttpInput ControlsRecursive tree viewData GridAddress BookJQuery IntegrationAccess Child ComponentInteractive contact listBound TextboxInput/OutputNon Bindable

Angular 2 – Tour of Heroes – The Next Step after Getting Started

https://github.com/johnpapa/angular2-tour-of-heroes

A basic CRUD Angular2 App

https://github.com/abhinavmsra/angular2

https://github.com/NathanWalker/ng2-image-lazy-load

https://www.ag-grid.com/best-angularjs-2-grid/exampleNg2.html

Browser Push Notifications & Request Permission

http://flauc.github.io/angular2-notifications/

更好看,可以设置主题

http://akserg.github.io/ng2-webpack-demo/#/toasty

https://github.com/Stabzs/Angular2-Toaster

http://akserg.github.io/ng2-webpack-demo/#/slim

https://github.com/akserg/ng2-slim-loading-bar

http://code.promactinfo.com/md2/#/select

https://www.npmjs.com/package/md-multiselect

https://github.com/Gbuomprisco/ng2-material-select

not select control

https://www.npmjs.com/package/ng2-material-dropdown

https://github.com/travelist/angular2-fontawesome

other

http://demos.creative-tim.com/material-kit-pro/index.html#pablo

 

 

 

single page

manu icon

http://flatfull.com/themes/flatkit/angular/?layout=1#/app/contact

http://www.codecovers.eu/materialadmin/ui/lists

http://www.codecovers.eu/boostbox/ui/buttons

more

https://colorlib.com/wp/html-admin-templates/

menu icon

material input/2

many controls

internationalization

http://demo.interface.club/limitless/layout_1/LTR/material/form_select2.html

http://demo.interface.club/limitless/layout_2/LTR/material/form_select2.html

http://demo.interface.club/?theme=limitless

download

http://themelocktemplate.com/limitless-responsive-web-application-kit/

http://aedownload.com/limitless-v1-2-1-responsive-web-application-kit-free-download/

Hi! I bought the limitless template and I am not being able to expand the zip file contanining the theme. It goes halfway through the expansion and at a certain point I get a system message saying that it was not possible to expand the file. Is there any chance that it might be corrupt? Can you help me out on this one?

Purchase code: 3474118a-7118-4b71-b397-019c2eb4b6cd

Thanks! Santiago

http://demo.pixelcave.com/oneui/

http://www.theme-guys.com/materialism/angular/#/forms/basic

sup

29$/month

https://elements.envato.com/?utm_source=themeforest.net&utm_medium=promos&utm_campaign=elements_mkt-header_webtemplates_27SEP2016&utm_content=tf_header-bar

Limitless – Responsive Web Application Kit

themes

Website Templates & Themes from ThemeForest

https://themeforest.net

 

 

 

 

 

angular redux

嵌套路由

Angular 2

自带了一套,看上去有个缺点,翻译文件制作起来比较繁琐,适合很大的项目用

ionic 2

没有使用 angular 2官方的,是第三方的

ng2-translate

https://ionicframework.com/docs/v2/resources/ng2-translate/

https://github.com/ngx-translate

http://www.ngx-translate.com/

npm install –save md2

npm i -s ng2-sweetalert2 –save

npm install –save angular-confirmation-popover

npm install –save angular2-notifications

npm install ng2-slim-loading-bar –save

npm install ng2-toasty –save

https://github.com/akserg/ng2-toasty

http://akserg.github.io/ng2-webpack-demo/#/toasty

https://github.com/flauc/angular2-notifications

https://github.com/Promact/md2

https://github.com/Promact/md2/tree/master/src/demo-app

chart

选定

http://valor-software.com/ng2-charts/

http://www.chartjs.org/

http://www.chartjs.org/docs/#getting-started

npm install typings –global

typings install

npm install –save angular2-localstorage –save

https://github.com/marcj/angular2-localstorage

3. Angular 2 有专门的调试工具支持
感谢 http://Rangle.ioAngular Augury

Angular 2 有专门的 Chrome 调试工具,可以直接利用 Chrome 开发工具完成各种查看编辑操作,而不是只能依靠控制台输出,大大提高开发速率和优化开发体验。

 

发表评论

电子邮件地址不会被公开。