点击运行
<!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> <script> angular.module('routingDemoApp',['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]); </script> </body> </html>
运行结果
