詳解如何構(gòu)建Angular項目目錄結(jié)構(gòu)
在上一篇博客中我們已經(jīng)通過Angular CLI命令行工具創(chuàng)建出來一個全新的Angular項目,要想寫項目,首先我們要先搞清楚項目的目錄結(jié)構(gòu)是怎樣的,每個文件又有什么意義,文件中的代碼又起到什么作用。
首先看一下整體的目錄結(jié)構(gòu):
可以看到,命令行工具自動生成了很多文件和目錄,我們來說說這些目錄是干什么的
首層目錄:
node_modules 第三方依賴包存放目錄 e2e 端到端的測試目錄 用來做自動測試的 src 應(yīng)用源代碼目錄 .angular-cli.json Angular命令行工具的配置文件。后期可能會去修改它,引一些其他的第三方的包 比如jquery等 karma.conf.js karma是單元測試的執(zhí)行器,karma.conf.js是karma的配置文件 package.json 這是一個標(biāo)準(zhǔn)的npm工具的配置文件,這個文件里面列出了該應(yīng)用程序所使用的第三方依賴包。實際上我們在新建項目的時候,等了半天就是在下載第三方依賴包。下載完成后會放在node_modules這個目錄中,后期我們可能會修改這個文件。 protractor.conf.js 也是一個做自動化測試的配置文件 README.md 說明文件 tslint.json 是tslint的配置文件,用來定義TypeScript代碼質(zhì)量檢查的規(guī)則,不用管它
src目錄:
app目錄 包含應(yīng)用的組件和模塊,我們要寫的代碼都在這個目錄 assets目錄 資源目錄,存儲靜態(tài)資源的 比如圖片 environments目錄 環(huán)境配置。Angular是支持多環(huán)境開發(fā)的,我們可以在不同的環(huán)境下(開發(fā)環(huán)境,測試環(huán)境,生產(chǎn)環(huán)境)共用一套代碼,主要用來配置環(huán)境的 index.html 整個應(yīng)用的根html,程序啟動就是訪問這個頁面 main.ts 整個項目的入口點,Angular通過這個文件來啟動項目 polyfills.ts 主要是用來導(dǎo)入一些必要庫,為了讓Angular能正常運行在老版本下 styles.css 主要是放一些全局的樣式 tsconfig.app.json TypeScript編譯器的配置,添加第三方依賴的時候會修改這個文件 tsconfig.spec.json 不用管 test.ts 也是自動化測試用的 typings.d.ts 不用管
app目錄(重點)
app目錄是我們要編寫的代碼目錄。我們寫的代碼都是放在這個目錄。
一個Angular程序至少需要一個模塊和一個組件。在我們新建項目的時候命令行已經(jīng)默認生成出來了。
app.component.ts:這個文件表示組件,
組件是Angular應(yīng)用的基本構(gòu)建模塊,可以理解為一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的Html
我們來看看app.component.ts中的代碼,并解釋下代碼的意義
下圖是源代碼,我只是把title的值給改了下
來看看每行代碼的意義,有點亂,可以復(fù)制到編輯器上去看。
/*這里是從Angular核心模塊里面引入了component裝飾器*/ import {Component} from '@angular/core'; /*用裝飾器定義了一個組件以及組件的元數(shù)據(jù) 所有的組件都必須使用這個裝飾器來注解*/ @Component({ /*組件元數(shù)據(jù) Angular會通過這里面的屬性來渲染組件并執(zhí)行邏輯 * selector就是css選擇器,表示這個組件可以通過app-root來調(diào)用,index.html中有個<app-root>Loading...</app-root>標(biāo)簽,這個標(biāo)簽用來展示該組件的內(nèi)容 *templateUrl 組件的模板,定義了組件的布局和內(nèi)容 *styleUrls 該模板引用那個css樣式 * */ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) /*AppComponent本來就是一個普通的typescript類,但是上面的組件元數(shù)據(jù)裝飾器告訴Angular,AppComponent是一個組件,需要把一些元數(shù)據(jù)附加到這個類上,Angular就會把AppComponent當(dāng)組件來處理*/ export class AppComponent { /*這個類實際上就是該組件的控制器,我們的業(yè)務(wù)邏輯就是在這個類中編寫*/ title = '學(xué)習(xí)Angular'; }
組件相關(guān)的概念:
1.組件元數(shù)據(jù)裝飾器(@Component)
簡稱組件裝飾器,用來告知Angular框架如何處理一個TypeScript類.
Component裝飾器包含多個屬性,這些屬性的值叫做元數(shù)據(jù),Angular會根據(jù)這些元數(shù)據(jù)的值來渲染組件并執(zhí)行組件的邏輯
2.模板(Template)
我們可以通過組件自帶的模板來定義組件的外觀,模板以html的形式存在,告訴Angular如何來渲染組件,一般來說,模板看起來很像html,但是我們可以在模板中使用Angular的數(shù)據(jù)綁定語法,來呈現(xiàn)控制器中的數(shù)據(jù)。
3.控制器(controller)
控制器就是一個普通的typescript類,他會被@Component來裝飾,控制器會包含組件所有的屬性和方法,絕大多數(shù)的業(yè)務(wù)邏輯都是寫在控制器里的??刂破魍ㄟ^數(shù)據(jù)綁定與模板來通訊,模板展現(xiàn)控制器的數(shù)據(jù),控制器處理模板上發(fā)生的事件。
裝飾器,模板和控制器是組件的必備要素。還有一些可選的元素,比如:
輸入屬性(@inputs):是用來接收外部傳入的數(shù)據(jù)的,Angular的程序結(jié)構(gòu)就是一個組件樹,輸入屬性允許在組件樹種傳遞數(shù)據(jù)
提供器(providers):這個是用來做依賴注入的
生命周期鉤子(LifeCycle Hooks):一個組件從創(chuàng)建到銷毀的過程中會有多個鉤子會被觸發(fā),類似于Android中的Activity的生命周期
樣式表:組件可以關(guān)聯(lián)一些樣式表
動畫(Animations): Angular提供了一個動畫包來幫助我們方便的創(chuàng)建一些跟組件相關(guān)的動畫效果,比如淡入淡出等
輸出屬性(@Outputs):用來定義一些其他組件可能需要的事件或者用來在組件之間共享數(shù)據(jù)
簡單來說,組件的中關(guān)系就如下圖所示
下面我們來看看模塊文件
app.module.ts:這個文件表示模塊
與AppComponent類似,模塊也需要裝飾器來裝飾。
好了,新項目的目錄結(jié)構(gòu)就是這樣!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- angular ngClick阻止冒泡使用默認行為的方法
- AngularJS基礎(chǔ) ng-click 指令示例代碼
- angular-cli修改端口號【angular2】
- AngularJS基礎(chǔ) ng-dblclick 指令用法
- 詳解Angular-Cli中引用第三方庫
- Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項目詳解
- angular ng-click防止重復(fù)提交實例
- Angular2使用Angular-CLI快速搭建工程(二)
- 詳解從angular-cli:1.0.0-beta.28.3升級到@angular/cli:1.0.0
- Angular2安裝angular-cli
相關(guān)文章
AngularJs bootstrap搭載前臺框架——js控制部分
本文主要介紹AngularJs bootstrap搭載前臺框架js控制部分的資料,這里有實現(xiàn)代碼,有興趣的小伙伴可以參考下2016-09-09AngularJS實現(xiàn)的輸入框字數(shù)限制提醒功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的輸入框字數(shù)限制提醒功能,涉及AngularJS事件監(jiān)聽與元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-10-10對angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對angularjs框架下controller間的傳值方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10angular內(nèi)置provider之$compileProvider詳解
下面小編就為大家?guī)硪黄猘ngular內(nèi)置provider之$compileProvider詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09Web開發(fā)使用Angular實現(xiàn)用戶密碼強度判別的方法
這篇文章主要介紹了Web開發(fā)使用Angular實現(xiàn)用戶密碼強度判別的方法,需要的朋友可以參考下2017-09-09