初试AngularJS前端框架

news2024/9/24 7:55:34

文章目录

一、框架概述
二、实例演示
- （一）创建网页
- （二）编写代码
- （三）浏览网页
- （四）运行结果
三、实战小结

一、框架概述

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

二、实例演示

（一）创建网页

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

（二）编写代码

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

<!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>