AngulagJs的页面使用Route跳转

来源：互联网发布：php延迟2秒执行编辑：程序博客网时间：2024/05/20 12:47

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        header{            width: 100%;            height: 200px;            line-height: 200px;            text-align: center;            background: blue;            color: #fff;            font-size: 30px;        }        li{            list-style: none;        }        .nav{            float: left;            width: 20%;        }        .nav li{            background-color: yellow;            height: 70px;            border: 1px solid #eee;            line-height: 70px;            text-align: center;        }        a{            text-decoration: none;        }        .content{            float: left;        }        .news{            background: red;        }        .content{            width: 70%;        }        .pic li{            float: left;            margin: 10px;        }    </style>    <script src="js/angular.min.js"></script>    <script src="js/angular-route.min.js"></script>    <script>        var myapp=angular.module("myapp",["ngRoute"]);        myapp.config(function ($routeProvider) {            $routeProvider.when("/home",{                templateUrl:"pages/home.html",                controller:"homeCtrl"            }).when("/details",{                templateUrl:"pages/details.html",                controller:"detailsCtrl"            }).when("/news",{                templateUrl:"pages/news.html",                controller:"newsCtrl"            }).when("/day",{                templateUrl:"pages/day.html",                controller:"dayCtrl"            }).when("/error",{                template:"<h2>发生错误了</h2>"            }).otherwise({                redirectTo:"/home"            });        });        myapp.controller("homeCtrl",function($scope,$http){            $scope.name="图片展示";            $http({                url:"package.json"            }).then(function(data){                $scope.data=data.data;            })        });        myapp.controller("detailsCtrl",function($scope){            $scope.check=function () {                console.log($scope.random);                $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;        });        myapp.controller("newsCtrl",function ($scope) {            $scope.name="表格展示";            $scope.users=[                {id:3003,name:"张三",pwd:333,age:13,sex:"男"},                {id:4004,name:"李四",pwd:444,age:14,sex:"女"},                {id:5005,name:"王五",pwd:555,age:15,sex:"男"}            ];            /*设置页面默认显示*/            $scope.show=true;            /*设置checkbox默认不选中*/            $scope.checked=false;            $scope.xuanze=false;            $scope.check=function (val) {                /*判断是否选中，然后控制下方的是否选中*/                if(val){                    $scope.xuanze=true;                }else{                    $scope.xuanze=false;                }            }            /*点击删除*/            $scope.remove=function (index) {                if(confirm("是否删除这一项？")){                    $scope.users.splice(index,1);                }            }            /*点击全部删除*/            $scope.delete=function () {                /*判断是否确认删除*/                if($scope.xuanze || $scope.checkD){                    if(confirm("用户是否确认删除所选？")){                        /*删除所选商品信息*/                        if($scope.checked){                            $scope.users.splice(0,$scope.users.length);                            /*让商品管理页面变成空白页面*/                            $scope.show=false;                        }else{                            for (var i = $scope.xuanle.length - 1; i >= 0; i--) {                                console.log($scope.xuanle[i]);                                for (var j = 0; j < $scope.users.length; j++) {                                    console.log($scope.users[j].id == $scope.xuanle[i]);                                    if ($scope.users[j].id == $scope.xuanle[i]) {                                        $scope.users.splice(j, 1);                                    }                                }                            }                        }                    }                }else{                    alert("先进行选择要删除的商品信息");                }            }            $scope.checkD=false;            $scope.xuanle=[];            $scope.xuan=function (xuanle,id) {                console.log(id);                $scope.checkD=xuanle;                if(xuanle){                    $scope.xuanle.push(id);                }            }            /*判断的功能,默认是名字排序*/            $scope.sort="name";            $scope.active=name;            $scope.rese=false;            $scope.sorts=function (sort) {                $scope.active=sort;                console.log(sort);                if($scope.sort==sort){                    $scope.rese=!$scope.rese;                }else{                    $scope.rese=false;                }                $scope.sort=sort;            }        });        myapp.controller("dayCtrl",function ($scope) {            $scope.items=[                    {action:"约刘诗诗吃饭",done:false},                    {action:"约刘诗诗跳舞",done:false},                    {action:"约刘诗诗开房",done:true},                    {action:"约刘诗诗爬长城",done:false},                    {action:"约刘诗诗逛天坛",done:false},                    {action:"约刘诗诗看电影",done:false}                ];            /*添加新的日程*/            $scope.add=function(){                /*对$scope.action进行一下非空判断*/                if($scope.action){                    /*如果输入了内容之后，就在数组的最后加入一条新内容*/                    $scope.items.push({"action":$scope.action,"done":false});                    /*添加完成之后，将input置空*/                    $scope.action="";                }            };        });    </script></head><body ng-app="myapp"><header>xxx管理系统</header><div class="box">    <ul class="nav">        <li><a href="#home">首页</a></li>        <li><a href="#details">详情页</a></li>        <li><a href="#news">新闻页</a></li>        <li><a href="#day">日程页</a></li>    </ul>    <div ng-view class="content"></div></div></body>

<--首页-->
<h2>{{name}}</h2><ul class="pic">    <li ng-repeat="item in data">        <h2>{{item.title}}</h2>        <img ng-src="{{item.img}}">    </li></ul>

<--详情页-->
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;            font-size: 30px;        }        input{            width: 400px;            height: 50px;            font-size: 30px;        }        button{            width: 80px;            height: 50px;            border: 0;            text-align: center;            line-height: 50px;            background: darkblue;            color: #fff;            margin-left: 5px;        }    </style></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>

<--新闻页-->
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table{            border-collapse: collapse;        }        th,td{            width: 200px;            border: 2px solid black;            text-align: center;            padding: 10px;        }        button{            width: 100px;            height: 40px;            background-color: red;            color: yellow;            border: 0px;            border-radius: 5px;        }        .search{            width: 1200px;            height: 50px;            background: yellow;            border-radius: 5px;            margin-top: 10px;        }        .search input{            width: 200px;            height: 30px;            color: #999;            border-radius: 5px;            margin-left: 20px;            margin-top: 10px;        }        .search button{            float: right;            margin-top: 5px;            margin-right: 20px;        }        .active{            color: red;        }    </style></head><body ng-app="myapp" ng-controller="myCtrl"><div class="search">    <input type="text" placeholder="用户名查询" ng-model="searchName">    <input type="text" placeholder="年龄范围查询" ng-model="searchAge">    <input type="text" placeholder="性别:下拉菜单" ng-model="searchSex">    <button ng-click="delete()">全部删除</button></div><!--用来遍历对象并渲染到页面中--><table border="" cellpadding="" cellspacing="">    <thead>    <th><input type="checkbox" ng-model="checked" ng-click="check(checked)"></th>    <th ng-click="sorts('id')" ng-class="{active:active=='id'}">id</th>    <th ng-click="sorts('name')" ng-class="{active:active=='name'}">用户名</th>    <th ng-click="sorts('pwd')" ng-class="{active:active=='pwd'}">密码</th>    <th ng-click="sorts('age')" ng-class="{active:active=='age'}">年龄</th>    <th ng-click="sorts('sex')" ng-class="{active:active=='sex'}">性别</th>    <th>操作</th>    </thead>    <tbody>    <!--实现模糊查询-->    <tr ng-repeat="item in users | filter:searchName | filter:searchAge | filter:searchSex | orderBy:sort:rese">        <td><input type="checkbox" ng-model="xuanze" ng-click="xuan(xuanze,item.id)"></td>        <td>{{item.id}}</td>        <td>{{item.name}}</td>        <td>{{item.pwd}}</td>        <td>{{item.age}}</td>        <td>{{item.sex}}</td>        <td><button ng-click="remove($index)">删除</button></td>    </tr>    </tbody></table></body></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 items">        <td>{{$index}}</td>        <td>{{item.action}}</td>        <td>{{item.done}}</td>        <td><input type="checkbox" ng-model="item.done"></td>    </tr>    </tbody></table><div>显示全部<input type="checkbox" ng-model="complate"></div></body></html>

阅读全文

0 0