首先看一下整體的目錄結(jié)構(gòu)：
可以看到，命令行工具自動(dòng)生成了很多文件和目錄驶俊，我們來說說這些目錄是干什么的
首層目錄：
- 【node_modules 】 第三方依賴包存放目錄
- 【e2e 】 端到端的測試目錄 用來做自動(dòng)測試的
- 【src 】 應(yīng)用源代碼目錄
- 【.angular-cli.json 】 Angular命令行工具的配置文件剥汤。后期可能會(huì)去修改它，引一些其他的第三方的包 比如jquery等
-【 karma.conf.js】 karma是單元測試的執(zhí)行器允睹，karma.conf.js是karma的配置文件 - 【package.json 】 這是一個(gè)標(biāo)準(zhǔn)的npm工具的配置文件运准，這個(gè)文件里面列出了該應(yīng)用程序所使用的第三方依賴包。實(shí)際上我們在新建項(xiàng)目的時(shí)候缭受，等了半天就是在下載第三方依賴包胁澳。下載完成后會(huì)放在node_modules這個(gè)目錄中，后期我們可能會(huì)修改這個(gè)文件米者。
- 【protractor.conf.js】 也是一個(gè)做自動(dòng)化測試的配置文件
- 【README.md】 說明文件
- 【tslint.json】 是tslint的配置文件韭畸，用來定義TypeScript代碼質(zhì)量檢查的規(guī)則，不用管它
src目錄：
- app目錄 包含應(yīng)用的組件和模塊蔓搞，我們要寫的代碼都在這個(gè)目錄
- assets目錄 資源目錄胰丁，存儲(chǔ)靜態(tài)資源的 比如圖片
- environments目錄 環(huán)境配置。Angular是支持多環(huán)境開發(fā)的喂分，我們可以在不同的環(huán)境下（開發(fā)環(huán)境锦庸，測試環(huán)境，生產(chǎn)環(huán)境）共用一套代碼蒲祈，主要用來配置環(huán)境的
- index.html 整個(gè)應(yīng)用的根html甘萧，程序啟動(dòng)就是訪問這個(gè)頁面
- main.ts 整個(gè)項(xiàng)目的入口點(diǎn)萝嘁，Angular通過這個(gè)文件來啟動(dòng)項(xiàng)目
- polyfills.ts 主要是用來導(dǎo)入一些必要庫，為了讓Angular能正常運(yùn)行在老版本下
- styles.css 主要是放一些全局的樣式
- tsconfig.app.json TypeScript編譯器的配置,添加第三方依賴的時(shí)候會(huì)修改這個(gè)文件
- tsconfig.spec.json 不用管
- test.ts 也是自動(dòng)化測試用的
- typings.d.ts 不用管
app目錄（重點(diǎn)）
app目錄是我們要編寫的代碼目錄扬卷。我們寫的代碼都是放在這個(gè)目錄酿愧。
一個(gè)Angular程序至少需要一個(gè)模塊和一個(gè)組件。在我們新建項(xiàng)目的時(shí)候命令行已經(jīng)默認(rèn)生成出來了邀泉。
pp.component.ts：這個(gè)文件表示組件嬉挡，
組件是Angular應(yīng)用的基本構(gòu)建模塊，可以理解為一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的Html
我們來看看app.component.ts中的代碼汇恤，并解釋下代碼的意義
下圖是源代碼庞钢，我只是把title的值給改了下
其次，來看看每行代碼的意義因谎，可以復(fù)制到編輯器上去看：
import {Component} from '@angular/core';
這里是從Angular核心模塊里面引入了component裝飾器
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
用裝飾器定義了一個(gè)組件以及組件的元數(shù)據(jù) 所有的組件都必須使用這個(gè)裝飾器來注解
組件元數(shù)據(jù) Angular會(huì)通過這里面的屬性來渲染組件并執(zhí)行邏輯
- selector就是css選擇器基括，表示這個(gè)組件可以通過app-root的HTML頁面標(biāo)簽來來調(diào)用，index.html中有個(gè)<app-root>Loading...</app-root>標(biāo)簽财岔，這個(gè)標(biāo)簽用來展示該組件的內(nèi)容
- templateUrl 指定了一個(gè)html文件作為組件的模板风皿，定義了組件的布局和內(nèi)容。在這里定義app.component.html匠璧，最終在index.html中<app-root>/<app-root>這個(gè)標(biāo)簽的內(nèi)容將展示app.component.html里面的內(nèi)容桐款。也就是templateUrl所定義的頁面定義了用戶最終看見的頁面的布局和內(nèi)容。
- styleUrls 指定了一組css文件夷恍∧д＃可以在這個(gè)css中編寫這個(gè)組件模板要用到的樣式。也就是app.component.html和app.component.css兩個(gè)文件酿雪。
export class AppComponent {
title = '學(xué)習(xí)Angular';
}
這個(gè)類實(shí)際上就是該組件的控制器遏暴，我們的業(yè)務(wù)邏輯就是在這個(gè)類中編寫
AppComponent本來就是一個(gè)普通的typescript類，但是上面的組件元數(shù)據(jù)裝飾器告訴Angular指黎，AppComponent是一個(gè)組件朋凉，需要把一些元數(shù)據(jù)附加到這個(gè)類上，Angular就會(huì)把AppComponent當(dāng)組件來處理
組件相關(guān)的概念：
1.組件元數(shù)據(jù)裝飾器（@Component）
簡稱組件裝飾器醋安，用來告知Angular框架如何處理一個(gè)TypeScript類.
Component裝飾器包含多個(gè)屬性杂彭，這些屬性的值叫做元數(shù)據(jù)，Angular會(huì)根據(jù)這些元數(shù)據(jù)的值來渲染組件并執(zhí)行組件的邏輯2.模板（Template）
我們可以通過組件自帶的模板來定義組件的外觀茬故，模板以html的形式存在盖灸，告訴Angular如何來渲染組件，一般來說磺芭，模板看起來很像html赁炎，但是我們可以在模板中使用Angular的數(shù)據(jù)綁定語法，來呈現(xiàn)控制器中的數(shù)據(jù)。3.控制器（controller）
控制器就是一個(gè)普通的typescript類徙垫，他會(huì)被@Component來裝飾讥裤，控制器會(huì)包含組件所有的屬性和方法，絕大多數(shù)的業(yè)務(wù)邏輯都是寫在控制器里的姻报〖河ⅲ控制器通過數(shù)據(jù)綁定與模板來通訊，模板展現(xiàn)控制器的數(shù)據(jù)吴旋，控制器處理模板上發(fā)生的事件损肛。
裝飾器，模板和控制器是組件的必備要素荣瑟。還有一些可選的元素治拿，比如：
輸入屬性（@inputs）:是用來接收外部傳入的數(shù)據(jù)的,Angular的程序結(jié)構(gòu)就是一個(gè)組件樹，輸入屬性允許在組件樹種傳遞數(shù)據(jù)
提供器（providers）：這個(gè)是用來做依賴注入的
生命周期鉤子（LifeCycle Hooks）：一個(gè)組件從創(chuàng)建到銷毀的過程中會(huì)有多個(gè)鉤子會(huì)被觸發(fā)笆焰，類似于Android中的Activity的生命周期
樣式表：組件可以關(guān)聯(lián)一些樣式表
動(dòng)畫（Animations）： Angular提供了一個(gè)動(dòng)畫包來幫助我們方便的創(chuàng)建一些跟組件相關(guān)的動(dòng)畫效果劫谅，比如淡入淡出等
輸出屬性（@Outputs）：用來定義一些其他組件可能需要的事件或者用來在組件之間共享數(shù)據(jù)
簡單來說，組件的中關(guān)系就如下圖所示
下面我們來看看模塊文件
app.module.ts：這個(gè)文件表示模塊
與AppComponent類似嚷掠，一個(gè)模塊也是一個(gè)帶著裝飾器的typeScript類捏检。
app.module.ts最上面也是一些引入文件，然后用NgModule這樣一個(gè)裝飾器聲明一個(gè)模塊不皆，在這個(gè)模塊聲明中
首先使用declarations屬性聲明了模塊中有什么東西贯城，在這個(gè)元數(shù)據(jù)里面只能聲明組件、指令和管道粟焊。
其次imports應(yīng)用正常運(yùn)轉(zhuǎn)還需要依賴的其他模塊冤狡。
下一個(gè)屬性是providers，默認(rèn)情況下它是空的项棠，用來聲明模塊中提供了什么服務(wù)，這里只能聲明服務(wù)挎峦。
最后是bootstrap香追，聲明主組件是什么。
如下圖：
好了坦胶，新項(xiàng)目的目錄結(jié)構(gòu)就是這樣!
如果你想看看實(shí)際項(xiàng)目的搭建透典，可以點(diǎn)擊這里【Angular基礎(chǔ)+實(shí)戰(zhàn)】（http://www.reibang.com/writer#/notebooks/20319746/notes/21579793/preview）
資料參考
【原文地址】（http://blog.csdn.net/yuzhiqiang_1993/article/details/71191873）
