angular路由最基本的实例---简单易懂

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/angularjs.js"></script>
    <script src="../js/angular-route.min.js"></script>
    <style type="text/css">
        body{
            font-size: 32px;
        }
        .show{
            background: #eeeeee;
            padding: 8px;
             500px;
            margin:8px 0px;
        }
    </style>
</head>
<body>
<div>
    <div>
        <a href="#/">首页</a>
        <a href="#/book">图书</a>
        <a href="#/game">游戏</a>
    </div>
    <div ng-view></div>
</div>
</body>
<script>
    var app=angular.module('myapp',['ngRoute']);
    app.controller('sub1',function($scope){
        $scope.title="老王1";
    });
    app.controller('sub2',function($scope){
        $scope.title="老王2";
    });
    app.controller('sub3',function($scope){
        $scope.title="老王3";
    });
    app.config(function($routeProvider) {
        $routeProvider.when('/',{
            controller:"sub1",
            template:"<div class='show'>{{title}}</div>"
        })
        .when('/book',{
            controller:"sub2",
            template:"<div class='show'>{{title}}</div>"
        })
        .when('/game',{
            controller:"sub3",
            template:"<div class='show'>{{title}}</div>"
        })
        .otherwise({ redirectTo: '/' });
    })
</script>
</html>
angular-route.min.js是路由的插件