angularjs路由小案例

来源：互联网发布：mac做铃声编辑：程序博客网时间：2024/06/04 07:22

一.点击不同导航链接显示不同的界面，但是不去页面跳转

（路由的原理就是通过锚点来完成的）

效果图：（关键代码已用红色渲染）

代码：

index.html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">            .content {      width: 960px;      margin: 0 auto;      }      nav {            height: 30px;      margin: 40px auto;        background-color: black;        border-radius: 8px;      }      li,a{      margin: 0;      padding: 0;      list-style: none;      }      li {      display: inline-block;      }      a {      display: block;      text-align: center;      width: 100px;      height: 30px;      line-height: 30px;      text-decoration: none;      color: white;      }      a:hover{      background-color: #aaa;      }      footer {      background-color: black;      width: 100%;      height: 200px;      }</style></head><body ng-app="app"><nav class="content"><ul><li><a href="#/index">主页</a></li><li><a href="#/view">展示</a></li><li><a href="#/login">登录</a></li></ul></nav><div class="content"><div ng-view="">    </div></div><script src=js/angular.min.js></script><script src=js/angular-route.min.js></script><script type="text/javascript">       var app = angular.module('app',['ngRoute']);       app.config(['$routeProvider',function($routeProvider){       $routeProvider.when('/index',{           templateUrl:'tem.html',           controller:'indexctrl'       }).when('/view',{           template:'你好这是展示界面'         }).when('/login',{         templateUrl:'s.html',//点击登录的跳转界面         controller:'loginctrl'//给s.html指定控制器         }).otherwise({            templateUrl:'tem.html'         })       ;       }]);        app.controller('indexctrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){           console.log($routeParams);        }]);       app.controller('loginctrl',['$scope','$http',function($scope,$http){           $http({           url:'stars.php',//去后台获取相关数据           }).success(function(info){              $scope.name = info[0].name;//处理返回的数据           });       }]);</script></body></html>

stars.php:

<?php   $result =  file_get_contents('stars.json');  echo $result;   ?>

stars.json:

[{"name": "王力宏","photo": "./images/wlh.jpg","ablum": "<<改变自已>>","age": 39,"sex": "男"},{"name": "王力宏","photo": "./images/wlh.jpg","ablum": "<<改变自已>>","age": 39,"sex": "男"},{"name": "王力宏","photo": "./images/wlh.jpg","ablum": "<<改变自已>>","age": 39,"sex": "男"},{"name": "王力宏","photo": "./images/wlh.jpg","ablum": "<<改变自已>>","age": 39,"sex": "男"}]

二:网易云音乐小案例

效果图:

index.html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>音乐列表</title><style type="text/css">        body {        padding: 0;        margin: 0;        }        ol {        padding-top: 0;        margin: 0;            min-height: 400px;            border:1px solid #ccc;        }        ol li {            line-height: 40px;        }        ol li:hover{            background-color: #ccc;        }        .music {        width: 600px;        margin: 100px auto;        }        .music nav {        height: 40px;        background-color: #000;        display: flex;        }        .music nav a {        flex:1;        text-align: center;        line-height: 40px;        text-decoration: none;            color:#fff;        }        .music nav a:hover {            background-color: rgba(255,255,255,0.5);        }</style></head><body ng-app="Music">    <div class="music">    <nav>        <!-- 后端会说明需要什么类型参数 -->        <!-- 需要一个类型id 1，2，3，4 -->        <!-- 1表示流行，2表示华语-->    <a href="#/1">流行</a>    <a href="#/2">华语</a>    <a href="#/3">欧美</a>    <a href="#/4">日韩</a>    </nav>        <ol>        <div ng-view="">                            </div>        </ol>    </div><script src="../../js/angular.min.js"></script><script src="../../js/angular-route.min.js"></script><script>         var Music = angular.module('Music',['ngRoute']);         Music.config(['$routeProvider',function($routeProvider) {            //通过后台数据分析实现不同界面主要是通过传参             $routeProvider.when('/:id',{               templateUrl:'../views/list.html',               controller:'musictrl'             });                      }]);         Music.controller('musictrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){            //           var id = $routeParams.id;           $http({            url:'list.php',            params:{                pid:id  //后台需要pid,1或2或3或4            }           }).success(function(info){            $scope.lists = info;           });         }]);</script></body></html>

list.php:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>音乐列表</title><style type="text/css">        body {        padding: 0;        margin: 0;        }        ol {        padding-top: 0;        margin: 0;            min-height: 400px;            border:1px solid #ccc;        }        ol li {            line-height: 40px;        }        ol li:hover{            background-color: #ccc;        }        .music {        width: 600px;        margin: 100px auto;        }        .music nav {        height: 40px;        background-color: #000;        display: flex;        }        .music nav a {        flex:1;        text-align: center;        line-height: 40px;        text-decoration: none;            color:#fff;        }        .music nav a:hover {            background-color: rgba(255,255,255,0.5);        }</style></head><body ng-app="Music">    <div class="music">    <nav>        <!-- 后端会说明需要什么类型参数 -->        <!-- 需要一个类型id 1，2，3，4 -->        <!-- 1表示流行，2表示华语-->    <a href="#/1">流行</a>    <a href="#/2">华语</a>    <a href="#/3">欧美</a>    <a href="#/4">日韩</a>    </nav>        <ol>        <div ng-view="">                            </div>        </ol>    </div><script src="../../js/angular.min.js"></script><script src="../../js/angular-route.min.js"></script><script>         var Music = angular.module('Music',['ngRoute']);         Music.config(['$routeProvider',function($routeProvider) {            //通过后台数据分析实现不同界面主要是通过传参             $routeProvider.when('/:id',{               templateUrl:'../views/list.html',               controller:'musictrl'             });                      }]);         Music.controller('musictrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){            //           var id = $routeParams.id;           $http({            url:'list.php',            params:{                pid:id  //后台需要pid,1或2或3或4            }           }).success(function(info){            // console.log(info);            $scope.lists = info;           });         }]);</script></body></html>

list.html:

<li ng-repeat="x in lists">{{x.text}}</li>

阅读全文

0 0