Angular項目目錄結構

前言：不支持MakeDown的博客園調格式的話，真的寫到快o(╥﹏╥)o了，因此老夫仍是轉戰到CSDN吧，這邊就不更新啦啦啦~

CSDN地址：https://blog.csdn.net/Night20181029 比較麻煩就是要審覈，┓( ´∀` )┏

github地址：https://github.com/KKQQ9/Notes

掘金地址：https://juejin.im/user/5d2b4fcef265da1b8c19b998

項目目錄結構

• 項目目錄結構圖
• 說明
• 具體內容
  • .editorconfig
  • angular.json
  • browserslist
  • package-lock.json&package.json
  • app-routing.module.ts // app路由
  • app.component.ts // app的組件
  • app.module.ts // app的模塊

# 項目目錄結構

## 項目目錄結構圖

  

## 說明
```javascript
|-- 文件名 // 說明
|-- 首層目錄
|-- e2e // 自動化集成測試目錄
|-- node_modules // npm/cnpm第三方依賴包存放目錄
|-- src // 應用源代碼目錄
|-- .editorconfig // 不一樣編譯器統一代碼風格
|-- .gitignore // git中的忽略文件列表
|-- angular.json // Angular的配置文件
|-- browserslist // 配置瀏覽器兼容性的文件
|-- karma.conf.js // 自動化測試框架Karma的配置文件
|-- package-lock.json // 依賴包版本鎖定文件
|-- package.json // 標準的npm工具的配置文件
|-- README.md // 項目說明的MakeDown文件
|-- tsconfig.app.json // app項目的TypeScript的配置文件
|-- tsconfig.json // 整個工做區的TypeScript配置文件
|-- tsconfig.spec.json // 用於測試的TypeScript配置文件
|-- tslint.json // TypeScript的代碼靜態掃描配置

|-- src目錄
|-- app // 工程源碼目錄
|-- assets // 資源目錄
|-- environments // 環境配置目錄
|-- favicon.ico // header裏的icon
|-- index.html // 單頁應用的宿主HTML
|-- main.ts // 入口ts文件
|-- polyfills.ts // 不一樣瀏覽器兼容腳本加載
|-- karma.conf.js // 自動化測試框架Karma的配置文件
|-- style.css // 整個項目的全局css
|-- test.ts // 測試入口

|-- app目錄
|-- app-routing.module.ts // app路由
|-- app.component.css // app的css
|-- app.component.html // app的html
|-- app.component.spec.ts // app的測試
|-- app.component.ts // app的組件
|-- app.module.ts // app的模塊
|-- environments目錄
|-- environments.prod.ts // 生產環境
|-- environments.ts // 開發環境
```

## 具體內容

### .editorconfig
****
  

### angular.json
****
```javascript
|-- angular.json // Angular的配置文件
|--首層目錄 // 說明
|--"$schema": "" // 架構關鍵字:指出如何形式描述XML文檔的元素
|--"version": 1, // 版本
|--"newProjectRoot": "projects", // 新項目路徑：多項目開發
|--"projects": {}
|--"defaultProject": "scrollable-tab" // 默認項目
|--"projects": {}
|--"scrollable-tab":{} // 項目scrollable-tab
|--"projectType": "application",
|--"schematics": {},
|--"root": "",
|--"sourceRoot": "src", // 項目根路徑
|--"prefix": "app", // 安裝應用的指定目錄
|--"architect": {} // 架構目錄
|--"build": {} // 搭建命令文件目錄
|--"serve": {} // 服務命令文件目錄
|--"extract-i18n": {} // 語言翻譯目錄
|--"test": {} // 測試目錄
|--"lint": {} // 代碼規範目錄
|--"e2e": {} // 測試目錄
|--"builder": "@angular-devkit/build-angular:" // AG開發搭建路徑
|--"options": {} // 相關可選文件目錄
|--"configurations": {} // 配置文件目錄
```

### browserslist
****
```JavaScript
// 只支持市場佔有率＞0.5%的瀏覽器
> 0.5%
last 2 versions
Firefox ESR
not dead
// 不支持IE 9-11
not IE 9-11 # For IE 9-11 support, remove 'not'.
```
### package-lock.json&package.json
****
```JavaScript
|-- package-lock.json // 依賴包版本鎖定文件
|--"name": "scrollable-tab", // 包的名稱 //包鎖:必須與package.json內容匹配
|--"version": "0.0.0", // 包的版本 //包鎖:必須與package.json內容匹配
|--"lockfileVersion": 1, // 整數版本，1今後文檔的版本號開始，在生成此版本時使用其語義package-lock.json
|--"requires": true, // 是否必需
|--"dependencies"{} // 包的依賴目錄

|-- package.json // 依賴包版本文件
|--"name": "scrollable-tab", // 包的名稱 //包鎖:必須與package.json內容匹配
|--"version": "0.0.0", // 包的版本 //包鎖:必須與package.json內容匹配
|--"scripts": {}, // 運行腳本命令目錄
|--"ng": "ng", // 全局命令
|--"start": "ng serve", // 開發環境項目啓動命令
|--"start.prod": "ng serve --aot", // 生產環境項目啓動命令
|--"build": "ng build", // 項目打包命令
|--"test": "ng test", // 項目測試命令
|--"lint": "ng lint", // 項目靜態編譯檢測語法命令
|--"e2e": "ng e2e", // 測試命令語句
|--"ivy": "ivy-ngcc" // 兼容性編譯器命令語句
|--"private": true, // 是否必需
|--"dependencies"{} // 生產環境下包的依賴目錄 8//大版本.0//小版本.0//補丁版本
|--"@angular/animations": "~8.0.0", // ~:鎖定大版本與小版本，補丁版本可變更
|--"tslib": "^1.9.0", // ^:鎖定大版本，小版本與補丁版本可變更
|--"protractor": "5.4.0", // :嚴格鎖定在該版本，所有版本都不可變更
|--"devDependencies"{} // 開發環境下包的依賴目錄
```

### app-routing.module.ts // app路由****```TypeScript// 變量導入路徑import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';// 聲明路由const routes: Routes = [{ // 默認路由路徑 path : '', // 默認路由組件 component : HomeComponent}];// @angular/cli 打包的最小單位/*** @angular/cli 會檢查全部 @NgModule 和路由配置，若是你配置了異步模塊，cli 會自動把模塊切分紅獨立的 chunk（塊）* 其它框架基本上都須要你本身去配置 webpack，本身定義切分 chunck 的規則而Angular 裏面，打包和切分的動做是 @angular/cli 自動處理的，不須要你干預* @NgModule 元數據類型圖表* */@NgModule({ // 導入模塊 imports: [RouterModule.forRoot(routes)], // 導出模塊 exports: [RouterModule]})// 導出控制器export class AppRoutingModule { }|--@NgModule元數聽說明 |--declarations: [] // 屬於該模塊的可聲明對象（組件、指令和管道）的列表 |--providers: [] // 依賴注入提供商的列表 |--imports: [] // 被導入的模塊列表 |--exports: [] // 可導出的模塊的可聲明對象（組件、指令、管道類）列表 |--bootstrap: [AppComponent] // 自動啓動的組件列表,應用根組件纔有 |--entryComponents: [] // 可動態加載進視圖的組件列表```### app.component.ts // app的組件****```TypeScriptimport { Component } from '@angular/core';// @Component組件是UI最小的渲染單位/*** Component修飾符可讓開發者經過Angular 的Component建立一個相似Java的class，並同時提供額外的元數據用於定義在運行環境中，這個component將如何運行/實例化以及被使用。* Angular components實質是directives下的一個子集* 不一樣於directive：Component始終存在一個視圖模板，在這個視圖模板中，每個元素只能有一個component被實例化* Component元數聽說明圖表*/@Component({// 其餘組件導入選擇器selector: 'app-root',// 該組件模板路徑template / templateUrltemplateUrl: './app.component.html',// 該樣式路徑 styles / styleUrlsstyleUrls: ['./app.component.css']})// 導出控制器export class AppComponent {}|--@Component元數聽說明 |--繼承於Directive裝飾器 |--selector: string // CSS選擇器用於在模板中標記出該指令，並觸發該指令的實例化 |--inputs: string[] // 列舉某個指令的一組可供數據綁定的輸入屬性 |--outputsstring[] // 列舉一組可供事件綁定的輸出屬性 |--providers: Provider[] // 一組依賴注入令牌，它容許DI系統爲這個指令或組件提供依賴 |--exportAs: string // 定義一個名字，用於在模板中把該指令賦值給一個變量 |--queries: {[key: string]: any;} // 配置一些查詢，它們將被注入到該指令中 |--host: {[key: string]: string;} // 使用一組鍵值對，把類的屬性映射到宿主元素的綁定（屬性，屬和事件） |--jit: true // 若是爲真，則該指令/組件將會被AOT編譯器忽略，始終使用JIT編譯|--自身的元數據 |--changeDetection: ChangeDetectionStrategy // 用於當前組件的變動檢測策略 |--viewProviders: Provider[] // 定義一組可注入對象，它們在視圖的各個子節點中可用 |--moduleId: string // 包含該組件的那個模塊的 ID。該組件必須能解析模板和樣式表中使用的相對 URL。 SystemJS 在每一個模塊中都導出了 __moduleName 變量。在 CommonJS 中，它能夠設置爲 module.id。 |--templateUrl/template: string // Angular 組件模板文件的 URL/Angular 組件的內聯模板 |--styleUrls/styles: string[] // Angular 組件樣式文件的 URL/Angular 組件的內聯樣式 |--animations: any[] // 一個或多個動畫 trigger() 調用，包含一些 state() 和 transition() 定義 |--encapsulation: ViewEncapsulation // 改寫默認的插值表達式起止分界符（{{ 和 }}） |--interpolation: [string, string] // 供模板和 CSS 樣式使用的樣式封裝策略 |--entryComponents: Array<Type<any> | any[]> // 一個組件的集合，它應該和當前組件一塊兒編譯。對於這裏列出的每一個組件，Angular 都會建立一個 ComponentFactory 並保存進 ComponentFactoryResolver 中。 |--preserveWhitespaces: boolean // 若是爲true 則保留，爲 false 則從編譯後的模板中移除可能多餘的空白字符。 空白字符就是指那些能在 JavaScript 正則表達式中匹配 \s 的字符。默認爲 false，除非經過編譯器選項改寫了它```### app.module.ts // app的模塊****```TypeScriptimport { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';@NgModule({declarations: [ AppComponent,],imports: [ BrowserModule, AppRoutingModule, HomeModule, ScrollableTabModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }```