AngularJS - 模块

你好，未来的程序员們！今天，我們將深入AngularJS模块的世界。如果你是编程新手，不必擔心；我會一步步引導你，就像我過去幾年來對無數學生所做的那樣。讓我們一起踏上這個令人興奮的旅程！

AngularJS - Modules

AngularJS 模块是什麼？

想像你正在建造一個巨大的樂高結構。你會一開始就嘗試一次性建造一切嗎？你可能會創造一些較小、容易管理的部件，然後再將它們組合起來。這正是AngularJS中模块的作用！

在AngularJS中，模块是應用程序不同部分的容器。它們幫助你組織代碼，使其更容易維護和理解。把它們想像成標籤整齊的盒子，你在其中存儲應用程序的不同功能。

應用程序模块

應用程序模块就像一個主盒子，裡面裝著所有其他盒子。這是你的AngularJS應用程序的起點。讓我們創建我們的第一個應用程序模块：

var myApp = angular.module('myApp', []);

這一行發生了什麼：

angular.module() 是一個創建新模块的函數。
'myApp' 是我們給我們的模块起的名字。
空數組 [] 是我們會列出模块可能有的任何依賴的地方（我們稍後會講到這個）。

控制器模块

現在我們有了主盒子（應用程序模块），讓我們在裡面添加一些較小的盒子。其中之一是控制器模块。在AngularJS中，控制器管理應用的數據。這是怎樣創建控制器的：

myApp.controller('MyController', function($scope) {
$scope.message = "Hello, AngularJS!";
});

讓我們分解一下：

myApp.controller() 為我們的 myApp 模块添加了一個新的控制器。
'MyController' 是我們給這個控制器起的名字。
函數定義了這個控制器的作用。
$scope 是一個特殊的對象，允許控制器與視圖（HTML）進行通信。

使用模块

現在我們已經創建了模块，我們如何真正使用它們呢？其實比你想像的要簡單！你只需在HTML中引用它們。這是怎麼做的：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

在這裡注意幾個關鍵點：

ng-app="myApp" 告訴AngularJS這裡是我們應用的所在地。
ng-controller="MyController" 將我們的控制器應用於body。
{{message}} 將顯示我們在控制器中定義的信息。

示例

讓我們用一個稍微複雜一點的例子把所有東西整合起來。我們將創建一個簡單的待辦事項列表應用程序：

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: '學習 AngularJS', done: false},
{text: '建造一個應用程序', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

這裡對應的HTML是：

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>待辦事項列表</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="添加一個新待辦事項">
<input type="submit" value="添加">
</form>
<script src="app.js"></script>
</body>
</html>

輸出

當你運行這段代碼時，你會看到一個簡單的待辦事項列表應用程序。你可以添加新的待辦事項並在完成時勾選它們。這個魔術通過我們的模块（在app.js中定義）與HTML之間的交互發生。

結論

這就是了！我們已經穿越了AngularJS模块的世界，從基本概念到一個運行的待辦事項列表應用程序。記住，模块就像樂高積木一樣 - 它們幫助你一塊塊地建造複雜結構。隨著你繼續你的AngularJS冒險，你會發現更多使用模块來創建有力量、高效的網頁應用程序的方法。

繼續練習，保持好奇心，最重要的是，編程要有趣！誰知道呢？下一個革命性的應用程序可能就在你的指尖！

方法	描述
angular.module()	創建一個新模块
module.controller()	為一個模块添加新的控制器
ng-app	指令用於自動引导一個AngularJS應用程序
ng-controller	指令用以指定一個控制器
ng-repeat	指令用於重複一組HTML元素
ng-model	指令用於將輸入绑定到一個變量
ng-submit	指令用於指定表單提交行為
ng-class	指令用於動態設置CSS類

Credits: Image by storyset