用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>
因为这里templateurl相当于发起了一个异步请求，可能是因为这个，可以尝试先将需要加载的template缓存，推荐使用ui-router
用ui-router
因为这里templateurl相当于发起了一个异步请求，可能是因为这个，可以尝试先将需要加载的template缓存，推荐使用ui-router