提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Angular路由

Angular路由
2023-09-27 14:26:51 时间

文章目录

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例</title>
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='routingDemoApp'>
 
    <h2>AngularJS 路由应用</h2>
    <ul>
        <li><a href="#!/">首页</a></li>
        <li><a href="#!/computers">电脑</a></li>
        <li><a href="#!/printers">打印机</a></li>
        <li><a href="#!/blabla">其他</a></li>
    </ul>
     
    <div ng-view></div><!-- 放置一个显示控件在页面上,会显示template里边的内容 -->
    <script>
        angular.module('routingDemoApp',['ngRoute'])
        .config( function($routeProvider){
            $routeProvider
            .when('/',{template:'这是首页页面'})//when是匹配路径用的
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});//其他不匹配的直接重定向到首页
        });
    </script>
</body>
</html>

效果图

在这里插入图片描述
在这里插入图片描述

学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

相关文章