简体中文

AngularJS 教程

AngularJS 应用

AngularJS - 记事本应用：构建你的第一个网页应用

你好，有抱负的程序员们！我很高兴能引导你们踏上使用AngularJS创建第一个网页应用的激动人心的旅程。作为一个教授编程超过十年的人，我可以向您保证，在本教程结束时，您将拥有一个功能性的记事本应用，并对AngularJS的基础知识有扎实的理解。那么，让我们开始吧！

AngularJS - Notepad Application

AngularJS是什么？

在开始编码之前，让我们先了解下AngularJS是什么。想象你正在建造一栋房子。AngularJS就像是提供结构和工具的框架，使你的建房过程更加容易和有条理。它是一个JavaScript框架，帮助我们用更少的努力创建动态网页应用。

设置开发环境

首先，我们需要设置我们的工作空间。别担心，这比设置一个真实的工作台要简单！

  1. 打开你最喜欢的文本编辑器（我推荐Visual Studio Code给初学者）。
  2. 创建一个名为"AngularJS-Notepad"的新文件夹。
  3. 在这个文件夹中，创建三个文件：
  • index.html
  • app.js
  • style.css

创建HTML结构

让我们从index.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 = '';
});

让我们分解一下：

  1. 我们创建了一个名为'notepadApp'的AngularJS模块。
  2. 我们定义了一个名为'NotepadController'的控制器。
  3. 在控制器内部，我们将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 应用程序