Gunakan ui-router
<!doctype html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="bootstrap.css" media="all"> <script src="angular.min.js"></script> <script src="angular-ui-router.min.js"></script> </head> <body> <p class='container'> <a ui-sref="state1">State 1</a> <a ui-sref="state2">State 2</a> <p class="row"> <p class="span12"> <p class="well" ui-view></p> </p> </p> </p> <script type="text/javascript"> var myApp = angular.module('myApp', ['ui.router']); myApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/state1"); $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" }) .state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: function($scope) { $scope.items = ["one","two"]; } }) .state('state2', { url: "/state2", templateUrl: "partials/state2.html" }) .state('state2.list', { url: "/list", templateUrl: "partials/state2.list.html", controller: function($scope) { $scope.things = ["three",'four']; } }); }); </script> </body> </html>
Oleh kerana templateurl di sini adalah sama dengan memulakan permintaan tak segerak, mungkin kerana ini, anda boleh cuba cache templat yang perlu dimuatkan terlebih dahulu Adalah disyorkan untuk menggunakan ui-router
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Gunakan ui-router
Oleh kerana templateurl di sini adalah sama dengan memulakan permintaan tak segerak, mungkin kerana ini, anda boleh cuba cache templat yang perlu dimuatkan terlebih dahulu Adalah disyorkan untuk menggunakan ui-router