Angular应用程序不加载初始页面

Angular app does not load initial page

本文关键字：加载 应用程序 Angular      更新时间：2023-09-26

在我目前正在开发的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'
  });
});

更新2

在遍历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.element(document).ready(function() {
  angular.bootstrap(document, ['some', 'more', 'modules', 'ngRoute']);
});

我也更新到了v1.2.5，但对我的问题没有任何影响。

这是一种变通方法：

myApp.run(['$route', function($route)  {
  $route.reload();
}]);

在找到https://github.com/angular/angular.js/issues/1213.

try:

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.
}]);
相关文章：