angular中使用AMEXIO
1.用NPM添加依赖到项目中,amexio需要先添加以下四个依赖到项目
npm install jquery@3.2.1 --save
npm install bootstrap@4.0.0-alpha.6 --save
npm install tether@^1.4.0 --save
npm install font-awesome@4.7.0 --save
2.安装amexio到项目中
For Bootstrap 4
npm install amexio-ng-extensions@latest --save
For Bootstrap 3
npm install amexio-ng-extensions@1.0.43 --save
3.Include these in your app's .angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css",
"../node_modules/bootstrap-timepicker/css/bootstrap-timepicker.min.css"
],
"scripts": ["../node_modules/jquery/dist/jquery.min.js","../node_modules/tether/dist/js/tether.min.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
"../node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js"
],
4.
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from "@angular/forms";
import { AppComponent } from './app.component'; // Import your library
import { AmexioWidgetModule,CommonHttpService } from 'amexio-ng-extensions'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AmexioWidgetModule
],
providers: [CommonHttpService],
bootstrap: [AppComponent]
})
export class AppModule { }
Once your library is imported, you can use its components, directives and pipes in your Angular application:
<!-- You can now use your library component in app.component.html -->
<amexio-text-input></amexio-text-input>
Amexio Charts
Amexio Charts is provided as a seperate Module as AmexioChartModule available under amexio-ng-extensions/charts
To begin please add the module to your Component's Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from "@angular/forms";
import { AppComponent } from './app.component'; // Import your library
import { AmexioChartModule } from 'amexio-ng-extensions/charts'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AmexioChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once Amexio Charting library is imported, you could use it ,
<!-- You can now use your library component in app.component.html -->
<amexio-chart-column [data]="employeeData"></amexio-chart-column>
More On Charts here : Charts Docs
Amexio Dashboard
Amexio Dashboard is provided as a seperate Module as AmexioDashboard available under amexio-ng-extensions/dashboard
To begin please add the module to your Component's Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from "@angular/forms";
import { AppComponent } from './app.component'; // Import your library
import { AmexioDashboardModule } from 'amexio-ng-extensions/dashboard'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AmexioDashboardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once Amexio Dashboard library is imported, you could use it ,
<!-- You can now use your library component in app.component.html -->
<amexio-dashboard-gauge [data]="systemMetrics"></amexio-dashboard-gauge>
More on Dashboard Module : Dashboard Docs
Amexio Maps
Amexio Maps is provided as a seperate Module as AmexioMapsModule available under amexio-ng-extensions/maps
To begin please add the module to your Component's Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from "@angular/forms";
import { AppComponent } from './app.component'; // Import your library
import { AmexioMapsModule } from 'amexio-ng-extensions/dashboard'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AmexioMapsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once Amexio Maps library is imported, you could use it ,
<!-- You can now use your library component in app.component.html -->
<amexio-map-geo-chart [data]="population"></amexio-map-geo-chart>
angular中使用AMEXIO的更多相关文章
- Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
- angular 中父元素ng-repeat后子元素ng-click失效
在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- Deferred在jQuery和Angular中的使用与简单实现
Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular源码分析:angular中脏活累活承担者之$parse
我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...
- angular源码分析:angular中$rootscope的实现——scope的一生
在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...
- angular中自定义依赖注入的方法和decorator修饰
自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ thi ...
随机推荐
- Django之CSS,JS静态文件的配置
一. 专门创建一个目录放静态文件,即CSS,JS等. 1)先把jquery.min拿过来. 2)新建一个CSS文件放入样式 3)在login.html中引入.css文件 在login.html中引入. ...
- 解题:AHOI 2013 作业
题面 emmm......我把莫队扔到了杂题里,因为感觉局限挺大的=.= 这题是莫队维护信息+分块查询答案,都是两者的基本操作,复杂度$O(m$ $sqrt(n)+n$ $sqrt(m))$ 所以为啥 ...
- [Wf2011]Chips Challenge
两个条件都不太好处理 每行放置的个数实际很小,枚举最多放x 但还是不好放 考虑所有位置先都放上,然后删除最少使得合法 为了凑所有的位置都考虑到,把它当最大流 但是删除最少,所以最小费用 行列相关,左行 ...
- mac pro电脑怎么安装rabbitmq
第一:依次执行以下命令: 1. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...
- linux shell 通配符
http://note.youdao.com/noteshare?id=4b6bc019e055c897c6dfb81fe2c17756
- python使用pwd和grp操作unix用户及用户组
1.pwd模块 pwd模块提供了一个unix密码数据库即/etc/passwd的操作接口,这个数据库包含本地机器用户帐户信息 常用操作如下: pwd.getpwuid(uid):返回对应uid的示例信 ...
- 「Python-Django」Django中使用数据库的 9 个小技巧
Django 中使用数据库的 9 个小技巧. 1. 过滤器聚合 在 Django 2.0 之前,如果你想得到“用户总数”.“活跃用户总数”等信息时,你不得不使用条件表达式. Django 2.0 中, ...
- DINSTINCT
DISTINCT是对结果集进行去重,有三点需要注意. 1.在大多数情况下(两者后面所跟的字段相同时),DISTINCT跟group by是等效的,此时DISTINCT可以看作group by的一个特例 ...
- Qt每次运行都是重新编译问题
按理说,Qt使用了makefile技术只会编译刚修改的源文件,但有时会遇到一运行项目就会重新编译的问题,严重浪费了时间. 问题就出在你的系统时间上,系统时间的不准确会影响makefile机制的判断过程 ...
- Atcoder arc077 D - 11 组合
Link 题意:给出n个数,其中有一个数会出现两次,其余数只出现一次,问不同长度且不同的子串的数量.取模1e9+7 思路:组合求出所有情况,减去重复情况,注意用逆元即可 /** @Date : 201 ...