MEAN.JS - 應用中的Angular元件

本章節，我們將嚮應用中新增Angular元件。它是一個Web前端JavaScript框架，允許使用模型-檢視-控制器(MVC)模式建立動態的單頁應用程式。在MEAN.JS 架構章節中，您已經瞭解了AngularJS如何處理客戶端請求並從資料庫獲取結果。

瞭解AngularJS

AngularJS是一個開源的Web應用程式框架，它使用HTML作為模板語言，並擴充套件HTML的語法以清晰地表達您的應用程式元件。AngularJS提供了一些基本功能，例如資料繫結、模型、檢視、控制器、服務等。有關AngularJS的更多資訊，請參考此連結。

您可以透過在頁面中新增Angular來使頁面成為一個Angular應用程式。只需使用一個外部JavaScript檔案即可新增它，該檔案可以下載，也可以直接引用CDN版本。

假設我們已下載檔案並透過以下方式將其本地新增到頁面中：

<script src="angular.min.js"></script>

現在，我們需要告訴Angular此頁面是一個Angular應用程式。因此，我們可以透過向<html>或<body>標籤新增一個屬性ng-app來實現，如下所示：

<html ng-app>
or
<body ng-app>

ng-app可以新增到頁面上的任何元素，但通常將其放在<html>或<body>標籤中，以便Angular可以在頁面內的任何位置工作。

要使用Angular應用程式，我們需要定義一個模組。在這裡，您可以分組與應用程式相關的元件、指令、服務等。模組名稱由HTML中的ng-app屬性引用。例如，我們將Angular應用程式模組名稱命名為myApp，並可以在<html>標籤中指定，如下所示：

<html ng-app="myApp">

我們可以使用以下語句在一個外部JavaScript檔案中建立應用程式的定義：

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

AngularJS應用程式依賴於控制器來控制應用程式中的資料流。控制器是使用ng-controller指令定義的。

例如，我們將使用ng-controller指令以及您要使用的控制器的名稱將控制器附加到body。在下面的程式碼行中，我們使用“myController”作為控制器的名稱。

<body ng-controller="myController">

您可以將控制器(myController)附加到Angular模組(myApp)，如下所示：

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

最好使用命名函式而不是匿名函式，以提高可讀性、可重用性和可測試性。在下面的程式碼中，我們使用新的命名函式“myController”來儲存控制器程式碼：

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

有關控制器的更多資訊，請參考此連結。

作用域是一個特殊的JavaScript物件，它將控制器與檢視連線起來，幷包含模型資料。在控制器中，模型資料是透過$scope物件訪問的。控制器函式採用$scope引數，該引數由Angular建立，它可以直接訪問模型。

以下程式碼片段指定如何更新控制器函式以接收$scope引數並設定預設值：

var myController = function($scope) {
   $scope.message = "Hello World...";
};

有關控制器的更多資訊，請參考此連結。在下一章中，我們將開始使用Angular建立單頁應用程式。

列印頁面