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. 认识User-Agent

    Windows NT 10 对应操作系统 windows 10 Windows NT 6.3 对应操作系统 windows 8.1 Windows NT 6.2 对应操作系统 windows 8 Wi ...

  2. Qt消息机制和事件

    Qt消息机制和事件 1 事件 事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应 ...

  3. [SDOI2011]黑白棋 kth - nim游戏

    题面 题面 题解 观察题目,我们可以发现,这个游戏其实就是不断再把对方挤到一边去,也就是黑子不断往左走,白子不断往右走. 因此可以发现,如果将黑白子按顺序两两配对,那么它们中间的距离会不断缩小,且每次 ...

  4. 解题：POI 2012 Cloakroom

    题面 首先,单独处理每个询问复杂度显然不可承受,还是考虑通过排序使得限制更容易达到:按照$a$将物品排序,按照$m$将询问排序,这样肯定是要不断添加物品才能达到要求,顺着做一遍就行了 然后发现$b$的 ...

  5. [持续更新][备份]GDB调试工具常用命令

    一.前言 ACM开赛在即,得知dev-cpp不适用之后,不得不再次重拾gdb基本操作... 辗转Emacs和Code::blocks数次之后,感觉还是Emacs更适合我的风格,尽管配置稍显麻烦,但其开 ...

  6. 音视频处理之FFmpeg程序的介绍与使用20180302

    一.FFMPEG程序介绍与使用 主要介绍一下ffmpeg工程包含的三个exe的使用方法. 1. FFMPEG程序介绍 1.1.下载 ffmpeg的官方网站是:http://ffmpeg.org/ 下载 ...

  7. 省选模拟赛 LYK loves graph(graph)

    题目描述 LYK喜欢花花绿绿的图片,有一天它得到了一张彩色图片,这张图片可以看做是一张n*m的网格图,每个格子都有一种颜色去染着,我们用-1至n*m-1来表示一个格子的颜色.特别地,-1代表这个颜色是 ...

  8. 10.Android UiAutomator Junit 断言函数的使用

    一.断言函数介绍 1.断言函数: 确定被测试的方法是否按照预期的效果正常工作 比如说: if (假设成立){ 通过测试 }else{ 报错并终止当前用例测试 } 2.断言函数用例结构: 一个完整的测试 ...

  9. 删除rabbitmq中持久化的队列和数据

    在windows中的rabbitmq安装目录中的/sbin目录下: rabbitmqctl.bat stop_app rabbitmqctl.bat reset rabbitmqctl start_a ...

  10. Hibernate学习（3）- *.hbm.xml详解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-mapping PUBL ...