angularjs路由小项目

最新推荐文章于 2021-04-30 16:42:17 发布

葛村野人

最新推荐文章于 2021-04-30 16:42:17 发布

阅读量281

点赞数

本文介绍了一个使用AngularJS实现的简易路由应用案例，包括页面间的跳转、数据请求、列表排序及简单游戏功能。文章详细展示了不同控制器的定义与交互方式，并提供了完整的HTML和JavaScript代码。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
这是我做的五个angularJS的切换跳转 因为时间原因只做了1 3 5 这三个
第一个是网络的请求数据
第二个是列表排序
第三个是小游戏 输入数字大小判断
-->
    <meta charset="UTF-8">
    <title>路由</title>
   <script type="text/javascript" src="js/angular.js" ></script>
 <script type="text/javascript" src="js/angular-route.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>