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:

angular项目中使用jQWidgets的更多相关文章

  1. gulp 在 angular 项目中的使用

    gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...

  2. angular项目中各个文件的作用

    原文地址 https://www.jianshu.com/p/176ea79a7101 大纲 1.对angular项目中的一些文件的概述 2.对其中一些文件的详细描述 2.1.package.json ...

  3. Angular 项目中如何使用 ECharts

    在有些使用 ECharts 库的 Angular 项目中,通常除了安装 npm 包之外,还会在 angular.json 中配置 “build.options.scripts”,将 “node_mod ...

  4. angular项目中遇到的问题

    一.angular项目中如何实现路由缓存 需要实现的效果,对请求的数据进行缓存,比如进入文章详情页之后点击返回,不会再调用后台数据接口:而是加载缓存中的数据,如何数据变动的情况下,可使用下拉刷新刷新页 ...

  5. angular项目中使用Primeng

    1.第一步把依赖添加到项目中 npm install primeng --save npm install @angular/animations --save npm install font-aw ...

  6. Angular项目中引入jQuery

    npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...

  7. 在angular项目中使用bootstrap的tooltip插件时，报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程

    在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...

  8. angular项目中使用jquery的问题

    1.使用npm命令往项目中添加jQuery. npm install jquery --save 2.在你想要用jQuery的组件中添加. import * as $ from "jquer ...

  9. Angular项目中共享模块的实现

    创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 一.共享CommonModule 暂时只有CommonModule,以后会有一些需要共享 ...

随机推荐

  1. Robotframework SSHLibrary库关键字

    1.连接远程机器 两种方法,一种用户名密码登录连接,一种是通过密钥连接 (1)用户名密码连接 (2)密钥连接 大概介绍下密钥:首先由用户生成一对密码,公钥与私钥:私钥是给需要连接的用户,连接时使用私钥 ...

  2. QoS专题-第2期-QoS实现工具之MQC

    QoS实现工具之MQC QoS技术可以对网络中报文进行分类处理,根据优先级提供不同的差分服务,如何实现这种差分服务呢?我们有一种强大的配置方法-模块化QoS命令行MQC(Modular QoS Com ...

  3. 【CF331E】Biologist（网络流，最小割）

    [CF331E]Biologist(网络流,最小割) 题面 洛谷 翻译: 有一个长度为\(n\)的\(01\)串,将第\(i\)个位置变为另外一个数字的代价是\(v_i\). 有\(m\)个要求 每个 ...

  4. 「CodePlus 2017 12 月赛」可做题2（矩阵快速幂+exgcd+二分）

    昨天这题死活调不出来结果是一个地方没取模,凉凉. 首先有个一眼就能看出来的规律... 斐波那契数列满足$a_1, a_2, a_1+a_2, a_1+2a_2, 2a_1+3a_2, 3a_1+5a_ ...

  5. bzoj4569: [Scoi2016]萌萌哒（ST表+并查集）

    好喵喵的题 将一个要求用ST表分割成logn个要求,如果把f[i][j]和f[u][v]在同一个集合,那么f[i][j-1]和f[u][v-1],f[i+2^(j-1)][j-1]和f[u][u+2^ ...

  6. javascript里的sleep()方法

    很多编程语言里都有sleep(),delay()等方法,它能让我们的程序不那么着急的去执行下一步操作,而是延迟.等待一段时间.软件开发中经常会遇到需要这样的函数,比如等待几分钟去检查某一事件是否发生. ...

  7. 11.UiAutomator 相关JAVA知识

    一.封装方法与模块化用例 1.方法: 在JAVA中,方法就好比日常生活中的一个动作,由动作组合成一系列完整的操作. 方法结构: 方法修饰符 方法返回值类型 方法名 { 方法体 } 比如: public ...

  8. uva 11722 Joining with Friend

    https://vjudge.net/problem/UVA-11722 题意:你和朋友都要乘坐火车,并且都会途径A城市.你们很想会面,但是你们到达这个城市的准确时刻都无法确定.你会在时间区间[t1, ...

  9. HDU 4778 状压DP

    一看就是状压,由于是类似博弈的游戏.游戏里的两人都是绝对聪明,那么先手的选择是能够确定最终局面的. 实际上是枚举最终局面情况,0代表是被Bob拿走的,1为Alice拿走的,当时Alice拿走且满足变换 ...

  10. CF540 B 贪心

    坑在B题是常态,弱智的日常. 是找中位数不是平均值. 慌了,乱写了 出了一塌糊涂的ZZ代码 特记一下 /** @Date : 2017-08-27 17:25:11 * @FileName: B.cp ...