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='https://www.haobala.com/wenda/bootstrap.css' media='all'> <script src='https://www.haobala.com/wenda/angular.min.js'></script> <script src='https://www.haobala.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
网公网安备