使用iconfont
iconfont是阿里巴巴的icon項目,阿里巴巴使用,也公開對外使用,現在一些公司都使用了,它有CDN,訪問快,用起來也很方便,這章節講下如何使用iconfont;(當然,本質上就是引用一個icon的font文件,無論用bootstrap的還是自己做的,都是一樣的,希望讀者觸類旁通)
iconfont上創建工程
具體怎麼做已經超出本文範圍;有興趣的可以自己學習;
我們選擇一個做實驗
最終寫出一個css文件,在styles.css中
安裝@angular2-material/icon
npm install @angular2-material/icon
在app.module.ts中添加以下代碼
在剛剛的home.component.html中添加icon
啓動應用 ng serve
這,我們就看到了我們選的圖標了;
編譯
Angular-CLI編譯的配置都幫我們寫好了
開發環境輸入 ng build
生產環境:ng build --prod,這裏對比下前後的差異
對比可以看到,生產環境把3M的壓縮到了1M(還不夠,還應該優化,我後續會繼續努力),生產的文件還加了MD5,這樣可以避免瀏覽器緩存;
我們走過的路:
如此,我們的Angular-CLI的搭建完了,我們可以具備什麼能力了?
(1)創建一個可用於開發,測試,生產的工程;
(2)具備路由的能力,按需加載,代碼分割;
(3)我們可以添加外部的css,js我沒講,其實原理相同;
(4)集成angular2 material;
(5)添加自己的icon font;
(6)開發環境和生產環境的編譯;
上面涵蓋的內容應該可以用來開發一個簡單的工程了。剩下的內容就靠angular的具體內容和typescript的熟練程度了。
當然,作爲生產中,上述的內容還略顯不夠,我們還沒提到集成一些組件,比如用js寫的組件怎麼集成進來。測試如何進行?我後續會繼續推出,請關注我!我個人更傾向於用angular2-webpack-seed來開發生產的代碼(目前正在用它開發一個網站),因爲它配置起來更方便,但是有時候真是精力有限,應該也會用angular-cli,它卻是省時省力!