angular项目中使用jQWidgets

zoukankan html css js c++ java

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">
  
  
  <link rel="stylesheet" href="http://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
  
  <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:
初学勇的博客随笔
查看全文

相关阅读:
java 对象的创建
 可重入锁
 guava multimap介绍
 Tomcat运行机制
 GC垃圾收集算法
 GC判断哪些内存需要回收
 JVM类加载器以及双亲委派模型
 深入分析ConcurrentHashMap
BeanCopier类
 Quartz技术原理

原文地址：https://www.cnblogs.com/kaid/p/7528662.html

angular项目中使用jQWidgets

Angular CLI with jQWidgets