angular項目中使用jQWidgets
阿新 • • 發佈：2017-09-15
ini ets his text char sel val with tle
Angular CLI with jQWidgets
In this tutorial, we will show you how to use https://cli.angular.io/ along with the Angular Components by jQWidgets.
Please, follow the step by step instructions below:
npm install -g angular-cling new myProjectcd myProjectnpm install jqwidgets-framework --saveng serveEdit src/index.html:<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Jqwidgets</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- Styles --><link rel="stylesheet" href="http://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" /> <!-- jQWidgets --> <script src="http://www.jqwidgets.com/public/jqwidgets/jqxcore.js"></script> <script src="http://www.jqwidgets.com/public/jqwidgets/jqxdraw.js"></script><script src="http://www.jqwidgets.com/public/jqwidgets/jqxbargauge.js"></script> </head> <body> <app-root>Loading...</app-root> </body> </html>Edit src/app.component.ts:import { Component } from ‘@angular/core‘;import { jqxBarGaugeComponent } from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxbargauge‘; @Component({ selector: ‘app-root‘, templateUrl: ‘./app.component.html‘, styleUrls: [‘./app.component.css‘] }) export class AppComponent { values: number[] = [102, 115, 130, 137]; }Edit src/app.component.html:<jqxBarGauge[width]="600" [height]="600" [colorScheme]="‘scheme02‘" [max]="150" [values]="values"> </jqxBarGauge>Edit src/app.module.ts:import { BrowserModule } from ‘@angular/platform-browser‘;import { NgModule } from ‘@angular/core‘; import { FormsModule } from ‘@angular/forms‘; import { HttpModule } from ‘@angular/http‘; import { AppComponent } from ‘./app.component‘; import { jqxBarGaugeComponent } from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxbargauge‘; @NgModule({ declarations: [ AppComponent, jqxBarGaugeComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Navigate to http://localhost:4200/ in your web browserResult:
- Grid with Angular CLI
- Chart with Angular CLI
angular項目中使用jQWidgets