title: ‘[Note of Angular 2] How to set up PrimeNG (Angular UI)’
利用npm安裝PirmeNG的兩個套件
1
2
3
4
npm install primeng --save
npm install primeui --save在
index.html中載入CSS檔1
2
3
4
5
6
7<head>
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="app/resources/icons/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
</head>在
systemjs.config.js更改map, packages1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular',
'primeng': 'node_modules/primeng' //新增此行
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' } //新增此行
};
使用方法，在ts檔內import所需的extension，並且加入到directives中，詳細說明請參考官方文件。1
2
3
4
5
6
7
8
9
10
11
12
13
14import {Component} from '@angular/core';
import {InputText} from 'primeng/primeng'; //import所需的extension
@Component({
selector: 'my-app',
template: `
<h1>My First PrimeNG App</h1>
<input type="text" pInputText/>
`,
directives: [InputText] //加入到directives中
})
export class AppComponent {
}