AngularJS - Includes：初學者指南

Hello, 未來的 AngularJS 開發者們！我很興奮能成為你們在 AngularJS includes 這個令人興奮領域中的引路人。作為一個教學超過十年的編程老師，我可以告訴你們，掌握 includes 將會讓你的生活變得更加輕鬆。那麼，我們來一起深入探討吧！

AngularJS - Includes

AngularJS Includes 是什麼？

在我們跳進代碼之前，讓我們先來了解一下 includes 是什麼。想像你正在蓋一個房子。你會從頭開始製造每一塊磚頭嗎？當然不會，你會使用預製的組件。这正是 AngularJS 中的 includes 所做的事情——它們允許你在你的應用程序中重用 HTML 片段。

為什麼使用 Includes？

可重用性：寫一次，使用多次！
可維護性：在一個地方更新，變更會反映到每個地方。
更乾淨的代碼：保持你的主要 HTML 檔案整潔。

如何使用 AngularJS Includes

讓我們從一個簡單的例子開始。想像你有一個網站，你想讓網站的 header 在每一頁上都出現。

示例 1：基本 Include

首先，創建一個名為 header.html 的檔案，並將你的 header 內容放入其中：

<!-- header.html -->
<div>
<h1>歡迎來到我傑出的網站</h1>
<nav>
<a href="#home">首頁</a>
<a href="#about">關於我們</a>
<a href="#contact">聯繫我們</a>
</nav>
</div>

現在，在你的主 HTML 檔案中，你可以使用 ng-include 指令來包含這個 header：

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-include="'header.html'"></div>

<!-- 頁面的其他內容 -->
</body>
</html>

當你運行這個代碼時，AngularJS 將會獲取 header.html 的內容，並將其插入到 ng-include 指令放置的位置。神奇吧？

示例 2：動態 Includes

如果你想要根據某些條件來改變包含的內容，該怎麼辦呢？AngularJS 為你提供了支持！

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div ng-include="templateUrl"></div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.templateUrl = 'header.html';

$scope.changeTemplate = function() {
$scope.templateUrl = 'footer.html';
};
});
</script>

<button ng-click="changeTemplate()">切換到 Footer</button>
</body>
</html>

在這個例子中，我們使用一個變量 templateUrl 來決定要包含哪個模板。點擊按鈕會將包含的內容從 header 切換到 footer。

高級技術

示例 3：向 Includes 傳遞數據

有時候，你可能想要向你的包含模板傳遞數據。以下是如何操作的：

<!-- greeting.html -->
<div>
<h2>Hello, {{name}}!</h2>
<p>Welcome to our {{type}} website.</p>
</div>

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div ng-include="'greeting.html'" ng-init="name='John'; type='awesome'"></div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
// 控制器邏輯在這裡
});
</script>
</body>
</html>

在這個例子中，我們使用 ng-init 向我們的包含模板傳遞數據。變量 name 和 type 將在 greeting.html 模板中可用。

最佳實踐

簡化：只包含必要的内容。
使用相對路徑：使你的代碼更具移動性。
緩存模板：對於大型應用程序，以獲得更好的性能。

常見陷坑及如何避免

忘記引號：總是將你的模板 URL 包裹在引號中。
循環包含：小心不要將一個模板包含在它自己內部。
過度使用 Includes：雖然很有用，但不要過度使用。太多的 includes 可能會使你的應用程序更難理解。

結論

AngularJS includes 是你網頁開發工具包中的一個強大工具。它們幫助你保持代碼的 DRY（Don't Repeat Yourself）並使你的應用程序更易於維護。記住，實踐使人完美，所以不要害怕在你的項目中嘗試不同的包含場景。

當我們結束時，我會想起一個學生曾經告訴我，“AngularJS includes 就像網頁的 LEGO 块！”而你知道嗎？他絕對是對的。所以，去用你的新 LEGO 块建造一些令人驚奇的事物吧！

祝大家編程愉快！

方法	描述
ng-include	用於包含外部 HTML 檔案的指令
ng-init	用於初始化應用程序數據的指令
$templateCache	用於緩存模板檔案以獲得更好性能的服務
$sce.trustAsResourceUrl()	用於標記 URL 為可信賴資源的方法

Credits: Image by storyset