Angular 項目目錄結構詳解

時間 2019-11-08

原文原文鏈接

咱們已經經過Angular CLI命令行工具建立出來一個全新的Angular項目，要想寫項目，首先咱們要先搞清楚項目的目錄結構是怎樣的，每一個文件又有什麼意義，文件中的代碼又起到什麼做用。css

首先看一下總體的目錄結構：html

能夠看到，命令行工具自動生成了不少文件和目錄，咱們來講說這些目錄是幹什麼的node

首層目錄

e2e                 端到端的測試目錄  用來作自動測試的
node_modules        第三方依賴包存放目錄
src                 應用源代碼目錄  
.angular-cli.json   Angular命令行工具的配置文件。後期可能會去修改它，引一些其餘的第三方的包  好比jquery等
karma.conf.js       karma是單元測試的執行器，karma.conf.js是karma的配置文件
package.json        這是一個標準的npm工具的配置文件，這個文件裏面列出了該應用程序所使用的第三方依賴包。實際上咱們在新建項目的時候，等了半天就是在下載第三方依賴包。下載完成後會放在node_modules這個目錄中，後期咱們可能會修改這個文件。
protractor.conf.js  也是一個作自動化測試的配置文件
README.md           說明文件
tslint.json         是tslint的配置文件，用來定義TypeScript代碼質量檢查的規則，不用管它

angular-cli.json常見配置jquery

{
  "project": {
    "name": "ng-admin", //項目名稱
  },
  "apps": [
    {
      "root": "src", // 源碼根目錄
      "outDir": "dist", // 編譯後的輸出目錄，默認是dist/
      "assets": [ // 記錄資源文件夾，構建時複製到`outDir`指定的目錄
        "assets",
        "favicon.ico"
      ],
      "index": "index.html", // 指定首頁文件，默認值是"index.html"
      "main": "main.ts", // 指定應用的入門文件
      "polyfills": "polyfills.ts", // 指定polyfill文件
      "test": "test.ts", // 指定測試入門文件
      "tsconfig": "tsconfig.app.json", // 指定tsconfig文件
      "testTsconfig": "tsconfig.spec.json", // 指定TypeScript單測腳本的tsconfig文件
      "tsconfig":"tsconfig.app.json",
      "prefix": "app", // 使用`ng generate`命令時，自動爲selector元數據的值添加的前綴名
      "deployUrl": "//cdn.com.cn", // 指定站點的部署地址，該值最終會賦給webpack的output.publicPath，經常使用於CDN部署
      "styles": [ // 引入全局樣式，構建時會打包進來，經常使用於第三方庫引入的樣式
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/admin-lte/dist/css/adminlte.min.css",
        "../node_modules/admin-lte/dist/css/skins/skin-blue.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/ionicons/dist/css/ionicons.min.css"
      ],
      "scripts": [ // 引入全局腳本，構建時會打包進來，經常使用語第三方庫引入的腳本
       "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/admin-lte/dist/js/app.min.js"
      ],
      "environmentSource": "environments/environment.ts", // 基礎環境配置
      "environments": { // 子環境配置文件
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": { // 執行`ng generate`命令時的一些默認值
    "styleExt": "scss", // 默認生成的樣式文件後綴名
    "component": {
      "flat": false, // 生成組件時是否新建文件夾包裝組件文件，默認爲false（即新建文件夾）
      "spec": true, // 是否生成spec文件，默認爲true
      "inlineStyle": false, // 新建時是否使用內聯樣式，默認爲false
      "inlineTemplate": false, // 新建時是否使用內聯模板，默認爲false
      "viewEncapsulation": "Emulated", // 指定生成的組件的元數據viewEncapsulation的默認值
      "changeDetection": "OnPush", // 指定生成的組件的元數據changeDetection的默認值
    }
  }
}

src目錄

app目錄               包含應用的組件和模塊，咱們要寫的代碼都在這個目錄
assets目錄            資源目錄，存儲靜態資源的  好比圖片
environments目錄      環境配置。Angular是支持多環境開發的，咱們能夠在不一樣的環境下（開發環境，測試環境，生產環境）共用一套代碼，主要用來配置環境的
index.html          整個應用的根html，程序啓動就是訪問這個頁面
main.ts             整個項目的入口點，Angular經過這個文件來啓動項目
polyfills.ts        主要是用來導入一些必要庫，爲了讓Angular能正常運行在老版本下
styles.css          主要是放一些全局的樣式
tsconfig.app.json   TypeScript編譯器的配置,添加第三方依賴的時候會修改這個文件
tsconfig.spec.json  不用管
test.ts             也是自動化測試用的
typings.d.ts        不用管

app目錄

app目錄是咱們要編寫的代碼目錄。咱們寫的代碼都是放在這個目錄。
一個Angular程序至少須要一個模塊和一個組件。在咱們新建項目的時候命令行已經默認生成出來了。webpack

組件文件

app.component.ts：這個文件表示app組件， web

組件是Angular應用的基本構建模塊，能夠理解爲一段帶有業務邏輯和數據的Html typescript

咱們來看看app.component.ts中的代碼，並解釋下代碼的意義npm

下圖是源代碼，我只是把title的值給改了下 json

來看看每行代碼的意義，有點亂，能夠複製到編輯器上去看。bootstrap

/*這裏是從Angular核心模塊裏面引入了component裝飾器*/
import {Component} from '@angular/core';

/*用裝飾器定義了一個組件以及組件的元數據  全部的組件都必須使用這個裝飾器來註解*/
@Component({
  /*組件元數據  Angular會經過這裏面的屬性來渲染組件並執行邏輯
  * selector就是css選擇器，表示這個組件能夠經過app-root來調用，index.html中有個<app-root>Loading...</app-root>標籤，這個標籤用來展現該組件的內容
  *templateUrl  組件的模板，定義了組件的佈局和內容
  *styleUrls   該模板引用那個css樣式
  * */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/*AppComponent原本就是一個普通的typescript類，可是上面的組件元數據裝飾器告訴Angular，AppComponent是一個組件，須要把一些元數據附加到這個類上，Angular就會把AppComponent當組件來處理*/
export class AppComponent {
  /*這個類實際上就是該組件的控制器，咱們的業務邏輯就是在這個類中編寫*/
  title = '學習Angular';
}

組件相關的概念：

1.組件元數據裝飾器（@Component）
簡稱組件裝飾器，用來告知Angular框架如何處理一個TypeScript類.
Component裝飾器包含多個屬性，這些屬性的值叫作元數據，Angular會根據這些元數據的值來渲染組件並執行組件的邏輯

2.模板（Template）
咱們能夠經過組件自帶的模板來定義組件的外觀，模板以html的形式存在，告訴Angular如何來渲染組件，通常來講，模板看起來很像html，可是咱們能夠在模板中使用Angular的數據綁定語法，來呈現控制器中的數據。

3.控制器（controller）
控制器就是一個普通的typescript類，他會被@Component來裝飾，控制器會包含組件全部的屬性和方法，絕大多數的業務邏輯都是寫在控制器裏的。控制器經過數據綁定與模板來通信，模板展示控制器的數據，控制器處理模板上發生的事件。

裝飾器，模板和控制器是組件的必備要素。還有一些可選的元素，好比：

①輸入屬性（@inputs）:是用來接收外部傳入的數據的,Angular的程序結構就是一個組件樹，輸入屬性容許在組件樹種傳遞數據

②提供器（providers）：這個是用來作依賴注入的

③生命週期鉤子（LifeCycle Hooks）：一個組件從建立到銷燬的過程當中會有多個鉤子會被觸發

④樣式表：組件能夠關聯一些樣式表

⑤動畫（Animations）： Angular提供了一個動畫包來幫助咱們方便的建立一些跟組件相關的動畫效果，好比淡入淡出等

⑥輸出屬性（@Outputs）：用來定義一些其餘組件可能須要的事件或者用來在組件之間共享數據