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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>

你可能感兴趣的:(angular+路由+不同页面展示$routeProvider)