简单的用户信息展示页面

这是最基础的 AngularJS 应用，它展示了 AngularJS 的核心概念：数据绑定和指令。

angularjs 网站实例
（图片来源网络，侵删）

功能描述

在页面上显示一个用户的名字和年龄,并且当在输入框中修改信息时，页面上的显示会实时更新。

最终效果

代码实现

index.html

<!DOCTYPE html>
<html lang="en" ng-app> <!-- 1. ng-app 指令标记了 AngularJS 应用的根元素 -->
<head>
    <meta charset="UTF-8">AngularJS 简单实例</title>
    <!-- 引入 AngularJS 库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <h1>用户信息</h1>
    <!-- 2. ng-model 指令将输入框的值绑定到变量 user.name 和 user.age -->
    <p>
        姓名: <input type="text" ng-model="user.name" placeholder="输入你的名字">
    </p>
    <p>
        年龄: <input type="number" ng-model="user.age" placeholder="输入你的年龄">
    </p>
    <hr>
    <!-- 3. 使用 {{ }} (插值表达式) 将变量的值显示在页面上 -->
    <h2>你好, {{user.name || '访客'}}!</h2>
    <p>你的年龄是: {{user.age}} 岁。</p>
    <!-- 4. ng-init 指令用于初始化应用数据 (不推荐在生产环境中使用，这里仅为演示) -->
    <div ng-init="user = {name: '张三', age: 30}"></div>
</body>
</html>

代码解释

  1. ng-app:

    • 这是一个核心的 AngularJS 指令，它被放在 <html> 标签上，告诉浏览器这个页面是一个 AngularJS 应用，并自动启动（或 "bootstrap"）AngularJS。

  2. ng-model:

    angularjs 网站实例
    （图片来源网络，侵删）
    • 这是另一个核心指令,它用于将 HTML 元素（如输入框、选择框、文本域）的值双向绑定到应用中的一个变量上。
    • 在 ng-model="user.name" 中，我们创建了一个名为 user 的对象，并在其中创建了一个名为 name 的属性，输入框的值和 user.name 变量会互相影响。

  3. (插值表达式 / Interpolation):

    • 这是 AngularJS 的数据绑定语法，它告诉 AngularJS "将花括号内表达式的值显示在这里"。
    • 当 user.name 或 user.age 的值改变时（比如在输入框里输入内容）， 中的内容会自动更新，无需任何 JavaScript 代码。

  4. ng-init:

    • 这个指令用于在应用初始化时设置变量的初始值,虽然在这个例子中它工作正常，但在实际开发中，我们更推荐使用 Controller 来初始化数据，以保持数据和逻辑的分离。

带 Controller 的待办事项列表

这个实例将引入 Controller（控制器），这是 AngularJS 中组织业务逻辑的核心部分，我们还会学习 ng-repeat 指令来循环渲染列表。

功能描述

  • 显示一个待办事项列表。
  • 可以在输入框中添加新的待办事项。
  • 每个待办事项旁边都有一个删除按钮,可以删除该项。

最终效果

代码实现

index.html

angularjs 网站实例
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="en" ng-app="myTodoApp">
<head>
    <meta charset="UTF-8">AngularJS 待办事项</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 1. ng-controller 指令将 HTML 区域与一个 Controller 关联起来 -->
    <div ng-controller="TodoController as todoCtrl">
        <h1>我的待办事项</h1>
        <div class="input-group">
            <!-- 2. ng-model 绑定新任务的输入框 -->
            <input type="text" ng-model="todoCtrl.newTodo" placeholder="添加一个新任务..." ng-keypress="todoCtrl.addOnEnter($event)">
            <!-- 3. ng-click 绑定按钮的点击事件 -->
            <button ng-click="todoCtrl.addTodo()">添加</button>
        </div>
        <ul class="todo-list">
            <!-- 4. ng-repeat 指令遍历数组，为每个元素创建一个 <li> -->
            <li ng-repeat="todo in todoCtrl.todos">
                <span>{{ todo.text }}</span>
                <!-- 5. 点击删除按钮时，调用 Controller 中的方法，并传入当前项的索引 -->
                <button class="delete-btn" ng-click="todoCtrl.removeTodo($index)">删除</button>
            </li>
        </ul>
    </div>
    <!-- 引入我们编写的 JavaScript 文件 -->
    <script src="app.js"></script>
</body>
</html>

app.js (JavaScript 逻辑)

// 1. 创建一个名为 'myTodoApp' 的 AngularJS 模块
// 这与 html 中的 ng-app="myTodoApp" 对应
var myApp = angular.module('myTodoApp', []);
// 2. 定义一个 Controller，并注入 $scope 服务
// $scope 是 Controller 和 View 之间的桥梁
myApp.controller('TodoController', ['$scope', function($scope) {
    // "Controller as" 语法，将 Controller 实例命名为 todoCtrl
    // 这样可以在 View 中通过 todoCtrl 访问 Controller 中的属性和方法
    var vm = this; // vm (ViewModel) 是一个常见约定
    // 3. 初始化数据，这是 Controller 的职责
    vm.todos = [
        { text: '学习 AngularJS 基础' },
        { text: '完成项目实例' },
        { text: '部署到服务器' }
    ];
    vm.newTodo = '';
    // 4. 定义添加待办事项的方法
    vm.addTodo = function() {
        // 检查输入是否为空
        if (vm.newTodo.trim() !== '') {
            // 将新任务添加到 todos 数组中
            vm.todos.push({ text: vm.newTodo });
            // 清空输入框
            vm.newTodo = '';
        }
    };
    // 5. 定义删除待办事项的方法
    vm.removeTodo = function(index) {
        // 根据索引从数组中移除元素
        vm.todos.splice(index, 1);
    };
    // 6. 处理回车键按下的事件
    vm.addOnEnter = function(event) {
        if (event.which === 13) { // 13 是回车键的 keyCode
            vm.addTodo();
        }
    };
}]);

style.css (可选，用于美化)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
.input-group {
    margin-bottom: 20px;
}
.input-group input {
    padding: 8px;
    width: 70%;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.input-group button {
    padding: 8px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
.todo-list {
    list-style: none;
    padding: 0;
}
.todo-list li {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

代码解释

  1. 模块:

    • angular.module('myTodoApp', []) 创建了一个名为 myTodoApp 的模块，第一个参数是模块名，第二个参数是依赖数组（这里为空，表示没有外部依赖）。

  2. Controller:

    • myApp.controller(...) 定义