AngularJS路由实现web页面跳转

AngularJS路由实现web页面跳转

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沈晖然的 路由</title>
    <script  src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <!--引入路由文件-->
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<style>
li{
float: left;
margin-left: 25px;
list-style: none;
}
</style>
</head>

<body ng-app='routeDemo'>
    <!--左边栏-->
    <div id="navigator" style="width: 100%;display: inline-block;background-color: paleturquoise;height: 200px;">
        <!--菜单-->
        <ul>
            <li><a href="#/home">首页</a></li>
            <li><a href="#/woman">音乐</a></li>
            <li><a href="#/man">游戏</a></li>
        </ul>
    </div>
    <!--右边栏-->
    <div style="width: 100%;display: inline-block;height: 400px;">
        <div ng-view=""></div>
    </div>
</body>

<script type="text/ng-template" id="index.home.html">
    <h1>欢迎登陆八维在线首页</h1>
</script>
<script type="text/ng-template" id="index.woman.html">
    <h1>这是音乐模板</h1>
</script>
<script type="text/ng-template" id="index.man.html">
    <h1>这是游戏模板</h1>
</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>