源代码 :
点击运行
<!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> <script type="text/javascript"> angular.module('ngRouteExample', ['ngRoute']) .controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) .controller('AboutController', function ($scope, $route) { $scope.$route = $route;}) .config(function ($routeProvider) { $routeProvider. when('/home', { templateUrl: 'embedded.home.html', controller: 'HomeController' }). when('/about', { templateUrl: 'embedded.about.html', controller: 'AboutController' }). otherwise({ redirectTo: '/home' }); }); </script> </head> <body ng-app="ngRouteExample" class="ng-scope"> <script type="text/ng-template" id="embedded.home.html"> <h1> Home </h1> </script> <script type="text/ng-template" id="embedded.about.html"> <h1> About </h1> </script> <div> <div id="navigation"> <a href="#!/home">Home</a> <a href="#!/about">About</a> </div> <div ng-view=""> </div> </div> </body> </html>
运行结果