npm install ng-semantic --save
npm install jquery --save

下载 Official Semantic UI bundle ( .zip ) from Semantic-Org

将 semantic.min.css, semantic.min.js, jquery添加到angular-cli.json 如下:

...

"apps": [{
...
"styles": [
"styles.css",
"../path/to/semantic.min.css" //
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../path/to/semantic.min.js"
],
...
}]

就可以使用了

// Module
import { NgModule } from "@angular/core";
import { NgSemanticModule } from "ng-semantic"; @NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [ BrowserModule, NgSemanticModule ]
})
export class AppModule {} // Component
import {Component} from '@angular/core'; @Component({
selector: 'demo-cmp',
template: `
<sm-segment class="raised">
Hello
</sm-segment>
`
})
export class DemoComponent {}
 

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

  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. 洛谷 P1344 [USACO4.4]追查坏牛奶Pollutant Control

    题目描述 你第一天接手三鹿牛奶公司就发生了一件倒霉的事情:公司不小心发送了一批有三聚氰胺的牛奶.很不幸,你发现这件事的时候,有三聚氰胺的牛奶已经进入了送货网.这个送货网很大,而且关系复杂.你知道这批牛 ...

  2. 【洛谷】CYJian的水题大赛【第二弹】解题报告

    点此进入比赛 T1: JerryC Loves Driving 第一题应该就是一道水分题(然而我只水了130分),我的主要做法就是暴力模拟,再做一些小小的优化(蠢得我自己都不想说了). My Code ...

  3. Opencv2.4.9+win7+VS2012一次性配置的方法--通过建立属性表永久配置

    Opencv的配置对于初学者很麻烦,网上的教程也非常多,针对不同的操作系统.opencv版本.Visual studio版本都有相应的教程,但即便是按照教程一步一步来,仍然难免出错,很多教程还是一次性 ...

  4. 【BZOJ3242】【NOI2013】快餐店(动态规划)

    [BZOJ3242][NOI2013]快餐店(动态规划) 题面 BZOJ 题解 假设我们要做的是一棵树,那么答案显然是树的直径的一半. 证明? 假设树的直径是\(2d\),那么此时最远点的距离是\(d ...

  5. 【BZOJ2109/2535】【NOI2010】航空管制(贪心)

    [BZOJ2109/2535][NOI2010]航空管制(贪心) 题面 BZOJ2109 BZOJ2535 题解 很好玩的一道题目 先看第一问,显然是要找一个合法的拓扑排序的序列. 直接拓扑排序,把队 ...

  6. 复习JavaScript随手记

    数据类型 基本类型 string number boolean undefined number类型,包含整数浮点数 NaN和自己都不相等,涉及NaN的计算结果都是NaN isNaN()函数用于判断一 ...

  7. linux小命令集合

    du -sh *  查看当前目录下的当前子目录的内存大小 df -h  查看内存占用情况 tar -xvf src.tgz ;    rsync -avzL   src/  desc/     lin ...

  8. linux根据进程pid查看进程详细信息

    http://note.youdao.com/noteshare?id=af2fdd34e3adfacda2d34706e16e5045

  9. 其他:strtok和sscanf结合输入读取一行整数

    gets(buf); int v; char *p = strtok(buf," "); while(p) { sscanf(p,"%d",&v); p ...

  10. 说说ASP.NET的IsPostBack

    学习asp.net,就不能不谈IsPostBack属性,顾名思义,这是是否回发的意思,多用于判断是不是第一次打开 一.IsPostBack介绍 Page.IsPostBack是一个标志:当前请求是否第 ...