B2B2C-2 品牌管理-1-AngularJs
一、简介
2009年诞生的前端框架，后被google收购，版本更新中，有四大特性:
1.mvc模式:数据层-视图层-控制层
2.双向绑定
视图，数据双更新
ui视图<--------------------------->数据模型
3.依赖注入:同spring的思想是一致的
4.模块化设计:
高内聚低耦合，模块之内的东西是相关联的，但是模块之间少用关联依赖
二、入门demo
1.demo
e盘新建文件夹demo
将angular.min.js拷贝到其中，常见index.html文件，内容如下:
<html>
<head>
<title>angularjs 表达式</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
<body>
</html>
其中，<script src="angular.min.js"></script> 代表引入文件
<body ng-app> 代表可以将100+100表达式结果输出，
angularjs使用双大括号形式{{}}
点击index.html 页面显示200
2.双向绑定
index-2.html内容如下:
<html>
<head>
<title>angularjs -2双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入姓名:<input ng-model="name"/>
{{name}}
<body>
</html>
双向绑定
3.初始化指令
index-3.html
<html>
<head>
<title>angularjs -3初始化指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="name='张三'">
请输入姓名:<input ng-model="name"/>
{{name}}
<body>
</html>
在运行的时候姓名:张三就显示到页面上
4.引入控制器:
例题:两个数相加:
<html>
<head>
<title>angularjs -4控制器</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.add = function() {
return parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一个整数: <input ng-model="x"><br>
第二个整数: <input ng-model="y"><br>
<br>
和: {{add()}}
<body>
</html>
5.事件指令
<html>
<head>
<title>angularjs -4控制器</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.add = function() {
$scope.z = parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
number1: <input ng-model="x"><br>
number2: <input ng-model="y"><br>
<br>
<button ng-click="add()">运算</button>
运算结果:{{z}}
<body>
</html>
6.循环
6.1循环数组
<html>
<head>
<title>angularjs -6循环</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.list = [1,2,3,4];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="value in list">
<td>{{value}}</td>
</tr>
</table>
<body>
</html>
6.2循环对象数组
<html>
<head>
<title>angularjs -7循环</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.list = [
{name:'张三',age:20,score:98},
{name:'李四',age:20,score:99},
{name:'王五',age:20,score:97}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>成绩</td>
</tr>
<tr ng-repeat="value in list">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>{{value.score}}</td>
</tr>
</table>
<body>
</html>
7.内置服务
意思是变量的获取通过后台数据库，也就是和后台进行交互的方式，为了简单，本例中定义data.json，内容相当于是从后台获得，
data.json中的内容如下:
[
{"name":"张三","age":20,"score":98},
{"name":"李四","age":20,"score":99},
{"name":"王五","age":20,"score":97}
]
index-8.html中的内容是
<html>
<head>
<title>angularjs -8内置服务</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope,$http) {
//实际是从后端获取的
$scope.findList=function(){
$http.get("data.json").success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>成绩</td>
</tr>
<tr ng-repeat="value in list">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>{{value.score}}</td>
</tr>
</table>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理