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

初试AngularJS前端框架

news 2026/5/18 22:12:30

文章目录

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

在这里插入图片描述

一、框架概述

  • 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

别再手动点选了！用Python脚本5分钟搞定Abaqus批量加载节点力（附完整代码）

Python自动化赋能Abaqus&#xff1a;高效批量加载节点力的工程实践 在有限元分析领域&#xff0c;Abaqus作为行业标杆软件&#xff0c;其强大的计算能力与灵活的二次开发接口深受工程师青睐。然而&#xff0c;当面对需要为数百甚至上千个节点分别施加不同载荷的复杂工况时&…...

编程新知 2026/5/18 21:45:53

ThinkPad风扇控制终极指南：TPFanCtrl2让你的笔记本既静音又凉爽

ThinkPad风扇控制终极指南&#xff1a;TPFanCtrl2让你的笔记本既静音又凉爽 【免费下载链接】TPFanCtrl2 ThinkPad Fan Control 2 (Dual Fan) for Windows 10 and 11 项目地址: https://gitcode.com/gh_mirrors/tp/TPFanCtrl2 你是否曾因ThinkPad风扇的突然轰鸣而分心&a…...

编程新知 2026/5/18 20:46:15

frp-panel：基于Web的图形化管理面板，让内网穿透配置更高效

1. 项目概述&#xff1a;一个为内网穿透工具打造的管理面板如果你用过 frp&#xff0c;大概率会和我有同样的感受&#xff1a;它的功能强大、性能稳定&#xff0c;是解决内网服务暴露、远程访问等问题的利器。但它的配置方式——编辑一个文本格式的.toml或.ini文件&#xff0c;…...

编程新知 2026/5/18 18:43:14

VMOS+小黄鸟无root抓包实战：从环境搭建到证书导入的完整避坑指南

1. 为什么需要VMOS小黄鸟组合抓包 很多安卓开发者或者安全爱好者都遇到过这样的困扰&#xff1a;想要分析某个APP的网络请求&#xff0c;却发现抓包工具显示"无网络连接"。这种情况在安卓7.0及以上版本尤为常见&#xff0c;主要是因为系统加强了SSL证书验证机制。传统…...

编程新知 2026/5/18 17:56:38

最新英语作文批改APP测评 适合学生党写作提分的实用指南

一、当前英语作文批改工具的共性痛点我们团队做了5年英语作文批改领域的内容产出&#xff0c;前后调研过近20款市面上的主流工具&#xff0c;发现行业内的共性痛点其实一直没得到很好的解决&#xff1a;对学生来说&#xff0c;多数工具只能改表层语法错误&#xff0c;不会结合写…...

编程新知 2026/5/18 17:29:40

3个简单步骤彻底解决GitHub下载龟速问题：Fast-GitHub插件完全指南

3个简单步骤彻底解决GitHub下载龟速问题&#xff1a;Fast-GitHub插件完全指南 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub 你是…...

编程新知 2026/5/18 15:26:44

Gemini3.1Pro数据分析报告自动化实战

用 Gemini 3.1 Pro 快速生成数据分析报告并自动可视化&#xff1a;端到端闭环&#xff08;生成—验证—反思—修正—回归&#xff09; 门控降级 4周MVP路线图要“快速生成数据分析报告并可视化”&#xff0c;真正难点不是生成文字&#xff0c;而是把报告做成可核验、可复用、可…...

编程新知 2026/5/18 14:34:16

保姆级教程：在NVIDIA TX1上搞定万集WLR-716激光雷达的ROS驱动与RVIZ可视化

保姆级教程&#xff1a;在NVIDIA TX1上搞定万集WLR-716激光雷达的ROS驱动与RVIZ可视化 当机器人开发者第一次拿到万集WLR-716激光雷达和NVIDIA Jetson TX1开发板时&#xff0c;最迫切的需求就是快速搭建测试环境&#xff0c;验证硬件功能。本文将提供一份从零开始的详细指南&am…...

编程新知 2026/5/18 14:30:14

S32K3 Autosar开发环境一站式部署指南

1. S32K3 Autosar开发环境概述 第一次接触S32K3 Autosar开发的朋友可能会被复杂的工具链吓到。其实只要理清思路&#xff0c;整个环境搭建就像组装乐高积木——每个组件都有明确的位置和功能。S32K3是NXP面向汽车电子的明星MCU&#xff0c;而Autosar则是汽车软件开发的行业标准…...

编程新知 2026/5/18 13:49:55

突破百度网盘下载限速：macOS逆向工程实践指南

突破百度网盘下载限速&#xff1a;macOS逆向工程实践指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 对于macOS用户而言&#xff0c;百度网盘的下载…...

编程新知 2026/5/18 13:47:43