angular.js - 使用angular route的時候，頁面切換會暫時性出現一段空白，然后內容才加載出來
問題描述
問題解答
回答1：用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='http://www.piao2010.com/wenda/bootstrap.css' media='all'> <script src='http://www.piao2010.com/wenda/angular.min.js'></script> <script src='http://www.piao2010.com/wenda/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 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>回答2：
因為這里templateurl相當于發起了一個異步請求，可能是因為這個，可以嘗試先將需要加載的template緩存，推薦使用ui-router
網公網安備