angularJs路由和网络请求

最新推荐文章于 2022-03-29 09:36:38 发布

jie哈哈哈

最新推荐文章于 2022-03-29 09:36:38 发布

阅读量745

点赞数 1

分类专栏： web angular

本文链接：https://blog.csdn.net/jie13717766447/article/details/78040022

版权

web angular 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

jie哈哈哈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs路由和网络请求

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">script> script src="https://apps.bdim
复制链接

扫一扫