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

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

将 semantic.min.csssemantic.min.jsjquery添加到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. [洛谷P4910]帕秋莉的手环

    题目大意:有一个$n(n\leqslant10^{18})$个点的环,每个点可以是$0$或$1$,要求相邻点中至少一个$1$,问方案数,多组询问. 题解:先考虑是一条链的情况,令$f_{i,j}$表示 ...

  2. Dll劫持漏洞详解

      一.dll的定义 DLL(Dynamic Link Library)文件为动态链接库文件,又称“应用程序拓展”,是软件文件类型.在Windows中,许多应用程序并不是一个完整的可执行文件,它们被分 ...

  3. 电子商务(电销)平台中用户模块(User)数据库设计明细

    以下是自己在电子商务系统设计中的订单模块的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 用户基础表(user_base)|-- 自动编号 (user_id)|-- 用户名 (us ...

  4. 【转载 save】vim键位图。

    留图,备用,copy from 网络

  5. NOIP 2012 洛谷P1081 开车旅行

    Description: 就是两个人开车,只能向东开.向东有n个城市,城市之间的距离为他们的高度差.A,B轮流开车,A喜欢到次近的城市,B喜欢到最近的城市.如果车子开到底了或者车子开的路程已经超过了限 ...

  6. C++单例模式设计与实现

    C++单例模式主要用途就是整个程序中只实例化一个对象,之后获取到的都是该对象本身进行处理问题. 单例模式一般都是在函数中采用局部静态变量完成的,因为局部的静态变量生命周期是随着程序的生命周期 一起结束 ...

  7. JavaScript之RegExp

    分为字面量和RegExp构造函数 1.正则表达式的匹配模式支持3个标志 g:表示全局模式,模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止 i:表示不区分大小写模式,即在确定匹配项时忽略模式 ...

  8. Counting Pair

    Counting Pair Time Limit: 1000 ms Memory Limit: 65535 kB Solved: 112 Tried: 1209 Submit Status Best ...

  9. 重构改善既有代码设计--重构手法06:Split Temporary Variable (分解临时变量)

    你的程序有某个临时变量被赋值超过一次,它既不是循环变量,也不被用于收集计算结果.针对每次赋值,创造一个独立.对应的临时变量 double temp = 2 * (_height + _width); ...

  10. Spring REST 异常处理

    在上一篇中写到了Spring MVC的异常处理,SpringMVC捕获到异常之后会转到相应的错误页面,但是我们REST API ,一般只返回结果和状态码,比如发生异常,只向客户端返回一个500的状态码 ...