当前位置： 首页 > news >正文

初试AngularJS前端框架

news 2026/2/8 6:56:05

文章目录

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

在这里插入图片描述

一、框架概述

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

二、实例演示

（一）创建网页

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

（二）编写代码

  1. 导入AngularJS脚本：在HTML文件的 <head> 部分导入AngularJS框架。

  2. 编写页面代码：

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

（三）浏览网页

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

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

（四）运行结果

  • 正确输入：弹出提示框显示“恭喜，用户登录成功~”。

  • 错误输入：显示错误消息“用户名或密码错误，登录失败~”。

三、实战小结

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

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

相关文章：

初试AngularJS前端框架

文章目录 一、框架概述二、实例演示&#xff08;一&#xff09;创建网页&#xff08;二&#xff09;编写代码&#xff08;三&#xff09;浏览网页&#xff08;四&#xff09;运行结果 三、实战小结 一、框架概述 AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架&am…...

编程日记 2024/9/27 10:22:56

【学习笔记】手写 Tomcat 六

目录 一、线程池 1. 构建线程池的类 2. 创建任务 3. 执行任务 测试 二、URL编码 解决方案 测试 三、如何接收客户端发送的全部信息 解决方案 测试 四、作业 1. 了解工厂模式 2. 了解反射技术 一、线程池 昨天使用了数据库连接池&#xff0c;我们了解了连接池的优…...

编程日记 2024/9/27 10:20:54

打靶记录18——narak

靶机: https://download.vulnhub.com/ha/narak.ova 推荐使用 VM Ware 打开靶机 难度&#xff1a;中 目标&#xff1a;取得 root 权限 2 Flag 攻击方法&#xff1a; 主机发现端口扫描信息收集密码字典定制爆破密码Webdav 漏洞PUT 方法上传BF 语言解码MOTD 注入CVE-2021-3…...

编程日记 2024/9/27 10:17:50

LabVIEW编程能力如何能突飞猛进

要想让LabVIEW编程能力实现突飞猛进&#xff0c;需要采取系统化的学习方法&#xff0c;并结合实际项目进行不断的实践。以下是一些提高LabVIEW编程能力的关键策略&#xff1a; 1. 扎实掌握基础 LabVIEW的编程本质与其他编程语言不同&#xff0c;它是基于图形化的编程方式&…...

编程日记 2024/9/27 10:16:47

代码随想录算法训练营第四四天| 1143.最长公共子序列 1035.不相交的线 53. 最大子序和 392.判断子序列

今日任务 1143.最长公共子序列 1035.不相交的线 53. 最大子序和 392.判断子序列 1143.最长公共子序列 题目链接&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; class Solution {public int longestCommonSubsequence(String text1, String text2) {int[][] dp ne…...

编程日记 2024/9/27 10:15:46

2024.9.26 作业 +思维导图

一、作业 1、什么是虚函数&#xff1f;什么是纯虚函数 虚函数&#xff1a;函数前加关键字virtual&#xff0c;就定义为虚函数&#xff0c;虚函数能够被子类中相同函数名的函数重写 纯虚函数&#xff1a;把虚函数的函数体去掉然后加0&#xff1b;就能定义出一个纯虚函数。 2、基…...

编程日记 2024/9/27 10:13:43

WSL进阶体验：gnome-terminal启动指南与中文显示问题一网打尽

起因 我们都知道 wsl 启动后就死一个纯命令行终端&#xff0c;一直以来我都是使用纯命令行工具管理Linux的。今天看到网上有人在 wsl 中启动带图形界面的软件。没错&#xff0c;就是在wsl中启动带有图形界面的Linux软件。比如下面这个编辑器。 ​​ 出于好奇&#xff0c;我就…...

编程日记 2024/9/27 10:10:36

recoil和redux之间的选择

Recoil 和 Redux 是两个流行的 JavaScript 状态管理库&#xff0c;它们各自有不同的设计理念和使用场景。选择哪一个更好用&#xff0c;取决于你的具体需求、项目规模和个人偏好。 1. 设计理念 Redux 单向数据流&#xff1a;Redux 采用单向数据流模型&#xff0c;所有的状态变…...

编程日记 2024/9/27 10:09:35

无人机的作战指挥中心-地面站！

无人机与地面站的关系 指挥与控制&#xff1a;地面站是无人机系统的核心控制部分&#xff0c;负责对无人机进行远程指挥和控制。无人机根据地面站下达的任务自主完成飞行任务&#xff0c;并实时向地面站反馈飞行状态和任务执行情况。 任务规划与执行&#xff1a;地面站具备任…...

编程日记 2024/9/27 10:07:33

Vue 23进阶面试题：（第八天）

目录 29.vue2.0和vue3.0区别&#xff1f; 30.事件中心的原理 31.使用基于token的登录流程 32.防抖和节流 防抖&#xff08;debounce&#xff09; 节流&#xff08;throttle&#xff09; 29.vue2.0和vue3.0区别&#xff1f; 1.由选项API转变为组合API。 2.vue3将全局配置…...

编程日记 2024/9/27 10:06:31

Acwing 最小生成树

最小生成树 最小生成树:由n个节点&#xff0c;和n-1条边构成的无向图被称为G的一棵生成树&#xff0c;在G的所有生成树中&#xff0c;边的权值之和最小的生成树&#xff0c;被称为G的最小生成树。&#xff08;换句话说就是用最小的代价把n个点都连起来&#xff09; Prim 算法…...

编程日记 2024/9/27 10:03:27

VIM简要介绍

安装 大多数 Linux 发行版和 macOS 都预装了 VIM。如果没有&#xff0c;你可以通过包管理器安装&#xff1a; Ubuntu/Debian: sudo apt-get install vimFedora: sudo dnf install vimmacOS: brew install vim&#xff08;使用 Homebrew&#xff09;Windows: 可以从 VIM 官网下…...

编程日记 2024/9/27 10:01:24

.NET 6.0 使用log4net配置日志记录方法

1.包管理器引入相关包 2.添加Log4net文件夹和log4net.config配置文件(配置文件属性设为始终复制)。 3.替换 log4net.config的内容(3.1与3.2选择一个就好,只是创建日志文件有所区别) 3.1: <?xml version"1.0" encoding"utf-8"?> <configuration…...

编程日记 2024/9/27 10:00:23

Unity角色控制及Animator动画切换如走跑跳攻击

Unity角色控制及 Animator动画切换如走跑跳攻击 目录 Unity角色控制及 一、 概念 1、角色控制 1） CharacterController(角色控制器) 2） CapsuleCollider + Rigidbody（使用物理刚体控制） 2、角色动画-Animation、Animator 1） 旧版动画系统...

编程日记 2024/9/27 9:57:19

JSP+Servlet+Mybatis实现列表显示和批量删除等功能

前言 使用JSP回显用户列表&#xff0c;可以进行批量删除&#xff08;有删除确认步骤&#xff09;&#xff0c;和修改用户数据&#xff08;用户数据回显步骤&#xff09;使用servlet处理传递进来的请求参数&#xff0c;并调用dao处理数据并返回使用mybatis&#xff0c;书写dao层…...

编程日记 2024/9/27 9:56:18

Cannot read properties of undefined (reading ‘upgrade‘)

前端开发工具&#xff1a;VSCODE 报错信息&#xff1a; INFO Starting development server...10% building 2/2 modules 0 active ERROR TypeError: Cannot read properties of undefined (reading upgrade)TypeError: Cannot read properties of undefined (reading upgrade…...

编程日记 2024/9/27 9:53:15

javaJUC基础

JUC基础知识 多线程 管程 Monitor&#xff0c;也就是平时所说的锁。Monitor其实是一种同步机制&#xff0c;它的义务是保证&#xff08;同一时间&#xff09;只有一个线程可以访问被保护的数据和代码块&#xff0c;JVM中同步是基于进入和退出监视器&#xff08;Monitor管程对…...

编程日记 2024/9/27 9:52:14

std::distance 函数介绍

std::distance 是 C 标准库中的一个函数模板&#xff0c;用于计算两个迭代器之间的距离。它的主要作用是返回从第一个迭代器到第二个迭代器之间的元素数量。这个函数对于不同类型的迭代器&#xff08;如随机访问、双向、前向等&#xff09;都能有效工作。 函数原型 template …...

编程日记 2024/9/27 9:51:12

如何在Windows和Linux之间实现粘贴复制

第一步 sudo apt-get autorremove open-vm-tools第二步 sudo apt-get update第三步 sudo apt-get install open-vm-tools-desktop第四步 一直按Y&#xff0c;希望执行 Y第四步 重启 reboot然后可以实现粘贴复制。...

编程日记 2024/9/27 9:50:11

【第十七章：Sentosa_DSML社区版-机器学习之异常检测】

【第十七章&#xff1a;Sentosa_DSML社区版-机器学习之异常检测】 机器学习异常检测是检测数据集中的异常数据的算子&#xff0c;一种高效的异常检测算法。它和随机森林类似&#xff0c;但每次选择划分属性和划分点&#xff08;值&#xff09;时都是随机的&#xff0c;而不是根…...

编程日记 2024/9/27 9:49:10

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/2/7 20:40:53

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/2/2 2:49:11

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28