angularJs路由和网络请求

来源：互联网发布：阿里云ecs ddos 编辑：程序博客网时间：2024/06/05 17:01

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>    <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>    <style>            .div_main{                width: 1000px;                height: 800px;            }            .div_left{                float: left;                width: 100px;                height: 800px;                background-color:green;            }            .div_center{                float: left;                width: 800px;                height: 800px;            }            .div_right{                float: left;                width: 100px;                height: 800px;                background-color: #00B7FF;            }            .title{                height: 60px;                width: 100%;                margin-top: -20px;            }            .main{                height: 740px;                width: 800px;            }            .main_left{                height: 740px;                width: 150px;                float: left;            }            .main_right{                height: 740px;                width: 600px;                float: left;            }            ul li a{                text-decoration: none;            }            ul li{                list-style: none;                line-height: 50px;            }    </style></head><body ng-app="routeDemo" ><script>    var myApp=angular.module('routeDemo',['ngRoute']);    myApp.config(['$routeProvider', function($routeProvider){            $routeProvider                .when('/shouye',{                    templateUrl:'../views/page/shouye.html',                    controller:"shouyeCtrl"                })                .when('/news',{                    templateUrl:'../views/page/news.html',                    controller:"newsCtrl"                })                .when('/select',{                    templateUrl:'../views/page/select.html',                    controller:"selectCtrl"                })                .when('/works',{                    templateUrl:'../views/page/works.html',                    controller:"worksCtrl"                })                .when('/games',{                    templateUrl:'../views/page/games.html',                    controller:"gamesCtrl"                })        }]);    <!-- 网络请求-->    myApp.controller("shouyeCtrl",function ($scope,$http) {        $http({            url:"../views/package.json"        }).then(function (data) {            $scope.data=data.data;        })    });        myApp.controller("newsCtrl",function ($scope) {        <!--初始化数据 -->        $scope.item=[            {id:1234,name:"ipad",price:3400,num:10,check:false},            {id:1244,name:"aphone",price:6400,num:100,check:false},            {id:1334,name:"mypad",price:4400,num:20,check:false},            {id:8234,name:"zpad",price:8400,num:130,check:false},        ]        <!--排序 -->        $scope.orderName="id";        $scope.order=false;        $scope.px=function (column) {            if($scope.orderName==column){                $scope.order=!$scope.order;            }else{                $scope.order=false;            }            $scope.orderName=column;        };        <!--删除单个 -->        $scope.remove=function (index) {            if (confirm("确定删除吗？")){                $scope.item.splice(index,1);            }        }        <!--全选状态 -->        $scope.checkAll=function (val) {            if (val){                $scope.xuanz=true;            }else{                $scope.xuanz=false;            }        }        <!-- 删除-->        $scope.del=function () {            //判断是否确认删除            if($scope.xuanz||$scope.checkD){                if (confirm("确认删除")){                    //删除所有商品信息                    if($scope.checkAll){                        $scope.item.splice(0,$scope.item.length);                        //让商品信息管理页面为空白页面                    }else{                        for(var i=$scope.xuan1.length-1;i>=0;i--){                            console.log($scope.xuan1[i]);                            for(var j=0;j<$scope.item.length;j++){                                console.log($scope.item[j].id==$scope.xuan1[i]);                                if($scope.item[j].id==$scope.xuan1[i]){                                    $scope.item.splice(j,1);                                }                            }                        }                    }                }            }else{                alert("先进行选中要删除的商品信息");            }        }        $scope.checkD=false;        $scope.xuan1=[];        $scope.xuan=function (xuan1,id) {            console.log(id);            $scope.checkD=xuan1;            if (xuan1){                $scope.xuan1.push(id);            }        }    });    <!-- 查询操作-->    myApp.controller("selectCtrl",function ($scope,$http) {        alert("111");        //https://free-api.heweather.com/v5/weather?city=%E7%A6%8F%E5%B7%9E&key=545d63e185fc48169a43cbabba6e74d2        var p1="https://free-api.heweather.com/v5/weather?city=";            var p2;            var p3="&key=545d63e185fc48169a43cbabba6e74d2";            $scope.city="beijing";            $scope.search=function () {                p2=$scope.city;                $http({                    url:p1+p2+p3                }).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="";        }    });</script><center>        <!--总盒子 -->    <div  class="div_main" style="width:1000px; height: 800px;">        <!--左盒子 -->    <div class="div_left" >    </div>        <!--中间盒子 -->    <div class="div_center">        <!--标题 -->        <div class="title">            <h2 style="padding-top: 10px">升班之旅</h2>        </div>        <!--内容 -->        <div class="main" >            <div class="main_left">                <ul>                    <li><a href="#/shouye">首页</a></li>                    <li><a href="#/news">新闻</a></li>                    <li><a href="#/select">查询</a></li>                    <li><a href="#/works">行程</a></li>                    <li><a href="#/games">游戏</a></li>                </ul>            </div>            <div ng-view=""  class="main_right">            </div>        </div>    </div>        <!--右盒子 -->    <div class="div_right"></div>    </div></center></body></html>

//new页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div style="width: 100%;height: 700px;padding-top: 50px">    <div class="title">        <input type="text" ng-model="select" placeholder="请输入关键字...">        <span style="padding-left: 100px"></span>        <button style="background-color: crimson;color: white" ng-click="del()">批量删除</button>    </div>    <div class="main_shop">        <table border="1px solid" cellpadding="10">            <thead>            <th><input type="checkbox" ng-model="allCheck" ng-click="checkAll(allCheck)"></th>            </th>            <th ng-click="px('id')" ng-class="getClass('id')">                商品编号            </th>            <th ng-click="px('name')" ng-class="getClass('name')">                商品名称            </th>            <th ng-click="px('price')" ng-class="getClass('price')">                商品价格            </th>            <th ng-click="px('num')" ng-class="getClass('num')">                商品库存            </th>            <th>                数据操作            </th>            </thead>            <tbody>            <tr ng-repeat="item in item | filter:select | orderBy:orderName:order">                <td>                    <input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)">                </td>                <td>                    {{item.id}}                </td>                <td>                    {{item.name}}                </td>                <td>                    {{item.price | currency:("¥：")}}                </td>                <td>                    {{item.num}}                </td>                <td>                    <button ng-click="remove($index)">删除</button>                </td>            </tr>            </tbody>        </table>    </div></div></body></html>

//select页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div style="margin-top: 50px">    城市：<input type="text" ng-model="city" placeholder="请输入城市">    <button ng-click="search()">查询</button>    <ul>        <li>{{cityName}}</li>        <li>{{date}}</li>        <li>{{temp}}</li>    </ul>    </div></body></html>

阅读全文

1 0