Use 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>
Because templateurl here is equivalent to initiating an asynchronous request. Maybe because of this, you can try to cache the template that needs to be loaded first. It is recommended to use ui-router
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use ui-router
Because templateurl here is equivalent to initiating an asynchronous request. Maybe because of this, you can try to cache the template that needs to be loaded first. It is recommended to use ui-router