Angular入門--項目框架搭建
Angular介紹
Angular在2012年發布版本1.0，是最早流行的前端MVVM框架，目前流行的React和Vue框架都在它之後。
由於React的流行，以及angular 1.0版本暴露出來的一些性能，組件化等的一些缺點，谷歌決定重寫angular，在2016年推出angular2.0.
Angular 2.0采用TypeScript開發，集成了RxJS庫。目前最新版本是6.0
Angular生態
1、服務端渲染解決方案 Angular Universal
2、PWA（Progressive web apps ）解決方案angular service worker
3、Ionic。基於angular語法開發原生應用的開發框架
開發工具
建議采用vs code進行開發。
需要安裝擴展插件Angular 6 Snippets。
如果結合ant-design的angular版本ng-zorro-antd，需要安裝擴展插件
ng-zorro snippets。可以很好地提供代碼補全功能
Angular項目的構建
基於Angular CLI構建項目
npm install -g @angular/cli 安裝Angular CLI
ng new <項目名稱> 自動生成項目目錄
ng serve --open 啟動本地服務，並自動打開瀏覽器
本地服務默認使用4200端口，如果要修改端口加 --port <端口號>
ng buid 對項目進行打包
如果使用ant-design的ng-zorro Ui組件庫直接運行
ng add ng-zorro-antd
配置代理：
本地開發配置代理可以防止跨域問題。
在項目根目錄下新建proxy.config.json
{
"/api": {
"target": "http://xxx.xxx.xxx.xxx:8076",
"changeOrigin": true,
"secure": false,
}
}
修改package.json文件
目錄結構
e2e 測試模塊配置
src 開發目錄
app 項目目錄，放置組件和頁面
assets靜態資源
index.html頁面模板
styles.css 項目公共樣式
proxy.config.json 代理配置文件
tsconfig.json typescript配置文件
tslint.json typescript語法檢測配置文件
Angular入門--項目框架搭建