路由页面导航

来源：互联网发布：腾讯用的什么编程语言编辑：程序博客网时间：2024/05/21 18:48
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular-1.3.0.js"></script>    <script src="angular-route.js"></script><body ng-app='routeDemo'><!--左边栏--><div id="navigator">    <!--菜单-->    <table style=" width: 250px; height: 40px; margin: auto;">        <tr>            <td><a href="#/home">商品列表</a></td>            <td><a href="#/woman">用户信息</a></td>            <td><a href="#/man">地址信息</a></td>        </tr>    </table></div><!--下边栏--><div style="width: 300px;display: inline-block;height: 400px;">    <div ng-view="" ></div></div></body >    <script type="text/ng-template" id="index.home.html">      <ul  style="list-style-type:none;margin: auto;">        <li>外星人</li>        <li>联想</li>        <li>三星</li>        <li>苹果</li>      </ul>    </script>    <script type="text/ng-template" id="index.woman.html">        <ul  style="list-style-type:none; margin: auto;">        <li>张三</li>        <li>李四</li>        <li>王五</li>        <li>赵六</li>        </ul>    </script>    <script type="text/ng-template" id="index.man.html">        <ul  style="list-style-type:none; margin: auto;">        <li>上地一街</li>        <li>上地二街</li>        <li>上地三街</li>        <li>上地四街</li>        </ul>    </script>    <script type="text/javascript">        angular.module('routeDemo',['ngRoute'])            .controller('HomeController',function ($scope,$route) {                $scope.$route = $route;            })            .controller('WomanController',function ($scope,$route) {                $scope.$route = $route;            })            .controller('WomanController',function ($scope,$route) {                $scope.$route = $route;            })            .controller('ManController',function ($scope,$route) {                $scope.$route = $route;            })            //配置$routeProvider用来定义路由规则            //$routeProvider为我们提供了when（path，object）& other(object)函数按顺序定义所有路由，函数包含两个参数：            //@param1:url或者url正则规则            //@param2：路由配置对象            .config(function($routeProvider){                $routeProvider.                when('/home',{                    //templateURL：插入ng-view的HTML模板文件                    templateUrl:'index.home.html',                    controller:'HomeController'                }).                when('/woman',{                    templateUrl:'index.woman.html',                    controller:'WomanController'                }).                when('/man',{                    templateUrl:'index.man.html',                    controller:'ManController'                })            })    </script></html>
阅读全文
0 0