1、路由跳转及script页面:
<html lang="en"> <head> <meta charset="UTF-8"> <title>月考练习</title> <script src="../js/angular1.4.6.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <style> * { margin: 0; padding: 0; } .title { width: 100%; height: 50px; background: gold; } .h1 { text-align: center; } .nav { width: 15%; height: 800px; background: aqua; float: left; } .nav li { line-height: 100px; text-align: center; list-style: none; } </style> <script> var app = angular.module("myApp", ["ngRoute"]);
路由切换
app.config(function ($routeProvider) { $routeProvider .when("/sy", {templateUrl: "ykShouye.html", controller: "syCrl"}) .when("/news", {templateUrl: "ykNews.html", controller: "newsController"}) .when("/select", {templateUrl: "ykChazhao.html", controller: "selectCrl"}) .when("/xc", {templateUrl: "ykXingcheng.html", controller: "xcCrl"}) .when("/game", {templateUrl: "ykGame.html", controller: "gameCrl"}) .otherwise({redirectTo: "/sy"}); })
猜数游戏
app.controller("gameCrl",function($scope){ $scope.check=function () { console.log($scope.random); $scope.differ=$scope.guess-$scope.random; $scope.guess="" $scope.num++; }; $scope.reset=function () { $scope.differ=null; $scope.guess=null; $scope.num=0; $scope.random=Math.ceil(Math.random()*10); }; $scope.reset(); })
添加数据
app.controller("xcCrl",function($scope){ $scope.xc=[ {xcz:"去吃饭"}, {xcz:"去吃饭"}, {xcz:"去吃饭"}, {xcz:"去吃饭"} ] $scope.add=function(){ var a=$scope.zxc; $scope.xc.push({xcz:a}) $scope.zxc="" } })
查找操作,跨域拦截问题没有解决,无法获取数据
app.controller("selectCrl", function ($scope, $http) { $scope.cz = function () { /*var url = "http://apicloud.mob.com/v1/weather/query?key=20d892115015a&city="+$scope.sea;*/ var url="http://v.juhe.cn/weather/index?cityname="+$scope.sea+"&key=6dd2f629e6e5ac36cc4949266a55fe24" $http({ url:url }).then(function (data){ $scope.caza = JSON.stringify(data); }) /*$http.get(url).success(function (data) { $scope.caza = data; /!* if (data.success) { $scope.caza = JSON.stringify(data) } else { $scope.caza = "false" }*!/ })/!*.error(function (data) { alert(JSON.stringify(data)) })*!/*/ } }) app.controller("syCrl", function ($scope, $http) { $http({ url: "package.json" }).then(function (data) { $scope.data = data.data; }) });
购物车相关操作
app.controller("newsController", function ($scope) { $scope.user = [ {checked: false, id: "1324", name: "ipad", price: "34.00", num: "10", item: "0"}, {checked: false, id: "4567", name: "aphone", price: "64.00", num: "100", item: "1"}, {checked: false, id: "3546", name: "mypad", price: "44.00", num: "20", item: "2"}, {checked: false, id: "1987", name: "zpad", price: "84.00", num: "120", item: "3"} ] $scope.allSum = function () { var allprice = 0; for (var i = 0; i < $scope.user.length; i++) { allprice += $scope.user[i].price * $scope.user[i].num; } return allprice; } $scope.allNum=function(){ var allnum=0; for(var i=0;i<$scope.user.length;i++){ allnum+=Number($scope.user[i].num); } return allnum; } $scope.nc = function (index) { if ($scope.user[index].checked == false) { alert("请选中后删除"); } else { if (confirm("确认删除")) { $scope.user.splice(index, 1) } } } $scope.qs = function () { for (var i = 0; i < $scope.user.length; i++) { if ($scope.user[i].checked == false) { alert("请选中后删除"); } else { if (confirm("确认全删")) { $scope.user = []; } } } } $scope.selectAllClick = function (sa) { for (var i = 0; i < $scope.user.length; i++) { $scope.user[i].checked = sa; } } $scope.echoChange = function (ck, index) { if (ck == false) { $scope.user[index].checked = true; } else { $scope.user[index].checked = false; } } $scope.togg = function (tit) { $scope.title = tit; $scope.desc = !$scope.desc; } }); </script> </head> <body ng-app="myApp"> <div class="title"> <h1 class="h1">标题</h1> </div> <div> <div class="nav"> <ul> <li><a href="#sy">首页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#select">查询</a></li> <li><a href="#xc">行程</a></li> <li><a href="#game">游戏(猜大小)</a></li> </ul> </div> <div ng-view style="float: right;width: 85%;height: 800px"> </div> </div> </body> </html>
2、首页,$http请求数据
<html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <style> ul{ list-style: none; line-height: 50px; } </style> </head> <body> <ul> <li ng-repeat="i in data"> <p>{{i.title}}</p> <img ng-src="{{i.img}}"> </li> </ul> </body> </html>
3、购物车页面,无法进行加减数据,可删除及排序,计价计数
<html lang="en"> <head> <meta charset="UTF-8"> <title>新闻页</title> <style> .d{ width:100%; height: 50px; background: gainsboro; } td{ background: white; } </style> </head> <div class="d"> <input type="text"style="float: left;line-height: 30px" ng-model="serch"> <button style="float: right;line-height: 30px" ng-click="qs()">批量删除</button> </div> <table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px"> <tr> <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td> <td ng-click="togg('id')">商品编号</td> <td ng-click="togg('name')">商品名称</td> <td ng-click="togg('price')">商品价格</td> <td ng-click="togg('num')">商品库存</td> <td>数据操作</td> </tr><!----> <tr ng-repeat="u in user|filter:serch|orderBy:title:desc"> <td><input type="checkbox" ng-checked="u.checked"ng-click="echoChange(u.checked,$index)"></td> <td>{{u.id}}</td> <td>{{u.name}}</td> <td>¥:{{u.price}}</td> <td>{{u.num}}</td> <td><button ng-click="nc($index)">删除</button></td> </tr> </table> 总价RMB ¥:<span ng-bind="allSum()"></span> 总数:<span ng-bind="allNum()"></span> </body> </html>
4、查询页面,因为跨域拦截问题无法获取接口数据
<html lang="en"> <head> <meta charset="UTF-8"> <title>查询页</title> </head> <body> <input ng-model="sea"> <button ng-click="cz()">查找</button> <p>展示:</p> <span ng-bind="caza"></span> </body> </html>5、行程,可进行添加遍历数据
<html lang="en"> <head> <meta charset="UTF-8"> <title>行程页</title> </head> <body> <input ng-model="zxc"> <button ng-click="add()">添加</button> <ul style="list-style: none"> <li ng-repeat="i in xc">{{i.xcz}}</li> </ul> </body> </html>6、游戏、进行猜数游戏
<html lang="en"> <head> <meta charset="UTF-8"> <title>游戏页</title> </head> <body> <h2>请输入一个1-10的整数</h2> <input type="text" ng-model="guess"><button ng-click="check()">检查</button><button ng-click="reset()">重置</button> <p ng-if="differ>0">猜大了</p> <p ng-if="differ<0">猜小了</p> <p ng-if="differ==0">猜对了</p> <p>一共猜了<span ng-bind="num"></span>次</p> </body> </html>