angular 路由

来源:互联网 发布:linux编写shell脚本 编辑:程序博客网 时间:2024/05/22 08:19
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>日考</title>
        
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>

       <!--
    顺序不能反了
-->


        <style type="text/css">
            .left {
                width: 50%;
                height: 40px;
                float: left;
                text-align: center;
            }
            
            .right {
                width: 50%;
                height: 40px;
                float: left;
                text-align: center;
            }
            
            a {
                text-decoration: none;
            }
        </style>
    </head>

    <body ng-app="myApp">
        <div class="left">
            我的站点
        </div>
        <div class="right">
            <a href="#/zhuye">主页</a>
            <a href="#/women4">关于我们</a>

            <a href="#/lianxi">联系我们</a>

<!--
  页面自己定义
-->

        </div>

        <div ng-view></div>
        <script type="text/javascript">
            var mo = angular.module("myApp", ["ngRoute"]);

            mo.config(function($routeProvider) {

                $routeProvider.when("/zhuye", {
                    templateUrl: "zhuye.html"
                });
                $routeProvider.when("/lianxi", {
                    templateUrl: "lianxi.html"
                });
                $routeProvider.when("/women4", {
                    templateUrl: "women4.html"
                });

            });
        </script>

    </body>

</html>
原创粉丝点击