AngularJS 应用实例
AngularJS 是一个由 Google 开发的 JavaScript 框架，它允许开发者使用 HTML 作为模板语言来构建单页应用（SPA）。以下是一个简单的 AngularJS 应用实例，它演示了如何使用 AngularJS 来创建一个基本的待办事项列表（Todo List）。
1. 准备工作
在开始之前，确保你的开发环境中已经安装了 AngularJS。虽然 AngularJS 已经被 Angular（也称为 Angular 2+）所取代，但 AngularJS（也称为 Angular 1.x）仍然是一个广泛使用的框架，并且对于学习前端框架的基础概念非常有用。
2. 创建 HTML 文件
首先，创建一个名为 index.html 的文件，并添加以下代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> m.dgguasheng.com
<title>AngularJS Todo List</title>
<script src=";
</head>
<body ng-app="todoApp">
<div ng-controller="TodoController as todoCtrl">
<h1>Todo List</h1>
<form ng-submit="todoCtrl.addTodo()">
<input type="text" ng-model="todoCtrl.newTodo" placeholder="Add a new todo">
<button type="submit">Add</button>
展开全文
</form>
<ul>
<li ng-repeat="todo in todoCtrl.todos" ng-class="{completed: todo.completed}">
<input type="checkbox" ng-model="todo.completed"> {{ todo.text }}
</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
在这个 HTML 文件中，我们引入了 AngularJS 的库，并设置了一个名为 todoApp 的 AngularJS 应用。我们还在 div 元素上设置了一个控制器 TodoController，并使用 as 关键字将其别名设置为 todoCtrl。
3. 创建 AngularJS 应用和控制器
接下来，创建一个名为 app.js 的文件，并添加以下代码：
javascript
var todoApp = angular.module('todoApp', []);
todoApp.controller('TodoController', function() {
var vm = this;
vm.todos = [
{ text: 'Learn AngularJS', completed: false },
{ text: 'Build a Todo List', completed: false },
vm.newTodo = '';
vm.addTodo = function() {
if (vm.newTodo) {
vm.todos.push({ text: vm.newTodo, completed: false });
vm.newTodo = '';
在这个 JavaScript 文件中，我们定义了一个名为 todoApp 的 AngularJS 模块，并在其中创建了一个名为 TodoController 的控制器。在控制器中，我们定义了一个名为 todos 的数组来存储待办事项，以及一个名为 newTodo 的变量来存储新添加的待办事项。我们还定义了一个名为 addTodo 的方法，用于将新添加的待办事项添加到 todos 数组中。
4. 运行应用
现在，你可以将 index.html 和 app.js 文件放在同一个目录下，并在浏览器中打开 index.html 文件来运行应用。你应该会看到一个简单的待办事项列表，其中包含了两个预定义的待办事项。你可以在输入框中输入新的待办事项，然后点击“Add”按钮将其添加到列表中。你还可以点击每个待办事项旁边的复选框来标记它为已完成状态。
这个简单的待办事项列表应用演示了 AngularJS 的基本用法，包括数据绑定、控制器、表单处理和指令等概念。通过进一步学习和实践，你可以使用 AngularJS 构建更加复杂和功能丰富的单页应用。
评论