2018年5月17日 星期四

Angular 如何建立component(04)

Angular每一個畫面都是多個component所組成
以下會記錄如何新增component
1.首先先輸入
ctrl + `(單引號,通常在1的左邊tab上面)
2.按+號新增終端機,預設可能是power shell,選擇終端機資料夾預設應該會在目前的專案上
3.建立component
ng generate component pages
ng generate 建立一個 簡寫 g component 哪一種範本 簡寫 cpages 頁面名稱 

未來請輸入方式如下列
ng g c pages
ng g -h 可看目前版本所有可建立的範本
4.建立起來後,會多一個資料夾及有四個檔案,然後app.module.ts 會異動
CREATE src/app/pages/pages.component.html (24 bytes) <-Html
CREATE src/app/pages/pages.component.spec.ts (621 bytes) <-測試檔
CREATE src/app/pages/pages.component.ts (265 bytes) <-程式
CREATE src/app/pages/pages.component.css (0 bytes) <-css

UPDATE src/app/app.module.ts (392 bytes) 修改了declarations
及import { PagesComponent } from './pages/pages.component';
5.如何顯示這個頁面?
找到剛新增的pages.component.ts
裡面有一個 selector: 'app-pages'
只要將app-pages加入在app.component.html即可顯示出剛剛的頁面
<app-pages></app-pages>
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

Angular 啟動順序(03)

AngularJs只需在前端宣告ng標籤即可運行
但到了Angular的話完全不同
這次框架有自己個一個流程
所有的程式碼及html都有固定的放法
這樣程式在跑的時候才會正常運行
前篇文章所提到的方法啟動server
npm start
以下是已專案預設的程式跑起來的順序
1.進入網頁index.html
2.main.ts開始載入import
3.啟動AppModule
4.執行AppComponent元件
5.執行AppComponent class
6.執行AppComponent templateUrl
7.執行AppComponent style
8.載入完成呈現畫面
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

Angular 新增專案+開發環境設定+常用快速鍵(02)

由於使用Visual Studio Code跟之前使用Visual Studio有點不太一樣
在Visual Studio圖形界面化的方式可新增專案很方便
Visual Studio Code中可能需要打些指令來新增在此筆記一下
1.cmd
2.建立一個資料夾來放專案用,因有些公司可能在C:無法執行所以此次在D:建立一個projects資料夾,使用Angular Cli來建立Angular的專案(請使用英文或數字命名)
cd\
d:
md projects
cd projects
ng new firstapp
3.測試是否有建置成功,至剛新增的資料夾使用npm
cd firstapp
npm start
4.開啟瀏覽器看看網站是否有成功,有跑起來會有Welcome to app!
http://localhost:4200/
5.如何發佈
一般
ng build
加參數--prod
ng build --prod
壓縮整的專案js變小
===============================================================
A.如何改變npm的Port
找到package.json
"start": "ng serve"
改
"start": "ng serve --port 8080"
B.如何關閉npm Server
ctrl + c
y
C.開啟VS Code,在專案下輸入
code .
D.如果Angular版本更新了要如何升級
專案目錄下
ng update
會出現以下表示升級完成
 We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       1.2.3 -> 6.0.2           ng update @angular/cli
      @angular/core                      4.4.7 -> 6.0.2           ng update @angular/core
      rxjs                               5.5.10 -> 6.1.0          ng update rxjs


    There might be additional packages that are outdated.
    Or run ng update --all to try to update all at the same time.
E.以述為單一專案升級,升級Global Agnular Cli版本方式
看目前版本
 npm list -g --depth=0
檢查最新版本
npm outdated -g
沒出現文字為目前最新版
有出現代表有新版
Package       Current  Wanted  Latest  Location
@angular/cli    6.0.1   6.0.3   6.0.3
若有新版可執行下列安裝最新版
npm install -g @angular/cli
===============================================================
1.格式化文件
shift + alt + f
2.ts html 快速切換
alt + o
3.註解
ctrl + /
===============================================================
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網