angularJS路由跳转

来源：互联网发布：puppy linux 安装软件编辑：程序博客网时间：2024/06/05 01:10
<!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>
阅读全文
1 0