AngularJS路由使用案例

最新推荐文章于 2024-06-07 09:18:52 发布

chouteng7995

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量64

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：https://my.oschina.net/772304419/blog/1595534

版权

AngularJS路由使用案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJS路由使用案例</title>
        <script type="text/javascript" src="../js/angular.min.js"></script>
        <script type="text/javascript" src="../js/angular-route.min.js"></script>
    </head>
    <body ng-app="myapp">
        <div>
            <h1>在你我他学习吧，你可以学习到如下技术：</h1>
            <a href="#/JAVAEE"></a>
            <a href="#/AngularJS"></a>
            <a href="#/EasyUI"></a>
            <a href="#/MySQL"></a>
        </div>
        <!--路由加载后，更新变化的内容-->
        <div ng-view></div>
        <div>
            <h1>footer</h1>
        </div>
    </body>
    <script type="text/javascript">
        //定义myapp模块
        var myapp = angular.module("myapp",["ngRoute"]);
        //配置模块的路由
        myapp.config(["$routeProvider",function($routeProvider){
            $routeProvider.when('/JAVAEE',{
                templateUrl:'javaee.html'
            }).when('/AngularJS',{
                templateUrl:'angularjs.html'
            }).when('/EasyUI',{
                templateUrl:'easyui.html'
            }).when('/MySQL',{
                templateUrl:'mysql.html'
            }).otherwise({
                redirectTo:'JAVAEE'
            });
        }]);
    </script>
</html>

javaee.html代码：