1. 在哪個目錄中弥咪，所有外部模塊和文件都存儲在Angular 4中？

Angular4將所有外部模塊和文件存儲在node_modules目錄中纠吴。

2. 如何在Angular 4中包含外部CSS硬鞍？

要在Angular 4中包含外部CSS，請打開.angular-cli.json并在styles數(shù)組中添加css文件路徑呜象。

3. Angular中的路由是什么膳凝？

當(dāng)想要瀏覽應(yīng)用程序的不同頁面但還希望應(yīng)用程序是單頁面應(yīng)用程序時碑隆，可以使用ngRoute模塊恭陡。

此ngRoute模塊可瀏覽應(yīng)用程序的不同頁面，而無需重新加載整個應(yīng)用程序上煤。 應(yīng)包含角度js路由模塊休玩，以使您的應(yīng)用程序?yàn)槁酚勺龊脺?zhǔn)備。

ngRoute作為應(yīng)用程序中的依賴項(xiàng)添加劫狠。 路由引擎捕獲用戶請求的特定URL拴疤，并根據(jù)定義的路由規(guī)則呈現(xiàn)視圖。

4. Angular4中的組件裝飾器是什么独泞？

在開發(fā)版本2及更高版本的角度框架時呐矾，裝飾器是核心概念。 它很快就會成為JavaScript的核心語言功能懦砂。 在Angular4中蜒犯，裝飾器被廣泛使用并且還用于編譯代碼组橄。有4種不同類型的裝飾器：

類裝飾器屬性裝飾器方法裝飾器參數(shù)裝飾器

裝飾器是一個使用前綴@符號調(diào)用的函數(shù)，后面緊跟一個類罚随，參數(shù)玉工，方法或?qū)傩浴?裝飾器返回相同的東西，它作為輸入給出淘菩，但是以增強(qiáng)的形式

5. 編寫CLI命令以在Angular4中生成組件遵班。

組件只是簡單的類，在組件裝飾器的幫助下聲明為組件潮改。在Angular CLI命令的幫助下狭郑，創(chuàng)建已經(jīng)可以工作的應(yīng)用程序變得很容易。 “Ng generate”用于生成組件进陡，路由愿阐，服務(wù)和管道。 借助此CLI命令還可以創(chuàng)建簡單的測試shell趾疚。 要在CLI命令的幫助下生成angular4中的組件缨历，需要遵循以下語法 - ng generate component component_name;它生成組件并將組件添加到模塊聲明中

6. angular4的組件目錄結(jié)構(gòu)是什么樣的？

以下是angular4組件目錄結(jié)構(gòu)和模塊中存在的元素 - module.ts - 在此糙麦，聲明了angular模塊辛孵。 使用@NgModule裝飾器初始化angular應(yīng)用程序的不同方面。AppComponent也在其中聲明赡磅。components.ts - 它只是以angular定義組件魄缚，這也是定義app-root扇區(qū)的地方。 title屬性也在組件中聲明焚廊。component.html-它是應(yīng)用程序的模板文件冶匹，代表組件的可視部分。

7. 請使用一個例子解釋說明ngFor指令咆瘟。

ngFor指令為給定迭代器的每個元素實(shí)例化一個模板嚼隘。 ngFor指令的不同局部變量可用于迭代。 ngFor指令甚至可以與HTML元素一起使用袒餐。 它還在DOM中執(zhí)行各種更改飞蛹。 在ngFor指令的幫助下，可以將多個導(dǎo)出值別名化為局部變量灸眼。 它允許在HTML模板中構(gòu)建數(shù)據(jù)表示列表和表卧檐。 以下是借助HTML的ngFor指令示例：({hero.name})

8. 請解釋angular中的屬性綁定或單向綁定。

基本上焰宣，屬性綁定意味著從組件類傳遞數(shù)據(jù)并在視圖中設(shè)置給定元素的值霉囚。 它是一種單向綁定，其中數(shù)據(jù)從組件傳遞到類匕积。 它允許控制從組件到類的元素屬性值盈罐。 angular 的屬性綁定可以通過三種方式進(jìn)行：只要定義的值是字符串逻澳，插值就可以用來定義一個值。圍繞element屬性包裝括號并將其綁定到component屬性是最常見的屬性綁定類型暖呕。第三種方法是在element屬性之前添加bind斜做。

9. 請使用一個例子解釋說明ngif指令。

ngIf是一個內(nèi)置的模板指令湾揽，用于添加或刪除DOM的某些部分瓤逼。 此添加或刪除取決于表達(dá)式是true還是false。

如果表達(dá)式計(jì)算為false库物，則ngIf指令將刪除HTML元素霸旗。如果表達(dá)式被評估為true，則該元素將添加到DOM中戚揭。

語法：

*ngIf=”<condition>”

Js

示例：

<ul *ngFor="let person of people"*ngIf="person.age < 30"><li>{{person.name}}</li></ul>

10. 寫出在angular中指令和組件之間的區(qū)別诱告。

在angular中，元數(shù)據(jù)注釋之間存在區(qū)別民晒。 一些區(qū)別如下：指令用于向現(xiàn)有元素添加行為精居。 而組件用于創(chuàng)建具有附加行為的組件。@directive用于創(chuàng)建指令潜必。 而@component用于創(chuàng)建組件靴姿。指令用于將不同的行為附加到現(xiàn)有DOM元素。在組件的幫助下磁滚，可以將應(yīng)用程序分解為更小的組件铺韧。指令用于創(chuàng)建可重用行為趁矾。 然而，組件用于創(chuàng)建可重用組件督勺。指令不需要視圖格粪。然而魄宏，組件需要通過@view查看

11. 你對隔離單元測試有什么了解悉罕？

顧名思義笼平，單元測試就是測試各個代碼單元。 為了回答一些問題仪芒，隔離被測代碼單元非常重要唁影。 當(dāng)我們使用隔離單元測試時耕陷，我們不會被迫創(chuàng)建相關(guān)的部分掂名，如DOM元素進(jìn)行排序。 借助隔離的單元測試哟沫，實(shí)現(xiàn)一切變得更加容易饺蔑。 為了模擬請求，還提供了依賴注入嗜诀。 可以單獨(dú)測試單個排序功能猾警。 而且不僅是排序功能孔祸，任何功能都可以單獨(dú)測試

12. 在angular中你對服務(wù)有什么了解？

angular中的服務(wù)用于組織和共享應(yīng)用程序中的代碼发皿。 這些是在依賴注入的幫助下連接在一起的合適對象崔慧。 angular服務(wù)被懶惰地實(shí)例化。 僅當(dāng)應(yīng)用程序組件依賴于它時穴墅，該服務(wù)才由angular實(shí)例化惶室。 在angular中，可以制作新服務(wù)玄货，甚至可以在其他內(nèi)置服務(wù)中使用皇钞。 angular中存在30多種內(nèi)置服務(wù)

13.什么是Angular？

Angular是基于typescript編程語言的松捉，開源的網(wǎng)絡(luò)應(yīng)用開發(fā)框架夹界。是由谷歌倡導(dǎo)開發(fā)和維護(hù)的。它使用簡單隘世，功能強(qiáng)大可柿，可以快速搭建前端網(wǎng)絡(luò)應(yīng)用。它提供了很多非常優(yōu)秀的功能丙者，比如說聲明性的模板趾痘，依賴注入，端到端的工具蔓钟，等等可以為網(wǎng)絡(luò)應(yīng)用開發(fā)提供便利永票。

14、解釋Angular 2應(yīng)用程序的生命周期hooks是什么滥沫？

Angular 2組件/指令具有生命周期事件侣集，是由@angular/core管理的。@angular/core會創(chuàng)建組件兰绣，渲染它世分，創(chuàng)建并呈現(xiàn)它的后代。當(dāng)@angular/core的數(shù)據(jù)綁定屬性更改時缀辩，處理就會更改臭埋，在從DOM中刪除其模板之前，就會銷毀掉它臀玄。Angular提供了一組生命周期hooks（特殊事件）瓢阴，可以被分接到生命周期中，并在需要時執(zhí)行操作健无。構(gòu)造函數(shù)會在所有生命周期事件之前執(zhí)行荣恐。每個接口都有一個前綴為ng的hook方法。例如，ngOnint界面的OnInit方法叠穆，這個方法必須在組件中實(shí)現(xiàn)少漆。

15、事件發(fā)射器如何在Angular 2中工作的硼被？

Angular 2不具有雙向digest cycle示损，這是與Angular 1不同的。在Angular2中嚷硫，組件中發(fā)生的任何改變總是從當(dāng)前組件傳播到其所有子組件中屎媳。如果一個子組件的更改需要反映到其父組件的層次結(jié)構(gòu)中，我們可以通過使用事件發(fā)射器api來發(fā)出事件论巍。簡而言之烛谊，EventEmitter是在@ angular/core模塊中定義的類，由組件和指令使用嘉汰，用來發(fā)出自定義事件丹禀。

16、如何優(yōu)化Angular 2應(yīng)用程序來獲得更好的性能鞋怀？

優(yōu)化取決于應(yīng)用程序的類型和大小以及許多其他因素双泪。一般來說，在優(yōu)化Angular 2應(yīng)用程序時要考慮以下幾點(diǎn)：

1）考慮AOT編譯密似。

2）確保應(yīng)用程序已經(jīng)經(jīng)過了捆綁焙矛，uglify和tree shaking。

3）確保應(yīng)用程序不存在不必要的import語句残腌。

4）確保應(yīng)用中已經(jīng)移除了不使用的第三方庫村斟。

5）所有dependencies 和dev-dependencies都是明確分離的。

6）如果應(yīng)用程序較大時抛猫，我會考慮延遲加載而不是完全捆綁的應(yīng)用程序蟆盹。

17、什么是Shadow DOM闺金？它如何幫助Angular 2更好地執(zhí)行逾滥？

Shadow DOM是HTML規(guī)范的一部分，它允許開發(fā)人員封裝自己的HTML標(biāo)記败匹，CSS樣式和JavaScript寨昙。Shadow DOM以及其它一些技術(shù)，使開發(fā)人員能夠像<audio>標(biāo)簽一樣構(gòu)建自己的一級標(biāo)簽掀亩，Web組件和API舔哪。總的來說归榕，這些新的標(biāo)簽和API被稱為Web組件尸红。Shadow DOM通過提供了更好的關(guān)注分離吱涉，通過其它的HTML DOM元素實(shí)現(xiàn)了更少的樣式與腳本的沖突刹泄。

因?yàn)閟hadow DOM本質(zhì)上是靜態(tài)的外里，同時也是開發(fā)人員無法訪問的，所以它是一個很好的候選對象特石。因?yàn)樗彺娴腄OM將在瀏覽器中呈現(xiàn)得更快盅蝗，并提供更好的性能。此外姆蘸，還可以相對很好地管理shadow DOM墩莫，同時檢測Angular 2應(yīng)用的改變，并且可以有效地管理視圖的重新繪制逞敷。

18狂秦、service怎么使用？

AngularJS中你可以創(chuàng)建自己的服務(wù)推捐，或使用內(nèi)建服務(wù)裂问。

使用Module的provider方法

使用Module的factory方法

使用Module的service方法

三種方法的比較

需要在config中進(jìn)行全局配置的話，只能選擇provider方法牛柒，factory和service是使用比較頻繁的創(chuàng)建服務(wù)的方法堪簿。

它們之間的唯一區(qū)別是：service方法用于注入的結(jié)果通常是new出來的對象，factory方法注入的結(jié)果通常是一系列的functions皮壁；

provider是創(chuàng)建服務(wù)最為復(fù)雜的方法椭更，除非你需要創(chuàng)建一個可以復(fù)用的代碼段并且需要進(jìn)行全局配置，才需要使用provider創(chuàng)建蛾魄；

所有具有特定性目的的對象都是通過factory方法去創(chuàng)建虑瀑。

19.Aangular中組件之間通信的方式

Props 父傳子

1.調(diào)用子組件,通過自定義屬性傳值

2.子組件內(nèi)部通過Input來接收屬性的值

子傳父

1.在父組件中定義一個有參數(shù)的方法

2.調(diào)用子組件時,綁定自定義事件和上一步方法

3.子組件內(nèi)部通過Output和EventEmitter來觸發(fā)事件并傳值.

22.Angualr的八大組成部分并簡單描述

答案:model是Angular開發(fā)中的基本單位,是一個容器,可以包含組件、指令滴须、管道等

Components是可被反復(fù)使用的帶有特定功能的視圖

Templates? 是經(jīng)過指令和管道缴川、組件等增強(qiáng)過的html

Bindings? ? 結(jié)合著事件綁定? 屬性綁定? 雙向數(shù)據(jù)綁定等擴(kuò)展html的功能

Directives分為結(jié)構(gòu)性和屬性型指令還有其他模塊中比如路由模塊中的指令等,主要是增強(qiáng)html.

Pipes? ? 可以對數(shù)據(jù)做一個篩選、過濾描馅、格式化從而得到目的數(shù)據(jù)

Service? 將組件把夸、應(yīng)用中的可共用的部分,比如數(shù)據(jù)或者方法等? 封裝成服務(wù)以方便服用

DependencyInjection? 依賴注入

23.Angular中常見的生命周期的鉤子函數(shù)?

ngOnChanges:當(dāng)Angular設(shè)置其接收當(dāng)前和上一個對象值的數(shù)據(jù)綁定屬性時響應(yīng)。

ngOnInit:在第一個ngOnChange觸發(fā)器之后,初始化組件/指令铭污。這是最常用的方法,用于從后端服務(wù)檢索模板的數(shù)據(jù)恋日。

ngDoCheck：檢測并在Angular上下文發(fā)生變化時執(zhí)行。每次更改檢測運(yùn)行時,會被調(diào)用嘹狞。

ngOnDestroy:在Angular銷毀指令/組件之前消除岂膳。取消訂閱可觀察的對象并脫離事件處理程序,以避免內(nèi)存泄漏。

組件特定的hooks:

ngAfterContentInit:組件內(nèi)容已初始化完成

ngAfterContentChecked:在Angular檢查投影到其視圖中的綁定的外部內(nèi)容之后磅网。

ngAfterViewInit:Angular創(chuàng)建組件的視圖后谈截。

ngAfterViewChecked：在Angular檢查組件視圖的綁定之后

24.Angular中路由的工作原理

Angular應(yīng)用程序具有路由器服務(wù)的單個實(shí)例,并且每當(dāng)URL改變時,相應(yīng)的路由就與路由配置數(shù)組進(jìn)行匹配。在成功匹配時,它會應(yīng)用重定向,此時路由器會構(gòu)建ActivatedRoute對象的樹,同時包含路由器的當(dāng)前狀態(tài)。

在重定向之前,路由器將通過運(yùn)行保護(hù)(CanActivate)來檢查是否允許新的狀態(tài)簸喂。Route Guard只是路由器運(yùn)行來檢查路由授權(quán)的接口方法毙死。保護(hù)運(yùn)行后,它將解析路由數(shù)據(jù)并通過將所需的組件實(shí)例化到<router-outlet></router-outlet>來激活路由器狀態(tài)。

25.解釋rjx在Angular中的使用場景

Rxjs是在微軟所提供的一種的異步處理數(shù)據(jù)的方式,在Angular中處理網(wǎng)絡(luò)通信時用到了喻鳄。

創(chuàng)建一個Observable并subsribe

比如:this.http.get('').subscribe((data)=>{ })