Spring Boot 商城项目
angularJS Demo1
<html> <head> <title>angularJS Demo1</title> <script src="angular.min.js"></script> </head> <body ng-app> {{100+200}} </body> </html>
Demo2
<html> <head> <title>angularJS Demo1</title> <script src="angular.min.js"></script> </head> <body ng-app> 请输入姓名:<input ng-model="name"> <br> {{name}}你好 </body> </html>
Demo3
<html> <head> <title>angularJS Demo1</title> <script src="angular.min.js"></script> </head> <body ng-app ng-init="name='克里斯'"> 请输入姓名:<input ng-model="name"> <br> {{name}}你好 </body> </html>
Demo4
<html> <head> <title>angularJS Demo</title> <script src="angular.min.js"></script> <script> //建立模块 var app=angular.module("myApp",[]); //创建控制器 $scope就是控制层与视图层直接交换数据的桥梁 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"> 第一个数:<input ng-model="x"><br> 第二个数:<input ng-model="y"><br> <button ng-click="add()">计算</button> <br> 计算结果:{{z}} </body> </html>
Demo5
<html>
<head>
<title>angularJS Demo 7</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app=angular.module("myApp",[]);
//创建控制器 $scope就是控制层与视图层直接交换数据的桥梁
app.controller("myController",function($scope){
$scope.list=[
{name:'张三',math:100,yuwen:100},
{name:'李四',math:80,yuwen:90},
{name:'王五',math:70,yuwen:60}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.math}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>