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

初试AngularJS前端框架

news 文章来源：https://blog.csdn.net/howard2005/article/details/142455017 2025/4/21 0:00:50

文章目录

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

在这里插入图片描述

一、框架概述

  • 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

【Vue】为什么 Vue 不使用 React 的分片更新？

第一&#xff0c;首先时间分片是为了解决 CPU 进行大量计算的问题&#xff0c;因为 React 本身架构的问题&#xff0c;在默认的情况下更新会进行很多的计算&#xff0c;就算使用 React 提供的性能优化 API&#xff0c;进行设置&#xff0c;也会因为开发者本身的问题&#xff0c…...

编程日记 2024/9/27 9:44:05

大学生科技竞赛系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;主办方管理&#xff0c;公告栏管理&#xff0c;竞赛分类管理&#xff0c;竞赛信息管理&#xff0c;报名信息管理&#xff0c;竞赛成绩管理 微信端账号功能包括&#xff1a;系统首…...

编程日记 2024/9/27 9:42:01

什么是聚集索引？

什么是聚集索引&#xff1f; 1、聚集索引的特点2、如何确定聚集索引3、性能优势 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 聚集索引是一种特殊的索引&#xff0c;它直接包含了表中的所有数据行。所以&#xff0c;通过聚集索引&#xf…...

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

Centos/fedora/openEuler 终端中文显示配置

注意&#xff1a;这里主要解决的是图形界面、远程登录界面的中文乱码问题 系统原生的终端&#xff08;如虚拟机系统显示的终端&#xff09;&#xff0c;由于使用的是十分原始的 TTY 终端&#xff0c;使用点阵字体进行显示&#xff0c;点阵字体不支持中文&#xff0c;因此无法显…...

编程日记 2024/9/27 9:35:54

使用kaggle命令下载数据集和模型

点击用户头像&#xff0c;点击Settings&#xff1a; 找到API&#xff0c;点击create new token&#xff0c;将自动下载kaggle.json&#xff1a; 在用户目录下创建.kaggle文件夹&#xff0c;并将下载的kaggle.json文件移动到该文件夹&#xff1a; cd ~ mv Downloads/kaggle.j…...

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

生信初学者教程（十一）：数据校正

介绍 批次效应在生物学数据分析中是一个普遍存在的问题，它指的是由于实验过程中非生物学因素（如样本处理时间、实验条件、测序平台等）的差异，导致实验结果中混入与研究目标不相关的变异。在比较对照组和实验组时，这些非生物学因素可能引入额外的噪声，影响对生物学问题真实…...

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

JS设计模式之桥接模式：搭建跨越维度的通路

引言 在软件开发中&#xff0c;我们经常遇到需要对不同的抽象类进行不同的实现的情况&#xff0c;而传统的对象嵌套并不是一个优雅且可扩展的解决方案&#xff0c;因此这正是桥接模式的用武之地。桥接模式通过将抽象与实现分离&#xff0c;使得它们可以独立变化&#xff0c;从…...

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

苹果电脑系统重磅更新——macOS Sequoia 15 系统 新功能一 览

有了 macoS Sequoia&#xff0c;你的工作效率将再次提升&#xff1a;快速调整桌面布局&#xff0c;一目了然地浏览网页重点&#xff0c;还可以通过无线镜像功能操控你的iPhone。 下面就来看看几项出色新功能&#xff0c;还有能够全面发挥这些功能的 App 和游戏。 macOS Sequo…...

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

DoppelGanger++：面向数据库重放的快速依赖关系图生成

doi&#xff1a;DoppelGanger: Towards Fast Dependency Graph Generation for Database Replay&#xff0c;点击前往 文章目录 1 简介2 架构概述3 依赖关系图3.1 符号和问题定义3.2 无 IT(k) 图3.3 无 OT 图表3.4 无 OTIT 图表3.5 无 IT[OT] 图表3.6 输出确定性保证 4 重复向后…...

编程日记 2024/9/27 9:29:46

Linux(含麒麟操作系统)如何实现多显示器屏幕采集录制

技术背景 在操作系统领域&#xff0c;很多核心技术掌握在国外企业手中。如果过度依赖国外技术&#xff0c;在国际形势变化、贸易摩擦等情况下&#xff0c;可能面临技术封锁和断供风险。开发国产操作系统可以降低这种风险&#xff0c;确保国家关键信息基础设施的稳定运行。在一…...

编程日记 2024/9/27 9:28:45