AngularJS应用实例-优快云博客

本文链接：https://blog.youkuaiyun.com/Myworldlet/article/details/78056776
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box li {
            list-style: none;
        }

         .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            animation: run 3s linear infinite;
        }

         span {
            display: block;
            padding-top: 125px;
            text-align: center;
        }

         .box li {
            font-size: 50px;
            text-align: center;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0;
            opacity: 0.7;
            left: 0;
        }

         .li1 {
            background-color: #ff3f00;
            transform: translateY(150px) rotateX(90deg);
        }

        .li2 {
            background-color: #00EE00;
            transform: translateX(150px) rotateY(90deg);
        }

        .li3 {
            background-color: #0f4e00;
            transform: translateY(-150px) rotateX(90deg);
        }

        .li4 {
            background-color: #FFE0F0;
            transform: translateX(-150px) rotateY(90deg);
        }

        .li5 {
            background-color: #002f2f;
            transform: translateZ(-150px);
        }

        .li6 {
            background-color: #3ef1ee;
            transform: translateZ(150px);
        }

        @keyframes run {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
    <style>
         li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .header{
            background: pink;
            width: 100%;
            height: 200px;
            text-align:center;
            line-height: 200px;
            color: white;
            font-size: 36px;
        }

        .ul{
            width: 120px;
            float: left;
        }
        .ul li{
            height: 30px;
            border: 1px solid black;
            line-height: 30px;
            text-align: center;

        }
        .content{
            width: 70%;
            float: left;
        }
    </style>
    <script src="angular1.4.6.min.js"></script>
    <script src="angular-route.js"></script>
    <script src="jquery-3.2.1.js"></script>
    <script>
        var myapp=angular.module("myapp",["ngRoute"]);
        myapp.controller("update",function ($scope,$timeout) {
            $timeout(function () {
                $(".div2").css("display","none");
                $(".div1").css("display","block");
            },3000);
        });
        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:"/news"
            })
        })
        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:1244,name:"aphone",price:6400,kucun:100,check:false},
                {bianhao:1334,name:"mypad",price:4400,kucun:20,check:false},
                {bianhao:8234,name:"zpad",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.min+"--"+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" ng-controller="update">
<div class="div1" style="display: none">
    <header class="header">
        八维后台管理系统
    </header>
  <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>
      </ul>
      <div ng-view="" class="content"></div>
  </div>
</div>
<div class="div2">
    <ul class="box">
        <li class="li1"><span>1</span></li>
        <li class="li2"><span>2</span></li>
        <li class="li3"><span>3</span></li>
        <li class="li4"><span>4</span></li>
        <li class="li5"><span>5</span></li>
        <li class="li6"><span>6</span></li>

    </ul>
</div>
</body>
</html>


查询页面
<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>

新闻页面
<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>




日程页面
<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>



首页面  这个需要放入图片  自己可以自定义的   在下面的json数据中可以更改路径
<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>

请求的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"
  }
]