Angular 4入門教程系列 14 PrimeNG的使用方式
阿新 • • 發佈:2018-12-24
這篇文章介紹一下Angular的老牌UI元件庫PrimeNG,並演示一下如何使引入PrimeNG到專案之中。
Why PrimeNG
使用PrimeNG有很多原因,比如
- 70多個完善的元件
- 開源
- 提高生產性
- 多種主題
- 高度可定製的模板
- 移動端使用者體驗的增強
PrimeNG網址
事前準備
安裝node
詳細可以參照:http://blog.csdn.net/liumiaocn/article/details/78510679
[root@angular ~]# npm -v
5.5.1
[root@angular ~]#
[root@angular ~]# node -v
v9.1.0
[root@angular ~]#
- 1
- 2
- 3
- 4
- 5
- 6
安裝angular-cli
安裝命令:npm install -g @angular/cli –unsafe-perm
[root@angular ~]# npm install -g @angular/cli --unsafe-perm
/usr/local/npm/node/bin/ng -> /usr/local /npm/node/lib/node_modules/@angular/cli/bin/ng
> node-sass@4.6.1 install /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.6.1/linux-x64-59_binding.node
Download complete ] - :
Binary saved to /usr/local/npm/node/lib/node_modules/@angular /cli/node_modules/node-sass/vendor/linux-x64-59/binding.node
Caching binary to /root/.npm/node-sass/4.6.1/linux-x64-59_binding.node
> node-sass@4.6.1 postinstall /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass
> node scripts/build.js
Binary found at /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/@angular/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ @angular/cli@1.5.0
added 148 packages and updated 1 package in 122.371s
[root@angular ~]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
設定link
[[email protected] ~]# ln -s /usr/local/npm/node/lib/node_modules/@angular/cli/bin/ng /usr/local/bin/ng
[[email protected] ~]# which ng
/usr/local/bin/ng
[[email protected] ~]# ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.5.0
Node: 9.1.0
OS: linux x64
Angular:
...
[[email protected] ~]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
安裝typescript
[root@angular ~]# npm install -g typescript
/usr/local/npm/node/bin/tsc -> /usr/local/npm/node/lib/node_modules/typescript/bin/tsc
/usr/local/npm/node/bin/tsserver -> /usr/local/npm/node/lib/node_modules/typescript/bin/tsserver
+ typescript@2.6.1
updated 1 package in 9.327s
[root@angular ~]#
- 1
- 2
- 3
- 4
- 5
- 6
建立cli專案骨架
[[email protected] ~]# ng new PrimengProject
create PrimengProject/README.md (1030 bytes)
create PrimengProject/.angular-cli.json (1250 bytes)
create PrimengProject/.editorconfig (245 bytes)
create PrimengProject/.gitignore (516 bytes)
create PrimengProject/src/assets/.gitkeep (0 bytes)
create PrimengProject/src/environments/environment.prod.ts (51 bytes)
create PrimengProject/src/environments/environment.ts (387 bytes)
create PrimengProject/src/favicon.ico (5430 bytes)
create PrimengProject/src/index.html (301 bytes)
create PrimengProject/src/main.ts (370 bytes)
create PrimengProject/src/polyfills.ts (2667 bytes)
create PrimengProject/src/styles.css (80 bytes)
create PrimengProject/src/test.ts (1085 bytes)
create PrimengProject/src/tsconfig.app.json (211 bytes)
create PrimengProject/src/tsconfig.spec.json (304 bytes)
create PrimengProject/src/typings.d.ts (104 bytes)
create PrimengProject/e2e/app.e2e-spec.ts (297 bytes)
create PrimengProject/e2e/app.po.ts (208 bytes)
create PrimengProject/e2e/tsconfig.e2e.json (235 bytes)
create PrimengProject/karma.conf.js (923 bytes)
create PrimengProject/package.json (1320 bytes)
create PrimengProject/protractor.conf.js (722 bytes)
create PrimengProject/tsconfig.json (363 bytes)
create PrimengProject/tslint.json (2985 bytes)
create PrimengProject/src/app/app.module.ts (316 bytes)
create PrimengProject/src/app/app.component.css (0 bytes)
create PrimengProject/src/app/app.component.html (1120 bytes)
create PrimengProject/src/app/app.component.spec.ts (986 bytes)
create PrimengProject/src/app/app.component.ts (207 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'PrimengProject' successfully created.
[[email protected] ~]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
確認結果
[[email protected] ~]# cd PrimengProject/
[[email protected] PrimengProject]# ng serve -H 0.0.0.0 --open
** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
...
chunk {vendor} vendor.bundle.js (vendor) 7.02 MB [initial] [rendered]
webpack: Compiled successfully.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
安裝primeng
[root@angular PrimengProject]# npm install primeng --save-dev --unsafe-perm
> [email protected]4.6.1 install /root/PrimengProject/node_modules/node-sass
> node scripts/install.js
Cached binary found at /root/.npm/node-sass/4.6.1/linux-x64-59_binding.node
> [email protected]4.6.1 postinstall /root/PrimengProject/node_modules/node-sass
> node scripts/build.js
Binary found at /root/PrimengProject/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine
npm WARN [email protected]3.2.2 requires a peer of @angular/[email protected]^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected]3.2.2 requires a peer of @angular/[email protected]^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ [email protected]5.0.0-rc.0
added 148 packages and updated 1 package in 61.238s
[root@angular PrimengProject]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
安裝font-awesome
[root@angular PrimengProject]# npm install font-awesome
npm WARN [email protected]3.2.2 requires a peer of @angular/[email protected]^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected]3.2.2 requires a peer of @angular/[email protected]^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ [email protected]4.7.0
added 116 packages in 34.943s
[root@angular PrimengProject]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
設定.angular-cli.json
如下,設定font-awesome和primeng相關的css:
"styles": [
"styles.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
- 1
- 2
- 3
- 4
- 5
- 6
修改HTML模板
修改app.component.html
[[email protected] app]# cat app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<h3 class="first">Addons</h3>
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input type="text" pInputText placeholder="Username">
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">$</span>
<input type="text" pInputText placeholder="Price">
<span class="ui-inputgroup-addon">.00</span>
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">www</span>
<input type="text" pInputText placeholder="Website">
</div>
</div>
</div>
<h3>Multiple Addons</h3>
<div class="ui-g">
<div class="ui-g-12">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-credit-card"></i></span>
<span class="ui-inputgroup-addon"><i class="fa fa-cc-visa"></i></span>
<input type="text" pInputText placeholder="Price">
<span class="ui-inputgroup-addon">$</span>
<span class="ui-inputgroup-addon">.00</span>
</div>
</div>
</div>
[[email protected] app]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
結果確認
總結
這篇文章介紹瞭如何在專案中使用PrimeNG。
再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!還帶黃段子!希望你也加入到我們人工智慧的隊伍中來!https://www.cnblogs.com/captainbed