以下是原文翻译成繁體中文的版本：

AngularJS - Notepad Application

# AngularJS - 雜記本應用程式：打造你的第一個網頁應用

你好，有志於成為程序員的你！我很興奮能夠引導你踏上使用AngularJS創建你的第一個網頁應用的令人興奮之旅。作為一個教導編程超過十年的老師，我可以向你保證，在這個教學結束時，你將會有一個功能完備的雜記本應用，並對AngularJS的基本知識有堅實的了解。那麼，我們來開始吧！

## 什麼是AngularJS？

在我們開始編程之前，讓我們了解一下AngularJS是什麼。想像你正在蓋一間房子。AngularJS就像是提供結構和工具的框架，讓你的蓋房子過程變得更容易、更有條理。它是一個JavaScript框架，幫助我們以更少的努力創建動態網頁應用。

## 設置開發環境

首先，我們需要設置我們的工作空間。別擔心，這比設置一個真正的工具台簡單多了！

1. 打開你喜歡的文本編輯器（我建議初學者使用Visual Studio Code）。
2. 創建一個名為"AngularJS-Notepad"的新文件夹。
3. 在這個文件夹中，創建三個文件：
   - index.html
   - app.js
   - style.css

## 創建HTML結構

讓我們從我們的`index.html`文件開始。這就像是我們房子的設計圖。

```html
<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
    <title>AngularJS 雜記本</title>
    <link rel="stylesheet" href="style.css">
    <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="NotepadController">
    <h1>我的雜記本</h1>
    <textarea ng-model="noteContent"></textarea>
    <p>字元數：{{noteContent.length}}</p>
</body>
</html>

讓我們分解一下：

ng-app="notepadApp"：這告訴AngularJS這是我們應用的根。
ng-controller="NotepadController"：這指定了哪個控制器應該管理這部分頁面。
ng-model="noteContent"：這將文本區域綁定到控制器中的一個名為noteContent的變量。
{{noteContent.length}}：這是一個表達式，顯示我們筆記的長度。

為我們的應用添加樣式

現在，讓我們添加一些基本的樣式，讓我們的雜記本看起來更漂亮。在你的style.css文件中，添加：

body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}

h1 {
    color: #333;
}

這段CSS將使我們的内容居中，設置一個漂亮的字體，並為我們的文本區域和標題添加樣式。

創建AngularJS應用

現在來到令人興奮的部分 - 我們讓我們的雜記本通過AngularJS活起來！在你的app.js文件中：

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

app.controller('NotepadController', function($scope) {
    $scope.noteContent = '';
});

讓我們分解一下：

我們創建了一個名為'notepadApp'的AngularJS模塊。
我們定義了一個名為'NotepadController'的控制器。
在控制器內部，我們將noteContent初始化為一個空字符串。

添加更多功能

現在我們有一個基本的雜記本，讓我們添加一些功能，使其更有用！

1. 儲存和加載功能

讓我們添加按鈕來儲存和加載我們的筆記。更新你的HTML：

<body ng-controller="NotepadController">
    <h1>我的雜記本</h1>
    <textarea ng-model="noteContent"></textarea>
    <p>字元數：{{noteContent.length}}</p>
    <button ng-click="saveNote()">儲存筆記</button>
    <button ng-click="loadNote()">加載筆記</button>
</body>

並更新你的app.js：

app.controller('NotepadController', function($scope) {
    $scope.noteContent = '';

    $scope.saveNote = function() {
        localStorage.setItem('savedNote', $scope.noteContent);
        alert('筆記已儲存！');
    };

    $scope.loadNote = function() {
        $scope.noteContent = localStorage.getItem('savedNote') || '';
        alert('筆記已加載！');
    };
});

在這裡，我們使用localStorage來儲存和加載我們的筆記。把它想像成一個小筆記本，你的瀏覽器可以在其中記下信息以備後用。

2. 詞數統計功能

讓我們添加一個詞數統計功能。更新你的HTML：

<p>字元數：{{noteContent.length}} | 詞數：{{wordCount()}}</p>

並在app.js的控制器中添加這個函數：

$scope.wordCount = function() {
    return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

這個函數將筆記內容按空格分割並計算非空元素，給我們提供詞數。

總結

這裡是一個表，總結了我們使用的主要AngularJS指令和表達式：

指令/表達式	用途
ng-app	定義AngularJS應用的根元素
ng-controller	指定用於HTML元素的控制器
ng-model	將HTML控件值綁定到應用數據
ng-click	指定當元素被點擊時評估的AngularJS表達式
{{expression}}	輸出表達式的值

恭喜你！你剛剛完成了你的第一個AngularJS應用。我們已經介紹了設置AngularJS應用的基礎，使用控制器，處理模型，甚至還有本地存儲數據。

記住，學習編程就像學習一門新語言。它需要練習、耐心和堅持。如果有些東西立刻不理解，不要氣餒 - 這都是學習過程的一部分。繼續實驗你的雜記本應用，嘗試添加新功能，最重要的是，玩得開心！

在我教學的年月裡，我見過無數學生從完全的初學者變成熟的開發者。現在，你也在同樣令人興奮的旅程上。繼續編程，持續學習，在你意識到之前，你將能夠輕鬆地構建複雜的網頁應用！

Credits: Image by storyset

上一教程:

AngularJS - 待辦事項應用

下一教程:

AngularJS - Bootstrap 應用程式