angular.js - 使用angular route的時(shí)候，頁(yè)面切換會(huì)暫時(shí)性出現(xiàn)一段空白，然后內(nèi)容才加載出來(lái)
問(wèn)題描述
問(wèn)題解答
回答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://m.cgvv.com.cn/wenda/bootstrap.css' media='all'> <script src='http://m.cgvv.com.cn/wenda/angular.min.js'></script> <script src='http://m.cgvv.com.cn/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：
因?yàn)檫@里templateurl相當(dāng)于發(fā)起了一個(gè)異步請(qǐng)求，可能是因?yàn)檫@個(gè)，可以嘗試先將需要加載的template緩存，推薦使用ui-router
網(wǎng)公網(wǎng)安備