路由界面的跳转(首页,新闻,天气,添加)

来源：互联网发布：本地连接虚拟机mysql 编辑：程序博客网时间：2024/06/04 22:01

/*主界面*/

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><style>    *{margin: 0;padding: 0}    .d1{width: 100%;height:582px;background-color: #00B7FF;}    .d2{width: 100%;height: 80px;background: papayawhip}    .ul li{        height: 60px;        border: 1px solid black;        line-height: 60px;        text-align: center;    }    .ul{        width: 120px;        float: left;        background-color: #FF0000;    }    li{        list-style: none;    }    a{        text-decoration: none;        color: black;    }    .content{        width: 70%;        float: left;    }    .h1{        text-align: center;        padding-top: 15px;    }</style>    <script src="angular1.4.6.min.js"></script>    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>    <script>        <!--路由跳转-->        var myapp=angular.module("myapp",["ngRoute"]);        myapp.config(function ($routeProvider) {            $routeProvider.when("/shouye",{                templateUrl:"pages/shouye.html",                controller:"shouyeCtrl"            }).when("/news",{                templateUrl:"pages/news.html",                controller:"newsCtrl"            }).when("/chaxun",{                templateUrl:"pages/chaxun.html",                controller:"chaxunCtrl"            }).when("/richeng",{                templateUrl:"pages/richeng.html",                controller:"richengCtrl"            }).otherwise({                redirectTo:"/shouye"            })        })        /*首页*/        myapp.controller("shouyeCtrl",function ($scope,$http) {            $http({                url:"package.json"            }).then(function (data) {                $scope.data=data.data;            })        });        /*新闻表格展示*/        myapp.controller("newsCtrl",function ($scope) {            $scope.items=[                {bianhao:1234,name:"ipad",price:3400,kucun:10,check:false},                {bianhao:345,name:"aphone",price:5600,kucun:100,check:false},                {bianhao:234,name:"biuf",price:4400,kucun:20,check:false},                {bianhao:564,name:"bohug",price:8400,kucun:130,check:false},            ]            $scope.orderName="bianhao";            $scope.order=false;            $scope.paixu=function (column) {                if($scope.orderName==column)                {                    $scope.order=!$scope.order;                }else{                    $scope.order=false;                }                $scope.orderName=column;            };//            小三角图标            $scope.getClass=function (column) {                if ($scope.orderName == column) {                    if ($scope.order == false) {                        return "top"                    } else {                        return "bot"                    }                }            }            $scope.shanchu=function (index) {/*删除单个*/                if(confirm("确定删除吗?"))                {                    $scope.items.splice(index,1);                }            }        });/*查询天气*/        myapp.controller("chaxunCtrl",function ($scope,$http) {            var u1="https://free-api.heweather.com/v5/weather?city="            var u2;            var u3="&key=545d63e185fc48169a43cbabba6e74d2";            $scope.city="beijing";            $scope.show=false;            $scope.search=function () {                u2=$scope.city;                $scope.show=true;                $http({                    url:u1+u2+u3                }).then(function (data) {                       $scope.cityName=data.data.HeWeather5[0].basic.city;                       $scope.date=data.data.HeWeather5[0].daily_forecast[0].date;                       $scope.temp=data.data.HeWeather5[0].daily_forecast[0].tmp.max;                    });                   $scope.city="";            };        })        /*添加行程*/        myapp.controller("richengCtrl",function ($scope) {            var data={                user:"李四",                items:[                    {action:"约刘诗诗吃饭",done:false},                    {action:"约刘诗诗跳舞",done:false},                    {action:"约刘诗诗敲代码",done:true},                    {action:"约刘诗诗爬长城",done:false},                    {action:"约刘诗诗逛天坛",done:false},                    {action:"约刘诗诗看电影",done:false},                ]            };            $scope.data=data;            $scope.complate=false;            $scope.count=function () {/*判断还有几件事没完成*/                var n=0;                for(var i=0;i<$scope.data.items.length;i++)                {                    if($scope.data.items[i].done==false)                    {                        n++;                    }                }                return n;            };            /*添加新的日程*/            $scope.add=function () {                if($scope.action)/*对$scope.action进行下一个非空判断*/                {                    /*如果输入了内容*之后，就在数组的最后加入一条新内容*/                    $scope.data.items.push({"action":$scope.action,"done":false});                    $scope.action="";/*添加完成之后，将input置空*/                }            }        })        /*自定义过滤器*/        myapp.filter("doFilter",function () {            return function (items,flag) {                var arr=[];                for(var i=0;i<items.length;i++)                {                    if(items[i].done==false)                    {                        arr.push(items[i]);                    }else{                        if(flag==true)                        {                            arr.push(items[i]);                        }                    }                }                return arr;            };        })    </script></head><body ng-app="myapp"><div class="d1">    <div class="d2">        <h1 class="h1">这是我的网站哟</h1>    </div>    <div class="nav">       <ul class="ul">           <li><a href="#shouye">首页</a></li>           <li><a href="#news">新闻</a></li>           <li><a href="#chaxun">查询</a></li>           <li><a href="#richeng">行程</a></li>           <li><a href="http://localhost:63342/untitled3/pages/youxi.html?_ijt=3cbo86o6rjgbb98j7evvovs773">游戏(猜大小)</a></li>       </ul>    <div class="content" ng-view="">    </div>    </div></div></body></html>

/*pages文件夹下的路由跳转网页*/

1.首页.html

<style>    .ul2 li{        float: left;        margin-left: 15px;    }</style><ul class="ul2">    <li ng-repeat="item in data">        <p>{{item.title}}</p>        <img ng-src="{{item.img}}">    </li></ul>
2.新闻.html
<style>    table{        border-collapse: collapse;        margin-top: 20px;    }    input{        margin-top: 10px;    }    th{        border: 1px solid black;        padding: 30px;    }    td{        border: 1px solid black;        padding: 30px;    }    .pi{        border: 1px solid red;        background: red;        color: white;    }    .shan{        background: orange;        border: 1px solid orange;        color: white;    }    .top{        display: inline-block;        width: 0;        height: 0;        border: 10px solid transparent;        border-top: 10px solid red;    }    .bot{        display: inline-block;        width: 0;        height: 0;        border: 10px solid transparent;        border-bottom: 10px solid red;    }</style><div style="margin-left: 30px">    <input type="text" placeholder="输入关键字.." ng-model="search">    <button class="pi" ng-click="delteAll()">批量删除</button>    <table>        <thead>            <tr>                <th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th>                <th ng-click="paixu('bianhao')" ng-class="getClass('bianhao')">商品编号</th>                <th ng-click="paixu('name')" ng-class="getClass('name')">商品名称</th>                <th ng-click="paixu('price')" ng-class="getClass('price')">商品价格</th>                <th ng-click="paixu('kucun')" ng-class="getClass('kucun')">商品库存</th>                <th>数据操作</th>            </tr>        </thead>        <tbody>            <tr ng-repeat="item in items|filter:search|orderBy:orderName:order">                <td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></td>                <td>{{item.bianhao}}</td>                <td>{{item.name}}</td>                <td>{{item.price|currency:"￥:"}}</td>                <td>{{item.kucun}}</td>                <td><button class="shan" ng-click="shanchu($index)">删除</button></td>            </tr>        </tbody>    </table></div>
3.天气查询.html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><input type="text" ng-model="city"><button ng-click="search()">点击查询</button><ul ng-show="show">    <li>{{cityName}}</li>    <li>{{date}}</li>    <li>{{temp}}</li></ul></body></html>
4.添加日程.html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><h2>吴四的日程<span ng-bind="count()"></span></h2><div>    <input type="text" ng-model="action"><button ng-click="add()">添加</button></div>    <table>        <thead>        <tr>            <th>序号</th>            <th>日程</th>            <th>完成情况</th>        </tr>        </thead>        <tbody>        <tr ng-repeat="item in data.items|doFilter:complate">            <td>{{$index}}</td>            <td>{{item.action}}</td>            <td><input type="checkbox" ng-model="item.done"> </td>        </tr>        </tbody>    </table><div>显示全部<input type="checkbox" ng-model="complate"></div></body></html>
5.猜游戏.html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>猜大小</title>    <script src="../angular1.4.6.min.js"></script>    <<style>    *{        margin:0;        padding:0;        font-size: 30px;    }    input{        width: 500px;        height: 50px;    }    button{        width: 80px;        height: 50px;        border: 0;        text-align: center;        line-height: 50px;        color: white;        margin-left: 5px;    }</style>    <script>        var m=angular.module("m",[]);        m.controller("my",function ($scope) {            $scope.check=function () {                $scope.differ=$scope.guess-$scope.random;                $scope.num++;            }            $scope.reset=function () {                $scope.guess=null;                $scope.differ=null;                $scope.num=0;                $scope.random=Math.ceil(Math.random()*10);            }            $scope.reset();        })    </script></head><body ng-app="m" ng-controller="my"><h1>请输入一个1-10的整数</h1><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">0</span>次</p></body></html>
/*这是获取数据的JSON*/
[{    "id":1,    "img":"img/1.jpg",    "title":"小丸子1"  },{    "id":2,    "img":"img/2.jpg",    "title":"小丸子2"  },{    "id":3,    "img":"img/3.jpg",    "title":"小丸子3"  },{    "id":3,    "img":"img/3.jpg",    "title":"小丸子3"  },{    "id":4,    "img":"img/4.jpg",    "title":"小丸子4"  },{    "id":5,    "img":"img/5.jpg",    "title":"小丸子5"  },{    "id":6,    "img":"img/6.jpg",    "title":"小丸子6"  }]
如果有图片的话就要建个放图片的文件夹,用来进行请求图片的时候拿去图片

阅读全文

0 0