Spring Boot 商城项目

Spring Boot 商城项目

angularJS Demo1

<html>
<head>
<title>angularJS Demo1</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{+}}
</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 </title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app=angular.module("myApp",[]);
//创建控制器 $scope就是控制层与视图层直接交换数据的桥梁
app.controller("myController",function($scope){
    $scope.list=[
        {name:'张三',math:,yuwen:},
        {name:'李四',math:,yuwen:},
        {name:'王五',math:,yuwen:}
    ];
});
</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>