angular项目中使用jQWidgets

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-cli
  • ng new myProject
  • cd myProject
  • npm install jqwidgets-framework --save
  • ng serve
  • Edit 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 browser
  • Result:

 

posted @ 2017-09-15 21:53  极光天际  阅读(457)  评论(0)  编辑  收藏  举报