AngularJS面試題

親愛的讀者們，這些AngularJS面試題是專門為了讓您熟悉在AngularJS面試中可能遇到的問題型別而設計的。根據我的經驗，優秀的考官很少會在面試前計劃好要問哪些具體問題，通常問題會從該主題的一些基本概念開始，然後根據進一步的討論和您的回答繼續下去。

什麼是AngularJS？

AngularJS是一個用於構建大型且高效能Web應用程式的框架，同時保持其易於維護。以下是AngularJS框架的功能。

AngularJS是一個強大的基於JavaScript的開發框架，用於建立富網際網路應用程式(RIA)。
AngularJS為開發人員提供了以簡潔的MVC(模型-檢視-控制器)方式編寫客戶端應用程式(使用JavaScript)的選項。
用AngularJS編寫的應用程式是跨瀏覽器相容的。AngularJS自動處理適合每個瀏覽器的JavaScript程式碼。
AngularJS是開源的、完全免費的，並被全球數千名開發人員使用。它是在Apache許可證版本2.0下授權的。

什麼是AngularJS中的資料繫結？

資料繫結是模型和檢視元件之間資料的自動同步。ng-model指令用於資料繫結。

什麼是AngularJS中的作用域？

作用域是指向模型的物件。它們充當控制器和檢視之間的粘合劑。

AngularJS中的控制器是什麼？

控制器是繫結到特定作用域的JavaScript函式。它們是AngularJS框架中的主要參與者，並執行操作資料的函式，並決定要更新哪個檢視以顯示基於更新模型的資料。

AngularJS中的服務是什麼？

AngularJS附帶了一些內建服務。例如，$http服務用於進行XMLHttpRequests（Ajax呼叫）。服務是單例物件，在應用程式中只例項化一次。

AngularJS中的過濾器是什麼？

過濾器從陣列中選擇一個專案子集並返回一個新陣列。過濾器用於根據定義的條件顯示專案列表中的已篩選專案。

解釋AngularJS中的指令。

指令是DOM元素上的標記（例如元素、屬性、css等等）。這些可以用來建立自定義HTML標籤，作為新的自定義小部件。AngularJS有內建指令（ng-bind, ng-model, 等）來執行開發人員必須執行的大部分任務。

解釋AngularJS中的模板。

模板是使用控制器和模型中的資訊呈現的檢視。這些可以是一個單個檔案（如index.html），或者使用“partials”在一個頁面中包含多個檢視。

什麼是AngularJS中的路由？

這是切換檢視的概念。基於AngularJS的控制器根據業務邏輯決定要呈現哪個檢視。

什麼是AngularJS中的深度連結？

深度連結允許您將應用程式的狀態編碼到URL中，以便可以將其新增為書籤。然後，應用程式可以從URL恢復到相同的狀態。

AngularJS的優點是什麼？

以下是AngularJS的優點。

AngularJS提供了以非常簡潔且易於維護的方式建立單頁應用程式的能力。
AngularJS為HTML提供資料繫結能力，從而為使用者提供豐富且響應迅速的體驗。
AngularJS程式碼是單元可測試的。
AngularJS使用依賴注入並利用關注點分離。
AngularJS提供可重用的元件。
使用AngularJS，開發人員編寫更少的程式碼並獲得更多功能。
在AngularJS中，檢視是純HTML頁面，而用JavaScript編寫的控制器執行業務處理。
AngularJS應用程式可以在所有主要瀏覽器和智慧手機上執行，包括基於Android和iOS的手機/平板電腦。

AngularJS的缺點是什麼？

以下是AngularJS的缺點。

不安全 - 作為純JavaScript框架，用AngularJS編寫的應用程式是不安全的。必須進行伺服器端身份驗證和授權才能確保應用程式的安全。
不可降級 - 如果您的應用程式使用者停用了JavaScript，那麼使用者只會看到基本頁面，而不會看到更多內容。

AngularJS的核心指令有哪些？

以下是AngularJS的三個核心指令。

ng-app - 此指令定義並將AngularJS應用程式連結到HTML。
ng-model - 此指令將AngularJS應用程式資料的價值繫結到HTML輸入控制元件。
ng-bind - 此指令將AngularJS應用程式資料繫結到HTML標籤。

解釋AngularJS的啟動過程。

當頁面在瀏覽器中載入時，會發生以下情況

HTML文件載入到瀏覽器中，並由瀏覽器評估。AngularJS JavaScript檔案載入；建立angular *全域性*物件。接下來，執行註冊控制器函式的JavaScript。
接下來，AngularJS掃描HTML以查詢AngularJS應用程式和檢視。找到檢視後，它會將該檢視連線到相應的控制器函式。
接下來，AngularJS執行控制器函式。然後，它使用控制器填充的模型資料呈現檢視。頁面準備就緒。

什麼是MVC？

Model View Controller，簡稱MVC，是一種用於開發Web應用程式的軟體設計模式。模型-檢視-控制器模式由以下三個部分組成

模型 - 它是模式的最低級別，負責維護資料。
檢視 - 它負責向用戶顯示全部或部分資料。
控制器 - 它是控制模型和檢視之間互動的軟體程式碼。

解釋ng-app指令。

ng-app指令定義並將AngularJS應用程式連結到HTML。它還指示應用程式的開始。

解釋ng-model指令。

ng-model指令將AngularJS應用程式資料的價值繫結到HTML輸入控制元件。它建立一個模型變數，該變數可以與html頁面和包含ng-app指令的容器控制元件（例如，div）一起使用。

解釋ng-bind指令。

ng-bind指令將AngularJS應用程式資料繫結到HTML標籤。ng-model指令建立的模型會在使用者在控制元件中輸入內容或控制器更新模型資料時更新，以便在html標籤中顯示。

解釋ng-controller指令。

ng-controller指令告訴AngularJS使用哪個控制器與這個檢視一起使用。AngularJS應用程式主要依賴於控制器來控制應用程式中的資料流。控制器是一個包含屬性/特性和函式的JavaScript物件。每個控制器都接受$scope作為引數，該引數引用控制器要控制的應用程式/模組。

AngularJS如何與HTML整合？

AngularJS作為一個純基於javaScript的庫，可以輕鬆地與HTML整合。

步驟1 - 在html頁面中包含angularjs javascript庫

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

步驟2 - 指向AngularJS應用程式

接下來，我們告訴HTML的哪個部分包含AngularJS應用程式。這是透過將*ng-app*屬性新增到AngularJS應用程式的根HTML元素來完成的。您可以將其新增到*html*元素或*body*元素，如下所示

<body ng-app = "myapp">
</body>

解釋ng-init指令。

ng-init指令初始化AngularJS應用程式資料。它用於將值賦給要在應用程式中使用的變數。

解釋ng-repeat指令。

ng-repeat指令為集合中的每個專案重複html元素。

什麼是AngularJS表示式？

表示式用於將應用程式資料繫結到html。表示式寫在雙括號內，如{{ expression}}。表示式的行為方式與ng-bind指令相同。AngularJS應用程式表示式是純JavaScript表示式，並輸出它們使用的資料。

解釋大寫過濾器。

大寫過濾器將文字轉換為大寫文字。

在下面的示例中，我們使用管道字元向表示式添加了大寫過濾器。在這裡，我們添加了大寫過濾器以大寫字母列印學生姓名。

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

解釋小寫過濾器。

小寫過濾器將文字轉換為小寫文字。

在下面的示例中，我們使用管道字元向表示式添加了小寫過濾器。在這裡，我們添加了小寫過濾器以小寫字母列印學生姓名。

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

貨幣過濾器說明。

貨幣過濾器將文字格式化為貨幣格式。

在下面的示例中，我們使用管道字元 | 將貨幣過濾器新增到返回數字的表示式中。這裡我們添加了貨幣過濾器以使用貨幣格式列印費用。

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

過濾器過濾器說明。

過濾器過濾器用於根據提供的條件將陣列過濾為其子集。

在下面的示例中，為了僅顯示所需的科目，我們使用了 subjectName 作為過濾器。

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

orderby 過濾器說明。

orderby 過濾器根據提供的條件對陣列進行排序。

在下面的示例中，為了按分數對科目進行排序，我們使用了 orderBy marks。

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

ng-disabled 指令說明。

ng-disabled 指令停用給定的控制元件。

在下面的示例中，我們向 HTML 按鈕添加了 ng-disabled 屬性並向其傳遞了一個模型。然後，我們將模型附加到一個複選框，並可以看到變化。

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show 指令說明。

ng-show 指令顯示給定的控制元件。

在下面的示例中，我們向 HTML 按鈕添加了 ng-show 屬性並向其傳遞了一個模型。然後，我們將模型附加到一個複選框，並可以看到變化。

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

ng-hide 指令說明。

ng-hide 指令隱藏給定的控制元件。

在下面的示例中，我們向 HTML 按鈕添加了 ng-hide 屬性並向其傳遞了一個模型。然後，我們將模型附加到一個複選框，並可以看到變化。

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

ng-click 指令說明。

ng-click 指令表示 AngularJS 點選事件。

在下面的示例中，我們向 HTML 按鈕添加了 ng-click 屬性並添加了一個表示式來更新模型。然後我們可以看到變化。

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

angular.module 如何工作？

angular.module 用於建立 AngularJS 模組及其依賴模組。請考慮以下示例

var mainApp = angular.module("mainApp", []);

在這裡，我們使用 angular.module 函式聲明瞭一個應用程式 **mainApp** 模組。我們向其傳遞了一個空陣列。此陣列通常包含先前宣告的依賴模組。

如何在 AngularJS 中驗證資料？

AngularJS 增強了表單填寫和驗證。我們可以使用 $dirty 和 $invalid 標誌以無縫的方式進行驗證。在表單宣告中使用 novalidate 來停用任何瀏覽器特定的驗證。

以下內容可用於跟蹤錯誤。

**$dirty** - 表示值已更改。
**$invalid** - 表示輸入的值無效。
**$error** - 指出確切的錯誤。

ng-include 指令說明。

使用 AngularJS，我們可以使用 ng-include 指令在 HTML 頁面中嵌入 HTML 頁面。

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

如何使用 Angular JS 進行 ajax 呼叫？

AngularJS 提供了 $http 服務，該服務可用於向伺服器發出 ajax 呼叫以讀取資料。伺服器進行資料庫呼叫以獲取所需記錄。AngularJS 需要 JSON 格式的資料。一旦資料準備就緒，$http 可用於以如下方式從伺服器獲取資料

function studentController($scope,$https:) {
   var url = "data.txt";
   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

$routeProvider 在 AngularJS 中有什麼作用？

$routeProvider 是一個關鍵服務，它設定 url 的配置，將其對映到相應的 html 頁面或 ng-template，並附加一個具有相同名稱的控制器。

$rootScope 是什麼？

作用域是一個特殊的 JavaScript 物件，它充當控制器與檢視連線的橋樑。作用域包含模型資料。在控制器中，模型資料透過 $scope 物件訪問。$rootScope 是所有作用域變數的父級。

AngularJS 中的作用域層次結構是什麼？

作用域是特定於控制器的。如果我們定義巢狀控制器，則子控制器將繼承其父控制器的作用域。

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
	  
      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

以下是在上述示例中需要考慮的重要事項。

我們在 shapeController 中為模型設定了值。
我們在子控制器 circleController 中覆蓋了 message。當在 circleController 控制器模組中使用“message”時，將使用覆蓋的 message。

什麼是服務？

服務是 JavaScript 函式，僅負責執行特定任務。每個服務負責一項特定任務，例如，$http 用於進行 ajax 呼叫以獲取伺服器資料。$route 用於定義路由資訊，依此類推。內建服務總是以 $ 符號開頭。

什麼是服務方法？

使用服務方法，我們定義一個服務，然後向其分配方法。我們還向其注入了已有的服務。

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) { 
      return MathService.multiply(a,a); 
	}
});

什麼是工廠方法？

使用工廠方法，我們首先定義一個工廠，然後向其分配方法。

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {     
   var factory = {};  
		
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
});

服務方法和工廠方法有什麼區別？

工廠方法用於定義一個工廠，該工廠可以根據需要建立服務，而服務方法用於建立一個服務，其目的是執行某些已定義的任務。

哪些元件可以作為 AngularJS 中的依賴項注入？

AngularJS 提供了一種卓越的依賴注入機制。它提供以下核心元件，這些元件可以作為依賴項相互注入。

值
工廠
服務
提供程式
常量

什麼是提供程式？

提供程式由 AngularJS 在內部用於在配置階段（AngularJS 自舉自身的階段）建立服務、工廠等。下面提到的指令碼可用於建立我們之前建立的 MathService。提供程式是一種特殊的工廠方法，它具有一個 get() 方法，用於返回值/服務/工廠。

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
	
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
		
   });
});

什麼是常量？

常量用於在配置階段傳遞值，考慮到在配置階段不能使用值傳遞。

mainApp.constant("configParam", "constant value");

AngularJS 是否可擴充套件？

是的！在 AngularJS 中，我們可以建立自定義指令來擴充套件 AngularJS 的現有功能。

自定義指令用於在 AngularJS 中擴充套件 HTML 的功能。自定義指令使用“directive”函式定義。自定義指令只是替換啟用它的元素。AngularJS 應用程式在引導過程中查詢匹配的元素，並使用其自定義指令的 compile() 方法執行一次性活動，然後根據指令的作用域使用自定義指令的 link() 方法處理元素。

我們可以在哪種型別的元件上建立自定義指令？

AngularJS 支援為以下型別的元素建立自定義指令。

**元素指令** - 當遇到匹配的元素時，指令被啟用。
**屬性** - 當遇到匹配的屬性時，指令被啟用。
**CSS** - 當遇到匹配的 css 樣式時，指令被啟用。
**註釋** - 當遇到匹配的註釋時，指令被啟用。

什麼是國際化？

國際化是在網站上顯示特定於區域設定的資訊的一種方式。例如，在美國以英語顯示網站內容，在法國以丹麥語顯示。

如何在 AngularJS 中實現國際化？

AngularJS 支援三種類型的內建國際化過濾器：貨幣、日期和數字。我們只需要根據國家/地區的區域設定合併相應的 js。預設情況下，它處理瀏覽器的區域設定。例如，要使用丹麥語區域設定，請使用以下指令碼

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>

下一步是什麼？

接下來，您可以回顧一下您過去完成的科目作業，並確保您能夠自信地談論它們。如果您是應屆畢業生，面試官不會期望您回答非常複雜的問題，而是您必須使您的基礎概念非常紮實。

其次，如果您無法回答幾個問題，這實際上並不重要，重要的是，無論您回答了什麼，都必須充滿自信地回答。所以在面試中要有信心。我們在 tutorialspoint 祝您面試順利，並祝您未來的事業一切順利。乾杯 :-)

angularjs_questions_answers.htm

列印頁面