AngularJS - 登錄應用程序

你好，有抱負的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，使用AngularJS來創建一個登錄應用程序。作為你們友好的鄰居計算機科學老師，我將指導你們一步一步完成這個過程。別擔心你們對編程是新手——我們會從基礎開始，逐步學習。在本教程結束時，你們將擁有一個功能完備的登錄應用程序，並對AngularJS的概念有堅實的了解。那麼，讓我們開始吧！

AngularJS - Login Application

1. AngularJS的介紹

在我們開始編程之前，讓我們花一會兒時間來了解AngularJS是什麼。想像你正在蓋一個房子——AngularJS就像是你信任的工具箱，裡面裝滿了各種有用的工具來讓你的工作更輕鬆。它是一個JavaScript框架，幫助我們以更少的努力創建動態網頁應用程序。

1.1 為什麼選擇AngularJS？

AngularJS帶來了以下幾個好處：

兩向數據綁定
模塊化方法
依賴注入
擴展HTML的指令

這些特性現在可能聽起來像技術術語，但別擔心——我們將在建立我們的登錄應用程序時探索它們。

2. 建立我們的專案

2.1 創建HTML結構

讓我們從為我們的登錄應用程序創建一個基本的HTML文件開始。打開你喜歡的文本編輯器，創建一個名為index.html的新文件。這裡是初始結構：

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>AngularJS 登錄應用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="LoginController">
<h1>歡迎來到我們的登錄應用程序</h1>
<!-- 我們將在這裡添加我們的登錄表單 -->
</body>
</html>

在這個HTML中，我們從CDN引入了AngularJS庫並連接到我們的app.js文件（我們下一步將創建）。ng-app和ng-controller屬性是AngularJS指令，我們將稍後解釋。

2.2 創建AngularJS模塊和控制器

現在，讓我們在HTML文件同一目錄下創建我們的app.js文件：

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

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
// 我們稍後將實現這部分
};
});

在這裡，我們創建了一個名為loginApp的AngularJS模塊和一個名為LoginController的控制器。控制器有一個user對象，包含username和password屬性，以及一個我們稍後將實現的login函數。

3. 建立登錄表單

現在，我們有了基本的結構，讓我們在HTML中添加一個登錄表單：

<form ng-submit="login()">
<label for="username">用戶名：</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">密碼：</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">登錄</button>
</form>

這個表單使用了像ng-submit和ng-model這樣的AngularJS指令。ng-submit指令在表單提交時調用我們的login()函數，而ng-model則將輸入值綁定到控制器中的user對象。

4. 實現登錄函數

讓我們更新控制器中的login函數：

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = '歡迎，' + $scope.user.username + '！';
} else {
$scope.message = '無效的用戶名或密碼。';
}
};

這個函數檢查輸入的用戶名和密碼是否與我們硬编码的值匹配。在真實的應用程序中，你通常會將這些值與數據庫進行比較。

5. 顯示登錄結果

要在HTML中顯示登錄結果，添加以下內容：

<p>{{message}}</p>

兩個大括號{{}}是AngularJS將控制器中的數據顯示在視圖中的方式。

6. 添加一些樣式

讓我們通過一些CSS使應用程序看起來更漂亮。將以下內容添加到你的HTML文件中：

<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>

7. 完整的應用程序

這是我們完整的index.html文件：

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>AngularJS 登錄應用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>
</head>
<body ng-controller="LoginController">
<h1>歡迎來到我們的登錄應用程序</h1>
<form ng-submit="login()">
<label for="username">用戶名：</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">密碼：</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">登錄</button>
</form>
<p>{{message}}</p>
</body>
</html>

這是我們完整的app.js文件：

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

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = '歡迎，' + $scope.user.username + '！';
} else {
$scope.message = '無效的用戶名或密碼。';
}
};
});

8. 結論

恭喜你們！你們剛剛使用AngularJS建立了你的第一個登錄應用程序。我們覆蓋了很多內容，從設定AngularJS模塊和控制器到創建表單並使用兩向數據綁定，以及實現一個簡單的登錄函數。

記住，這只是AngularJS冰山一角。隨著你們繼續學習，你們將發現更多強大的功能，這些功能將幫助你們建立複雜的互動網頁應用程序。

這裡是一個我們使用的主要AngularJS概念的總結表：

概念	描述
模塊	應用程序不同部分的容器
控制器	管理應用程序數據和行為
指令	擴展HTML的自定義屬性和元素
兩向數據綁定	同步模型和視圖之間的數據
表達式	從範圍訪問變量和函數

持續練習，保持好奇心，並且快樂編程！

Credits: Image by storyset

上一教程:

AngularJS - Bootstrap 應用程式

下一教程:

AngularJS - 上傳檔案