一、簡介
專案介紹
目錄結構
├── README.md # 介紹文件
├── _mock # 測試資料
├── angular.json # 工作區中所有專案的預設 CLI 配置，包括 CLI 使用的構建選項、執行選項、測試工具選項（比如 TSLint、Karma、Protractor）等
├── node_modules # 提供給整個工作區的 npm 包
├── package-lock.json # 鎖定安裝時的包的版本號，並且需要上傳到git，以保證其他人在npm install時大家的依賴能保證一致。
├── package.json # 配置用於工作區中所有專案的包依賴項
├── proxy.config.json # 代理
├── src
│ ├── app
│ │ ├── app.README.md # 介紹文件
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── app.route.ts # 根路由
│ │ ├── components # 元件
│ │ ├── service # 服務
│ │ └── share.service.ts # 單例服務
│ ├── assets # 靜態資原始檔
│ │ ├── browser # 瀏覽器
│ │ ├── doc # 文件
│ │ ├── fonts # 字型圖示
│ │ │ ├── ali_iconfont # 阿里圖示庫
│ │ │ └── antdesign # antdesign本地圖示
│ │ ├── image # 圖片資源
│ │ ├── plugin # 第三方外掛
│ │ │ └── spread
│ │ ├── styles # 樣式檔案
│ ├── environments # 環境配置
│ │ ├── environment.51.ts # 其它環境配置
│ │ ├── environment.dev.ts # 開發環境配置
│ │ └── environment.prod.ts # 上線環境配置
│ ├── favicon.ico # 一個用在書籤欄上的應用圖示
│ ├── fccomponents # 平臺元件
│ ├── fccore # 核心模組
│ │ ├── business
│ │ ├── directive # 指令
│ │ ├── fccore.module.ts # 核心模組
│ │ ├── pipe # 管道
│ │ └── service # 服務
│ │ ├── cache.service.ts # 快取服務
│ │ ├── common.service.ts # 公共方法
│ │ ├── dao.service.ts # httpClient 前後端通訊
│ │ ├── log.service.ts # 列印服務
│ │ ├── message.service.ts # 訊息服務
│ │ └── user.service.ts # 使用者服務
│ ├── feature # 業務程式碼
│ ├── index.html # 主HTML檔案
│ ├── karma.conf.js
│ ├── main.ts # 應用的主入口點,引導應用的根模組 AppModule 來執行在瀏覽器中
│ ├── polyfills.ts # 為瀏覽器支援提供膩子指令碼
│ ├── shared # 共享模組
│ ├── styles.less # 專案的樣式檔案
│ ├── test.ts
│ ├── tsconfig.app.json # 繼承自工作區級的 tsconfig.json 檔案
│ ├── tsconfig.spec.json
│ └── tslint.json # 繼承自工作區級的 tsconfig.json 檔案
├── tsconfig.json # 工作區中所有應用的預設 TypeScript 配置。包括 TypeScript 選項和 Angular 模板編譯器選項。
├── tslint.json # 工作區中所有應用的預設 TSLint 配置。
├── .gitignore # 指定 Git 要忽略的非跟蹤的檔案。
├── .editorconfig # 程式碼編輯器配置
└── tslint程式碼檢查.READE.md # 介紹文件
複製程式碼package.json介紹
{
"name": "fc-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json --host=0.0.0.0 --open --port=4200",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"aot": "ng build --aot"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@antv/g2": "^3.5.3",
"@grapecity/spread-excelio": "^12.0.10",
"@grapecity/spread-sheets": "^12.0.10",
"@grapecity/spread-sheets-charts": "^12.0.10",
"@grapecity/spread-sheets-pdf": "^12.0.10",
"@grapecity/spread-sheets-print": "^12.0.10",
"@grapecity/spread-sheets-resources-zh": "^12.0.10",
"ag-grid-community": "^20.2.0",
"ag-grid-enterprise": "^20.2.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"mockjs": "^1.0.1-beta3",
"ng-zorro-antd": "^7.2.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.1",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.9.5",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"less": "^2.7.3",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
複製程式碼二、安裝專案
- 在
gitnodenpmvscode配置好多前提下，克隆程式碼，命令如下：
git clone https://github.com/luohong123/fc-angular.git
npm install
npm start
複製程式碼- 在瀏覽器中輸入 http://localhost:4200
三、開發程式碼
1. 程式碼規範
- 請按照angular官網提出的
風格指南開發程式碼
【風格指南】angular.cn/guide/style…
2. 前後端通訊
- 【 使用httpclient】angular.cn/guide/http
3. 介面測試
- 推薦使用postman工具
4. 路由複用策略程式碼預覽
5. 懶載入路由
四、程式碼質量檢查
【程式碼規範】
- 每一個檔案，如html、css、ts的header都要有作者的名字、描述、作者郵箱、時間、修改時間、修改者等。
- 檔案命名規範
- ts中一個變數一行註釋，每一個方法都要有註釋
- 按照angular官網提供的【風格指南】連結 寫程式碼
【tslint程式碼檢查】
【vscode安裝外掛】
-
在vscode中安裝tslint,自動檢查程式碼是否規範,如圖：
-
在vscode中安裝koroFileHeader，如圖：
-
在vscode中安裝程式碼自動美化工具，如圖：
-
angular版本的antDesign程式碼自動提示工具
-
在vscode中安裝Open-In-Browser
-
在vscode中安裝 CSS Peek
-
在vscode中安裝 Color Info
-
在vscode中安裝快捷鍵外掛 IntelliJ IDEA Keybindings
【通過aot打包檢查程式碼是否規範】
ng build --aot
複製程式碼五、aot打包部署
- 通過
ng build --aot命令生成dist 檔案
六、學習幫助
-
【angular官網】angular.cn/docs
-
【typescript官網】www.typescriptlang.org/index.html
-
【ng.ant.design官網】ng.ant.design/docs/introd…
七、謝謝大家
感謝大家抽時間閱讀我的文章，歡迎指出不對的地方，謝謝！