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

Angularjs-Hello

article 2025/6/2 23:32:23

1 关于Angularjs

最近因为项目需要又要做这个，所以简单复习下。其实这个大概7，8年前就用过，当时做了几个简单页面觉得太简单就还是回去做嵌入式了。按照互联网技术的进化速度，本来以为早死在沙滩上了，没想到现在还在坚持。据说是google在后面支持，有这么强的亲爹，难怪能撑这么久。

之前用Angular是因为说的可以跨平台，也不知道现在还有没有。先还是对比一下现在流行的几个前端框架。

核心特性对比

框架	React (Meta)	Vue (尤雨溪)	Angular (Google)	Svelte (Rich Harris)
类型	库（需搭配生态）	渐进式框架	全功能企业级框架	编译时框架
语言	JavaScript/JSX	JavaScript/TypeScript	TypeScript	JavaScript/Svelte语法
数据流	单向（Props + State）	双向绑定（v-model）	双向绑定 + RxJS	响应式变量
DOM 更新	虚拟DOM Diff	虚拟DOM + 精确更新	变更检测（Zone.js）	编译为原生JS
学习曲线	中等	低	高	极低

对了，这里有两个版本。AngularJS（1.x）是旧版，Angular（2+）是全新框架，两者不兼容。

学习资料

AngularJS官方文档：AngularJS

AngularJS官方指南：AngularJS

AngularJS源码：GitHub - angular/angular.js: AngularJS - HTML enhanced for web apps!

=================================================

Angular官方文档： Angular

Angular快速手册：Angular

2 搭配Springboot的一个简单实现

SpringBoot简单体验（TODO）-CSDN博客

之前的SpringBoot是直接print，没法直接对接前端，所以现在要改成前后端的实现。

前后端的实现目前有两种，一种是完全集成到一起，还有一种是分开，只留API接口。貌似第二种更流行，所以也只看第二种。

+-------------------+ HTTP Requests +-------------------+
| | ------------------------------> | |
| AngularJS Front | (API Calls) | Spring Boot API |
| (Port: 3000) | <------------------------------ | (Port: 8081) |
| | JSON Responses | |
+-------------------+ +-------------------+

2.1 SpringBoot的改造

其实东西也不多。第一个是输出改成json。否则前端无法解析会报错。

angular.min.js:129 Error: [$http:baddata] http://errors.angularjs.org/1.8.3/$http/baddata?p0=Hello%20from%20Spring%20Boot!&p1=%7B%7Dat angular.min.js:7:168at wc (angular.min.js:101:482)at angular.min.js:102:399at r (angular.min.js:8:76)at Bd (angular.min.js:102:381)at f (angular.min.js:104:472)at angular.min.js:141:454at m.$digest (angular.min.js:153:67)at m.$apply (angular.min.js:156:484)at k (angular.min.js:107:445) 'Possibly unhandled rejection: {}'

还有一个就是跨域。之前听说了好几次，今天看了一下原来就是浏览器本身的一个安全限制。

协议（protocol）例如 http vs https
域名（host）例如 localhost vs example.com
端口（port）例如 3000 vs 8080

以上三个有一个不同，就算是跨域，要在代码中指定。

比如：

前端页面地址	请求的接口地址	是否跨域
http://localhost:3000	http://localhost:8080/api/data	✅ 跨域
http://example.com	https://example.com/api/data	✅ 跨域
http://localhost:8080	http://localhost:8080/api/data	❌ 同源

综合上面两点，将之前的hello函数改成这个即可。

    @CrossOrigin(origins = "*")@GetMapping("/hello")public Map<String, String> hello() {Map<String, String> response = new HashMap<>();response.put("message", "Hello from Spring Boot!");return response;}

2.2 AngularJS

前几天和前端的哥们配合，看了一下他们的操作，全是npm。好吧，我也这样玩。npm就是node.js的工具。要先安装一下。

至于代码，看了一下，核心就是index.html，app/main.js，package.json

package.json是用在npm环境中的，配置了就可以自动下载需要依赖的库。我这边的如下：

ubuntu@VM-8-10-ubuntu:~/web3$ cat package.json
{"name": "angularjs-frontend","version": "1.0.0","description": "AngularJS frontend example","main": "index.html","scripts": {"start": "lite-server"},"dependencies": {"angular": "^1.8.2"},"devDependencies": {"lite-server": "^2.6.1"}
}

index.html如下

<!DOCTYPE html>
<html ng-app="helloApp">
<head><meta charset="UTF-8"><title>AngularJS Frontend</title><script src="node_modules/angular/angular.min.js"></script><script src="app/main.js"></script>
</head>
<body ng-controller="HelloController"><h1>{{ message }}</h1>
</body>
</html>

app/main.js如下

var app = angular.module('helloApp', []);
app.controller('HelloController', function($scope, $http) {$http.get("http://XXXXX:8081/hello").then(function(resp) {$scope.message = resp.data;});
});

之后就是两个命令

npm install 
npm start

npm install会下载依赖，同时会塞很多东西到node_modules。

之后就是npm start。

ubuntu@VM-8-10-ubuntu:~/web3$ npm start> angularjs-frontend@1.0.0 start
> lite-serverDid not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{injectChanges: false,files: [ './**/*.{html,htm,css,js}' ],watchOptions: { ignored: 'node_modules' },server: { baseDir: './', middleware: [ [Function], [Function] ] }
}
[Browsersync] Access URLs:----------------------------------Local: http://localhost:3000External: http://10.0.8.10:3000----------------------------------UI: http://localhost:3001UI External: http://localhost:3001----------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
25.05.31 13:07:02 304 GET /index.html
25.05.31 13:07:02 304 GET /node_modules/angular/angular.min.js
25.05.31 13:07:02 304 GET /app/main.js
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

最后就很简单了。直接访问3000端口：http://XXX.XXX.99.181:3000/

3 高级特性

后面再玩点高级特性，先TODO。。。

3.1 前端路由

说实话，听到这个词有点诧异，因为我是做过路由器，路由这个词一般用在网络中。前端为什么会用到路由，查了一下，原来是单页应用（Single page web application）。其实本质就是将一些页面直接缓存到浏览器，需要的时候有前端控制调用，往后台只获取API接口数据。。。这样大大加快了速度。。。好吧，现在的浏览器确实玩的花。

场景	传统多页应用	单页应用（SPA）
页面切换	每次请求服务器获取完整 HTML	从缓存读取模板，仅 API 请求数据
模板存储	每次从服务器加载	首次加载时打包进 JS
用户体验	刷新页面，速度较慢	无刷新，快速切换

关键实现。

1 浏览器地址换成http://example.com/#!/home

<a href="#!/home">主页</a> <!-- 使用了 hashbang 模式 -->

这个表示跳转不由浏览器控制，由Angular控制。

2 路由函数？

就是处理发过来的#!/home，转成页面加载。第一次还是会发送异步请求去加载，后续就直接使用浏览器中的缓存。

app.config(function($routeProvider) {$routeProvider.when('/home', {templateUrl: 'views/home.html',controller: 'HomeCtrl'})...
});

3.2 指令（Directives）

自定义组件

app.directive('fileUploader', function() {return {restrict: 'E',scope: {onUpload: '&'},template: `<input type="file" /><button ng-click="upload()">Upload</button>`,link: function(scope, element) {var fileInput = element.find('input')[0];scope.upload = function() {var file = fileInput.files[0];if (file) {scope.onUpload({ file: file });}};}};
});

后面可以直接在html中使用。

<file-uploader on-upload="uploadFile(file)"></file-uploader>

支持以下扩展指令：

类型	示例	说明
元素指令	`<my-widget></my-widget>`	创建自定义 HTML 元素
属性指令	`<div my-attr></div>`	扩展元素行为
类名指令	`<div class="my-dir"></div>`	通过 CSS 类触发
注释指令	`<!-- directive: my-dir -->`	较少使用

常见内置指令：

指令	用途
ng-model	双向数据绑定
ng-repeat	循环渲染
ng-show/ng-hide	显示/隐藏元素
ng-class	动态 CSS 类
ng-click	点击事件处理
ng-if	条件渲染
ng-switch	多条件切换
ng-include	动态加载模板

3.3 双向数据绑定

index.html

<!DOCTYPE html>
<html ng-app="demoApp">
<head><meta charset="UTF-8"><title>AngularJS双向绑定示例</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script><style>body { font-family: Arial; padding: 20px; }.demo-box { border: 1px solid #ddd; padding: 20px; margin: 10px 0;border-radius: 5px;}input, select { padding: 8px; margin: 5px 0; width: 100%;box-sizing: border-box;}.output { background: #f0f8ff; padding: 10px; margin-top: 10px;}</style>
</head>
<body><h1>AngularJS 双向数据绑定演示</h1><div ng-controller="DemoController"><!-- 示例1: 文本输入绑定 --><div class="demo-box"><h3>1. 文本同步</h3><input type="text" ng-model="userInput" placeholder="输入任意内容"><div class="output"><p>实时显示: <strong>{{ userInput || "（暂无输入）" }}</strong></p><p>字符数: {{ userInput.length }}</p></div></div><!-- 示例2: 复选框绑定 --><div class="demo-box"><h3>2. 复选框状态</h3><label><input type="checkbox" ng-model="isAgreed"> 我同意条款</label><div class="output">当前状态: <span style="color: {{ isAgreed ? 'green' : 'red' }};">{{ isAgreed ? "已同意" : "未同意" }}</span></div></div><!-- 示例3: 下拉选择绑定 --><div class="demo-box"><h3>3. 下拉选择</h3><select ng-model="selectedFruit" ng-options="fruit for fruit in fruits"><option value="">-- 选择水果 --</option></select><div class="output" ng-if="selectedFruit">您选择的是: <strong>{{ selectedFruit }}</strong><img ng-src="images/{{ selectedFruit }}.png" alt="{{ selectedFruit }}" style="height: 50px; display: block; margin-top: 10px;"></div></div></div><script>angular.module('demoApp', []).controller('DemoController', function($scope) {// 初始化模型数据$scope.userInput = "";$scope.isAgreed = false;$scope.fruits = ['苹果', '香蕉', '橙子', '葡萄'];$scope.selectedFruit = "";});</script>
</body>
</html>

用的话还是很简单，就是一个ng-model。

作用就是用户在界面上改了，对应的程序变量也自动改了，不用手动去写赋值函数。而程序中的变量改了，自动在界面显示上改变。

3.4 依赖注入（DI）

// 自定义服务
app.service('MyLogger', function() {this.log = function(msg) {console.log("MyLogger:", msg);};
});// 控制器中使用
app.controller('MyCtrl', function($scope, MyLogger, $http) {MyLogger.log("控制器启动");$http.get('/api/data').then(function(response) {$scope.data = response.data;});
});

好像就是预制很多类或者说服务？直接逮来用就完事？

AngularJS 内部有一个 依赖容器（Injector），它做了两件事：

提前注册好了很多服务（比如 $http、$scope、$timeout 等）；

当你写控制器、服务、指令等组件时，只要声明需要什么，AngularJS 就自动传入这些依赖。

Angularjs-Hello

1 关于Angularjs 最近因为项目需要又要做这个，所以简单复习下。其实这个大概7，8年前就用过，当时做了几个简单页面觉得太简单就还是回去做嵌入式了。按照互联网技术的进化速度，本来以为早死在沙滩上了，没想到现在还在坚…...

编程日记 2025/6/2 23:32:23

Python训练营---Day41

DAY 41 简单CNN 知识回顾数据增强卷积神经网络定义的写法batch归一化：调整一个批次的分布，常用与图像数据特征图：只有卷积操作输出的才叫特征图调度器：直接修改基础学习率卷积操作常见流程如下： 1. 输入 → 卷积层 …...

编程日记 2025/6/2 14:25:58

Linux 1.0.4

父子shell linux研究的就是shell 打开两个窗口就是两个shell 终端的软件有很多 bash也是一个软件我们在terminal里面再打开一个bash，然后再次使用ps命令发现多出来一个bash，之后点击exit只是显示了一个exit，这个只是退出了在terminal中打开…...

编程日记 2025/6/2 14:16:10

Qt -下载Qt6与OpenCV

博客主页：【夜泉_ly】本文专栏：【暂无】欢迎点赞👍收藏⭐关注❤️ 前言呃啊，本来就想在 Qt 里简单几个 OpenVC 的函数，没想到一搞就是一天。我之前的开发环境是 Qt 5.14.2，使用 MinGW 7.3.0 64-bit 编…...

编程日记 2025/6/2 14:24:39

机器学习无监督学习sklearn实战一：K-Means 算法聚类对葡萄酒数据集进行聚类分析和可视化（主成分分析PCA特征降维）

本项目代码在个人github链接：https://github.com/KLWU07/Machine-learning-Project-practice/tree/main/1-Wine%20cluster%20analysis 如果对于聚类算法理论不理解可参考这篇之前文章机器学习中无监督学习方法的聚类：划分式聚类、层次聚类、密度聚类&…...

编程日记 2025/6/2 10:19:48

可灵2.1 vs Veo 3：AI视频生成谁更胜一筹？

在Google发布Veo 3几天后，可灵显然感受到了压力，发布了即将推出的视频模型系列可灵 2.1的早期体验版。据我了解，有三种不同的模式：可灵 2.1 标准模式： 720p分辨率仅支持图像转视频（生成更快，一致性更好） 5秒视频仍需20积分可灵 2.1 专业模式： 1080p分辨率仅在图…...

编程日记 2025/6/2 23:51:32

C语言之编译器集合

C语言有多种不同的编译器，以下是常见的编译工具及其特点： 一、主流C语言编译器 GCC（GNU Compiler Collection） 特点：开源、跨平台，支持多种语言（C、C、Fortran 等）。使用场景&…...

编程日记 2025/6/2 16:05:51

计量表计的演进历程与技术变革：从机械到物联网时代

前言近期在用python写一些关于计量表计数据集采模型。主要就是针对计量表计采集的相关数据，按照通讯协议格式进行解析，最后根据自己需求，编制界面进行数据的展示，存储，以及运算的内容。现在就个人关于计量表计的一点…...

编程日记 2025/6/2 18:40:50

更换Homebrew 源

以下是查看和修改 Homebrew 源的详细步骤，适用于需要切换到国内镜像以加速下载的场景： 1. 查看当前 Homebrew 源 # 查看 brew 主仓库地址 git -C "$(brew --repo)" remote get-url origin# 查看 homebrew-core 仓库地址 git -C "$(brew…...

编程日记 2025/6/2 19:55:42

人工智能在智能供应链中的创新应用与未来趋势

随着全球化的加速和市场竞争的加剧，供应链管理的复杂性和重要性日益凸显。传统的供应链管理面临着诸多挑战，如需求预测不准确、库存管理效率低下、物流配送延迟等。智能供应链通过引入人工智能（AI）、物联网（IoT&#x…...

编程日记 2025/6/2 9:29:56

鸿蒙OSUniApp自定义手势识别与操作控制实践#三方框架 #Uniapp

UniApp自定义手势识别与操作控制实践引言在移动应用开发中，手势交互已经成为提升用户体验的重要组成部分。本文将深入探讨如何在UniApp框架中实现自定义手势识别与操作控制，通过实际案例帮助开发者掌握这一关键技术。我们将以一个图片查看器为例&…...

编程日记 2025/6/2 10:46:34

LLM优化技术——Paged Attention

在Transformer decoding的过程中，需要存储过去tokens的所有Keys和Values，以完成self attention的计算，称之为KV cache。 （1）KV cache的大小可以计算存储KV cache所需的内存大小： batch * layers * kv-he…...

编程日记 2025/6/2 17:40:43

采用Bright Data+n8n+AI打造自动化新闻助手：每天5分钟实现内容日更

一、引言在信息爆炸的时代，作为科技领域的内容创作者，我每天都要花费2-3小时手动收集行业新闻、撰写摘要并发布到各个社群。直到我发现Bright Datan8nAI这套"黄金组合"，才真正实现了从"人工搬运"到"智能自动化&qu…...

编程日记 2025/6/2 23:07:14

Real SQL Programming

目录 SQL in Real Programs Options Stored Procedures Advantages of Stored Procedures Parameters in PSM SQL in Real Programs We have seen only how SQL is used at the generic query interface --- an environment where we sit at a terminal and ask queries …...

编程日记 2025/6/2 22:16:27