Angular項目目錄

0.模塊介紹和基礎知識

https://cloud.tencent.com/developer/section/1489514

1.以下圖VSCode--

 

node_modules        第三方依賴包存放目錄
e2e                  端到端的測試目錄  用來作自動測試的
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代碼質量檢查的規則，不用管它

2.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        不用管

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

 app.component.ts：這個文件表示組件，
組件是Angular應用的基本構建模塊，能夠理解爲一段帶有業務邏輯和數據的Html

 

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

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

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

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

**輸入屬性（@inputs）😗*是用來接收外部傳入的數據的,Angular的程序結構就是一個組件樹，輸入屬性容許在組件樹種傳遞數據
**提供器（providers）：**這個是用來作依賴注入的
**生命週期鉤子（LifeCycle Hooks）：**一個組件從建立到銷燬的過程當中會有多個鉤子會被觸發，相似於Android中的Activity的生命週期
樣式表：組件能夠關聯一些樣式表
動畫（Animations）： Angular提供了一個動畫包來幫助咱們方便的建立一些跟組件相關的動畫效果，好比淡入淡出等
**輸出屬性（@Outputs）：**用來定義一些其餘組件可能須要的事件或者用來在組件之間共享數據

 

 app.module.ts：這個文件表示模塊

與AppComponent相似，模塊也須要裝飾器來裝飾。