<!DOCTYPE html> <html lang="en"> <head> <!-- 这是我做的五个angularJS的切换跳转 因为时间原因只做了1 3 5 这三个 第一个是网络的请求数据 第二个是列表排序 第三个是小游戏 输入数字大小判断 --> <meta charset="UTF-8"> <title>路由</title> <script src="angular1.4.6.min.js"></script> <script src="angular-route.js"></script> <script src="jquery-3.2.1.slim.js"></script> <style> li { list-style-type: none; font-size: 30px; padding-top: 70px; } li a { text-decoration: none; } </style> </head> <body ng-app='routeDemo'> <!--左边栏--> <div id="navigator" style="width: 20%;display: inline-block;background-color: red;height: 650px;float: left"> <!--菜单--> <ul> <li><a href="#/pager">首页</a></li> <li><a href="#/news">新闻</a></li> <li><a href="#/select">查询</a></li> <li><a href="#/life">行程</a></li> <li><a href="#/game">游戏</a></li> </ul> </div> <!--右边栏--> <div style="width: 80%;display: inline-block;background-color: cornflowerblue;height: 650px;float: right"> <div ng-view=""></div> </div> </body> <script type="text/ng-template" id="index.pager.html"> <div ng-controller="MyController"> <input ng-model="userName"><br/> <input ng-model="passWord"><br/> <button ng-click="login()">登录</button> <br/> <span ng-bind="result"></span> </div> </script> <script type="text/ng-template" id="index.news.html"> </script> <script type="text/ng-template" id="index.select.html"> <table ng-controller="myCtrl" border="1" cellspacing="0" cellpadding="0" align="center" width="600px"> <tr> <th colspan="4"><input type="text" placeholder="产品名称" ng-model="search"/><button ng-click="delete1($index)">删除全部</button></th> </tr> <tr> <th ng-click="col='Bianhao';desc=!desc">产品编号</th> <th ng-click="col='Name';desc=!desc">产品名称</th> <th ng-click="col='Price';desc=!desc">产品价格</th> <th></th> </tr> <!-- 遍历数组 | 通过商品名称进行模糊查询 | 排序--> <tr ng-repeat="x in shuzu|filter:{'Name':search}|orderBy:col:desc"> <td>{{x.Bianhao}}</td> <td>{{x.Name}}</td> <td>{{x.Price|currency:'(RMB)'}}</td> <td><button ng-click="delete($index)">删除</button></td> </tr> </table> </script> <script type="text/ng-template" id="index.life.html"> <h1>这是生活馆</h1> </script> <script type="text/ng-template" id="index.game.html"> <div ng-controller="MyControllers"> <input ng-model="Name"><br/> <button ng-click="logins()">登录</button> <br/> <span ng-bind="results"></span> </div> </script> <script type="text/javascript"> var app = angular.module('routeDemo',['ngRoute']) .controller('pagerController',function ($scope,$route) { $scope.$route = $route; }) .controller('newsController',function ($scope,$route) { $scope.$route = $route; }) .controller('selectController',function ($scope,$route) { $scope.$route = $route; }) .controller('LifeController',function ($scope,$route) { $scope.$route = $route; }) .controller('gameController',function ($scope,$route) { $scope.$route = $route; }) //配置$routeProvider用来定义路由规则 //$routeProvider为我们提供了when(path,object)& other(object)函数按顺序定义所有路由,函数包含两个参数: //@param1:url或者url正则规则 //@param2:路由配置对象 .config(function($routeProvider){ $routeProvider. when('/pager',{ //templateURL:插入ng-view的HTML模板文件 templateUrl:'index.pager.html', controller:'pagerController' }). when('/news',{ templateUrl:'index.news.html', controller:'newsController' }). when('/select',{ templateUrl:'index.select.html', controller:'selectController' }). when('/life',{ templateUrl:'index.life.html', controller:'LifeController' }). when('/game',{ templateUrl:'index.game.html', controller:'gameController' }) }); app.controller("myCtrl",function ($scope) { //数据 $scope.shuzu=[ { "Bianhao":1, "Name":"iphone6", "Price":6000 }, { "Bianhao":2, "Name":"iphone7", "Price":7000 }, { "Bianhao":3, "Name":"iphone8", "Price":8000 }, { "Bianhao":4, "Name":"iphonex", "Price":9000 } ] //删除单个内容 $scope.delete=function ($index) { if($index>=0){ $scope.shuzu.splice($index,1); } }; //删除全部内容 $scope.delete1=function($index){ if($scope.shuzu.length>=0){ $scope.shuzu.splice($index); } }; }); app.controller("MyController", function ($scope, $http) { $scope.login = function () { alert("123"); var url = "http://www.meirixue.com/api.php?c=index&a=index"; $http.get(url).success(function (data) { console.log("123123"); if (data.status==200) { console.log("123"); $scope.result = "成功"; alert(JSON.stringify(data)); } else { $scope.result = "失败"; } }).error(function (data) { alert("访问失败"); }); } }); app.controller("MyControllers", function ($scope) { $scope.logins = function () { var name = $scope.Name; if(isNaN(name)){ $scope.results="请输入数字!"; }else{ if (name == 50) { $scope.results = "正确!"; } else if (name < 50) { $scope.results = "数字小了!"; } else { $scope.results = "数字大了!"; } } } }); </script> </html>
angularJS路由跳转
最新推荐文章于 2023-01-01 23:19:45 发布