angular项目中使用jQWidgets

时间：2023-01-25 14:38:17

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

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 &&num;39&semi;tooltip&&num;39&semi; does no t exist on type &&num;39&semi;JQuery&lt&semi;HTMLElement&gt&semi;的解决方法和过程

    在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. &lbrack;知识点&rsqb;字符串Hash

    1.前言 字符串的几大主要算法都多少提及过,现在来讲讲一个称不上什么算法, 但是非常常用的东西——字符串Hash. 2.Hash的概念 Hash更详细的概念不多说了,它的作用在于能够对复杂的状态进行简 ...

  2. Python os 标准库使用

    os模块是python自带的一个核心模块,用于和操作系统对象进行交互. 1.导入模块获取帮助 >>> import os>>> help(os)>>&g ...

  3. CentOS下设置MySQL的root密码

    CentOS刚装的MySQL一般需要重设MySQL密码,可以用以下方法重设. 方法一. Js代码  # /etc/init.d/mysqld stop  # mysqld_safe --user=my ...

  4. CentOS 常用命令大全（2）

    系统 # uname -a               # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue   # 查看操作系统版本 # cat /proc/cpuinf ...

  5. 【SDOI2008】【P1377】仪仗队

    欧拉函数的应用 原题: 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是 ...

  6. mysql替换字段里数据内容部分字符串（亦可用于增加字段中的内容）

    mysql替换表的字段里面内容,如例子: mysql> select host,user from user  where user='testuser'; +----------------- ...

  7. 《Python从入门基础到实践》

    <Python学习——从入门到实践> 第1章 Python语言概述 1.1 从计算机到编程 1.1.1 程序语言的演变:机器语言,汇编语言,高级语言 1.1.1.1 演变原因 1.1.1. ...

  8. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  9. Nexus5 电信3G保留数据和Root升级Android 6&period;0

    前提: A 备份手机重要数据,安全第一 B 进入twrp recovery 备份EFS,建议最好拷贝到电脑上(如果没有twrp,则需要先刷twrp,具体指令请看下面步骤第10条) C 因为Androi ...

  10. UVA 3942 Remember the Word （Trie&plus;DP）题解

    思路: 大白里Trie的例题,开篇就是一句很容易推出....orz 这里需要Trie+DP解决. 仔细想想我们可以得到dp[i]=sum(dp[i+len[x]]). 这里需要解释一下:dp是从最后一 ...

相关文章