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/mapsTo 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>