AngularJS路由实现单页面跳转
Posted VictoriaChen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS路由实现单页面跳转相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由</title> <script src="angular.min.js"></script> <!--引入路由文件--> <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> </head> <body ng-app=\'routeDemo\'> <!--左边栏--> <div id="navigator" style="width: 20%;display: inline-block;background-color: red;height: 400px;float: left"> <!--菜单--> <ul> <li><a href="#/home">首页</a></li> <li><a href="#/woman">女装</a></li> <li><a href="#/man">男装</a></li> <li><a href="#/life">生活用品</a></li> <li><a href="#/cook">厨房用品</a></li> </ul> </div> <!--右边栏--> <div style="width: 80%;display: inline-block;background-color: green;height: 400px;float: right"> <div ng-view=""></div> </div> </body> <script type="text/ng-template" id="index.home.html"> <h1>这是首页</h1> </script> <script type="text/ng-template" id="index.woman.html"> <h1>这是女装</h1> </script> <script type="text/ng-template" id="index.man.html"> <h1>这是男装</h1> </script> <script type="text/ng-template" id="index.life.html"> <h1>这是生活馆</h1> </script> <script type="text/ng-template" id="index.cook.html"> <h1>这是厨房用品</h1> </script> <script type="text/javascript"> angular.module(\'routeDemo\',[\'ngRoute\']) .controller(\'HomeController\',function ($scope,$route) { $scope.$route = $route; }) .controller(\'WomanController\',function ($scope,$route) { $scope.$route = $route; }) .controller(\'WomanController\',function ($scope,$route) { $scope.$route = $route; }) .controller(\'ManController\',function ($scope,$route) { $scope.$route = $route; }) .controller(\'LifeController\',function ($scope,$route) { $scope.$route = $route; }) .controller(\'CookController\',function ($scope,$route) { $scope.$route = $route; }) //配置$routeProvider用来定义路由规则 //$routeProvider为我们提供了when（path，object）& other(object)函数按顺序定义所有路由，函数包含两个参数： //@param1:url或者url正则规则 //@param2：路由配置对象 .config(function($routeProvider){ $routeProvider. when(\'/home\',{ //templateURL：插入ng-view的HTML模板文件 templateUrl:\'index.home.html\', controller:\'HomeController\' }). when(\'/woman\',{ templateUrl:\'index.woman.html\', controller:\'WomanController\' }). when(\'/man\',{ templateUrl:\'index.man.html\', controller:\'ManController\' }). when(\'/life\',{ templateUrl:\'index.life.html\', controller:\'LifeController\' }). when(\'/cook\',{ templateUrl:\'index.cook.html\', controller:\'CookController\' }) }) </script> </html>
效果图：
以上是关于AngularJS路由实现单页面跳转的主要内容，如果未能解决你的问题，请参考以下文章