初试AngularJS前端框架

文章目录

一、框架概述
二、实例演示
三、实战小结

一、框架概述

AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架，用于构建单页应用（SPA）。它采用双向数据绑定和依赖注入，简化了 DOM 操作和前端逻辑。AngularJS 支持模块化开发，易于测试和维护。它提供了丰富的指令和过滤器，使得开发动态交互式网页变得简单。此外，AngularJS 还拥有一个庞大的社区和生态系统，为用户提供了丰富的资源和工具。

二、实例演示

（一）创建网页

创建文件 ：创建一个名为 angularjs_demo.html 的文件。

（二）编写代码

导入AngularJS脚本 ：在HTML文件的 <head> 部分导入AngularJS框架。
编写页面代码：

html 复制代码

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
    <meta charset="utf-8">
    <title>演示AngularJS</title>
    <!-- 导入AngularJS框架 -->
    <script src="https://cdn.bootcss.com/angular.js/1.8.2/angular.min.js"></script>  
    <style>
        body {
            text-align: center;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .login-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: auto;
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h3 {
            color: #333;
            margin-bottom: 20px;
        }
        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        label {
            margin-right: 10px;
        }
        input[type="text"],
        input[type="password"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            flex-grow: 1;
        }
        button {
            padding: 10px 20px;
            background-color: #5cb85c;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #4cae4c;
        }
        p {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="login-container" ng-controller="LoginController">
        <h3>用户登录</h3>
        <form ng-submit="login()">
            <div class="form-group">
                <label>账号：</label>
                <input type="text" ng-model="username">
            </div>
            <div class="form-group">
                <label>密码：</label>
                <input type="password" ng-model="password">
            </div>				
            <button type="submit">登录</button>
        </form>
        <p ng-if="errorMessage">{{errorMessage}}</p>
    </div>
    <script>
        // 创建AngularJS应用
        var app = angular.module('loginApp', []);
        // 创建AngularJS控制器
        app.controller('LoginController', function($scope) {
            $scope.login = function(event) {				
                event.preventDefault(); // 阻止表单的默认提交行为
                // 判断是否登录成功
                if ($scope.username == 'admin' && $scope.password == '123456') {
                    alert('恭喜，用户登录成功~');
                } else {
                    $scope.errorMessage = "用户名或密码错误，登录失败~";
                }
            };
        });
    </script>
</body>
</html>

（三）浏览网页

输入正确用户名和密码 ：在账号输入框中输入 admin，在密码输入框中输入 123456，然后单击【登录】按钮。
输入错误用户名或密码：在账号输入框中输入错误的用户名或密码，然后单击【登录】按钮。

（四）运行结果

正确输入：弹出提示框显示"恭喜，用户登录成功~"。
错误输入：显示错误消息"用户名或密码错误，登录失败~"。

三、实战小结

通过这个简单的示例，我们可以看到AngularJS如何简化前端开发，实现动态交互。AngularJS的双向数据绑定和依赖注入机制使得数据管理和页面更新变得非常简便。此外，AngularJS的模块化和控制器机制也使得代码更加易于维护和测试。

希望这个实战讲稿能帮助大家更好地理解和使用AngularJS。