Angular4記帳webApp練手項目之二（在angular4項目中使用Angular WeUI）

寫在前面

在angular4項目中 
例子是基於以前文章：利用angular-cli構建Angular4.X項目 
能夠參考官網：https://cipchk.github.io/ngx-weui/#/docs/start

原本是寫在後面的回顧，感受放在前面比較好。

一、如何使用第三方庫，安裝-引用(主要參考官方文檔) 
二、{{}}指令，單向綁定數據，聲明數據-綁定數據 
三、[(ngModel)]指令，雙向綁定數據，聲明數據-綁定數據 
四、*ngFor指令，循環渲染 
五、[ngStyle] 指令，動態綁定樣式。 
更多angular指令及用法參看官網。

安裝及引用

安裝

npm install angular-weui --save

• 1

安裝後還須要引用weui 樣式以及咱們的font-awesome圖標苦，在咱們項目index.html中引用

<!-- index.html --> <link href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

• 1
• 2
• 3

咱們還要在app.module.ts中添加引用

import { WeUIModule } from 'angular-weui'; imports: [ BrowserModule, FormsModule, HttpModule, WeUIModule // 這裏也要添加 ],

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

修改菜單組件

在app.component.html添加菜單組件

<app-menu></app-menu>

• 1

咱們參照官網簡化使用了tabbar組件，修改menu.component.html以下：

<weui-tabbar> <weui-tabbar-item> <span class="weui-tabbar__icon"> <i class="fa fa-edit"></i> </span> <p class="weui-tabbar__label">記帳</p> </weui-tabbar-item> <weui-tabbar-item> <span class="weui-tabbar__icon"> <i class="fa fa-bar-chart"></i> </span> <p class="weui-tabbar__label">統計</p> </weui-tabbar-item> </weui-tabbar> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

瀏覽器中查看，菜單成功建立