[英]Angular app does not load initial page
在我当前正在开发的Angular应用程序中,首页调用不会导致加载正确的路由模板(仅显示菜单栏)。 仅当我单击另一个链接并返回原始链接时,才会加载正确的页面。
首页加载是否存在任何已知问题,或者该如何调试?
有一点上下文:我正在使用Angularjs(v1.2.0-rc.2)和requirejs(还有更多,但它们应该无关紧要)。 我无法提供一个最低限度的工作示例,因为我不知道要删除什么以及现在要删除什么。 我也有一段时间没有在某些页面上出现此问题,但是现在(在其他页面上进行了更多开发之后),这些页面表现出相同的行为。 任何指针都表示赞赏...
根据要求,提供路由配置示例。 它们看起来都非常相似。 一些静态部分和一些ID。
mod.config(function ($routeProvider) {
$routeProvider.when('/some/:id/route/to/somewhere', {
controller: 'MyController',
templateUrl: '/template/some.template.html'
});
});
逐步浏览一下Angular代码后,我发现在对angular.js
此代码段中的新URL进行初始处理期间,没有向事件$locationChangeSuccess
注册任何处理程序。
// update browser
var changeCounter = 0;
$rootScope.$watch(function $locationWatch() {
var oldUrl = $browser.url();
var currentReplace = $location.$$replace;
if (!changeCounter || oldUrl != $location.absUrl()) {
changeCounter++;
$rootScope.$evalAsync(function() {
if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
defaultPrevented) {
$location.$$parse(oldUrl);
} else {
$browser.url($location.absUrl(), currentReplace);
afterLocationChange(oldUrl);
}
});
}
$location.$$replace = false;
return changeCounter;
});
return $location;
function afterLocationChange(oldUrl) {
$rootScope.$broadcast('$locationChangeSuccess', $location.absUrl(), oldUrl);
}
仅在处理完第一页加载之后,才在angular-route.js
中执行该行: $rootScope.$on('$locationChangeSuccess', updateRoute);
(我认为这会导致路由工作并正确显示视图)。 URL的每个后续更改都可以正常工作……也许这是由于我初始化angular的方式所致。 我用:
angular.element(document).ready(function() {
angular.bootstrap(document, ['some', 'more', 'modules', 'ngRoute']);
});
我还更新到了v1.2.5,但对我的问题没有任何影响。
这是一种解决方法:
myApp.run(['$route', function($route) {
$route.reload();
}]);
尝试:
mod.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/some/:id/route/to/somewhere', {
controller: 'MyController',
templateUrl: '/template/some.template.html'
});
$routeProvider.otherwise({
// If you don't have any route named '/', this will be the default.
redirectTo: '/some/route' // or '/some/route/:with/params'
});
}]);
另一个可能的解决方法
var initApp = function () {
angular.bootstrap(document.body, ['loginApp']);
document.body.className += ' ng-app';
}
if ( document.body.className.indexOf('ng-app') == -1 ) {
initApp();
}
据我了解,问题在于路由器尚未启动。 我也遇到过同样的问题。 在app.run中包含$ route足以启动路由器。
app.run(['$rootScope', '$route', function ($rootScope, $route) {
// Include $route to kick start the router.
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.