Angular2 - 初學Angular2

 

因爲以前一直作的Angular1.* ，,覺的Angular的雙向綁定，DOM的對開發者來講簡直是神器。因此對Angular2的期待可見一斑。

最近終於有空抽一點時間學習Angular2 ， 但是Angular都出到5+了。我是落後了多少。Anyway，何時開始學習都不算完。

簡單看了下Angular2的簡介就開始了個人一個App。不幸的事我遇到了一些小問題。因爲以前電腦有Node ， NPM ， 全部就直接開幹。

我用的是NPM 6.5.0 + NODE 10.14.2

可是當我用Angular CLI 新建項目的時候，出現了一些小插曲，說個人版本有問題。

 因此百度了下。卸載個人NPM 而後從新安裝就行了.

具體步驟以下：

1. npm uninstall -g npm 刪除已經有的NPM
2. npm install -g npm 從新安裝NPM
3. npm install -g @angular/cli 安裝angular CLI
4. ng new demo1 成功建立新項目

咱們能夠進去demo1 查看CLI給咱們建立的初始小程序。

　　接下來咱們能夠用進入demo1 , 接下來咱們能夠CLI命令ng serve --open 啓動程序.

• ng serve 會自動開發服務器，並檢查你的文件修改，若是項目文件有更改，他就會從新構建程序
• (open/o) 選項是用於自動打開瀏覽器，並訪問localhost 的 4200 端口 (http://localhost:4200/)

接下來咱們就會看到瀏覽器自動打開，並顯示以下頁面

　　

 

接着咱們就能夠對項目進行一些修改工做。

進入app咱們能夠看到咱們的component和module。css(sass/scss/less) 都已經建立好了。
接下來咱們給component 添加一個屬性。而後顯示到頁面。

咱們給Component 添加一個message屬性而後找到對應的html，讓message顯示出來。

咱們能夠發現當咱們修改Component或者HTML的以後，CLI 會自動啓動編譯，而後更新app

而後咱們能夠看到頁面上已經顯示咱們剛剛添加的在Component中的屬性

 接下來咱們能夠給字體價格顏色。看咱們的樣式是否可用。

在這個demo 中我選擇的是sass，sass也是新接觸的知識卻是。在編寫SASS的時候出現了無效css錯誤

後來發現SASS容許有空格出現。全部我把SASS寫成了h1{color:red;} 就能夠工做了。

而後咱們能夠看到頁面上的字體也變成了紅色。