Angularjs-Hello
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) | { message }}/body /html/pre papp/main.js如下 /p pre class="brush:python;toolbar:false"var app = angular.module('helloApp', []); app.controller('HelloController', function($scope, $http) { $http.get("http://XXXXX:8081/hello") .then(function(resp) { $scope.message = resp.data; }); }); /pre p之后就是两个命令/p pre class="brush:python;toolbar:false"npm install npm start/pre p npm install会下载依赖，同时会塞很多东西到node_modules。/p p之后就是npm start。/p pre class="brush:python;toolbar:false"ubuntu@VM-8-10-ubuntu:~/web3$ npm start > angularjs-frontend@1.0.0 start > lite-server Did 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:3000 External: http://10.0.8.10:3000 ---------------------------------- UI: http://localhost:3001 UI 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
主页
这个表示跳转不由浏览器控制，由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: `
Upload
`,
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中使用。
支持以下扩展指令：
| 类型 | 示例 | 说明 |
|---|---|---|
| 元素指令 | 创建自定义 HTML 元素 | |
| 属性指令 | 扩展元素行为 | |
| 类名指令 | 通过 CSS 类触发 | |
| 注释指令 | 较少使用 |
常见内置指令：
| 指令 | 用途 |
|---|---|
| ng-model | 双向数据绑定 |
| ng-repeat | 循环渲染 |
| ng-show/ng-hide | 显示/隐藏元素 |
| ng-class | 动态 CSS 类 |
| ng-click | 点击事件处理 |
| ng-if | 条件渲染 |
| ng-switch | 多条件切换 |
| ng-include | 动态加载模板 |
3.3 双向数据绑定
index.html
AngularJS双向绑定示例
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;
}
AngularJS 双向数据绑定演示
1. 文本同步
实时显示: {{ userInput || "（暂无输入）" }}
字符数: {{ userInput.length }}
2. 复选框状态
我同意条款
当前状态:
{{ isAgreed ? "已同意" : "未同意" }}
3. 下拉选择
-- 选择水果 --
您选择的是: {{ selectedFruit }}
