angular+路由+不同页面展示$routeProvider

来源：互联网发布：淘宝积分在哪里看到编辑：程序博客网时间：2024/06/02 06:27
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    a{        font-size: 22px;        margin-top: 50px;        margin-left:20px;    }    #div1{        margin-left: 30%;    }    button{        width: 50px;        height: 30px;    }</style><script src="angular.js"></script><script src="angular-route.js"></script><script>   var app = angular.module("myApp",["ngRoute"]);  //设置初始化   app.config(["$routeProvider",function ($routeProvider) {       $routeProvider           .when("/login/:name/:age",{templateUrl:"login.html",controller:"myLogin"})           .when("/main/:ss",{               templateUrl:"main.html",controller:"myMain"})           .when("/game",{templateUrl:"game.html", controller:"myContr"})           .when("/other",{templateUrl:"other.html"})   }]);   //这是主控制器   app.controller("myCtrl",function ($scope) {   });   //登录控制器逻辑代码   app.controller("myLogin",function ($scope,$routeParams,$location) {       if($scope.admin =="ss" && $scope.pwd =="ss"){          //判读默认值.清空          $scope.admin = $routeParams.name=null;          $scope.pwd = $routeParams.age = null;       }else {           //登录按钮点击事件传用户名           $scope.denglu = function () {               var flag = true;               if ($scope.admin == null || $scope.admin == "") {                   alert("姓名不能为空");                   flag = false;               }               if ($scope.pwd == null || $scope.pwd == "") {                   alert("密码不能为空");                   flag = false;               }               if (flag) {                   alert("登录成功");                   //登录页面输出登录的值                     $scope.aa = $scope.admin;                     //跳转到主页面                     $location.path("/main/"+$scope.aa);               }           }       }   });   //主页控制器   app.controller("myMain",function ($scope,$routeParams) {       $scope.ss=$routeParams.ss;   });   //游戏的控制器   app.controller("myContr",function ($scope) {       //生成随机数       $scope.random = Math.ceil(Math.random()*10);       $scope.gameclick = function () {         alert($scope.random);       }       $scope.reset = function () {       };   })</script><body ng-app="myApp" ng-controller="myCtrl">    <div id="div1"><div style=" width: 150px;height:400px; background-color: aquamarine; float: left">    <br/><br/><br/>    <a href="#/login/ss/ss">登录</a><br/><br/><br/>    <a href="#/main/shilei">主页</a><br/><br/><br/>    <a href="#/game">游戏</a><br/><br/><br/>    <a href="#/other">其他</a><br/><br/><br/></div><div style=" width: 600px; height: 400px; background-color: burlywood; float: left" ng-view=""></div>    </div></body><!--这是登录页面--><script type="text/ng-template" id="login.html">    <center>        <br/><br/>        用户名:<input type="text" ng-model="admin"><br/><br/>        密 码: <input type="text" ng-model="pwd"><br/><br/>{{aa}}        <button ng-click="denglu()">登录</button>        <button ng-click="reset()">重置</button>    </center></script><!--这是主页-->    <script type="text/ng-template" id="main.html">        <center>            <h1>这是主页{{ss}}</h1>        </center>    </script><!--这是游戏页面--><script type="text/ng-template" id="game.html">    <center>        <h3>猜数字游戏</h3>        <input type="number" placeholder="请输入数字" ng-model="guess"><br/>        <button ng-click="gameclick()">检查</button><button ng-click="reset()">重置</button>        <p>猜大了</p>        <p>猜小了</p>        <p>猜对了</p>        <p>一共猜了{{count}}次</p>    </center></script><script type="text/ng-template" id="other.html"><center>    {{5*5}}</center></script></html>
阅读全文
0 0