文章标题简单路由案例

最新推荐文章于 2024-01-25 10:00:00 发布

龙图图

最新推荐文章于 2024-01-25 10:00:00 发布

阅读量188

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/xingyueyezi01/article/details/78302759

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.js"></script>
    <style>
   a{ text-decoration: none;} div{ border: 1px solid; width: 600px; height: 300px; margin-top: 100px}
        a:hover{ color: crimson;}
    </style>
</head>
<body ng-app='routingDemoApp'>
<center>
<h2>AngularJS 路由应用</h2>

    <a href="#/">商品列表</a>
    <a href="#/computers">用户信息</a>
    <a href="#/printers">地址信息</a>




<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
    angular.module('routingDemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
                .when('/',{template:'外星人电脑<br/> 联想电脑 <br/>华硕电脑 <br/>神州笔记本'})
                .when('/computers',{template:'张三<br/> 李四<br/> 张五<br/> 李六'})
                .when('/printers',{template:'上地一街 <br/>上地二街<br/> 上地三街<br/> 上地四街'})

        }]);
</script>

</center>
</body>
</html>

龙图图

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题简单路由案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.js"></script> <style> a{ text-decoration: none;} div{ border: 1px solid; widt
复制链接

扫一扫