Spring Boot 商城項目html
angularJS Demo1app
<html> <head> <title>angularJS Demo1</title> <script src="angular.min.js"></script> </head> <body ng-app> {{100+200}} </body> </html>
Demo2spa
<html> <head> <title>angularJS Demo1</title> <script src="angular.min.js"></script> </head> <body ng-app> 請輸入姓名:<input ng-model="name"> <br> {{name}}你好 </body> </html>
Demo3code
<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>
Demo4htm
<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>
Demo5blog
<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>