Angular應用程序無法加載初始頁面

Question

在我當前正在開發的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的方式所致。 我用：

angular.element(document).ready(function() {
  angular.bootstrap(document, ['some', 'more', 'modules', 'ngRoute']);
});

我還更新到了v1.2.5，但對我的問題沒有任何影響。

Answer 1

這是一種解決方法：

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

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

Answer 2

嘗試：

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'
  });
}]);

Answer 3

另一個可能的解決方法

var initApp = function () {
    angular.bootstrap(document.body, ['loginApp']);
    document.body.className += ' ng-app';
}
if ( document.body.className.indexOf('ng-app') == -1 ) {
    initApp();
}

Answer 4

據我了解，問題在於路由器尚未啟動。 我也遇到過同樣的問題。 在app.run中包含$ route足以啟動路由器。

app.run(['$rootScope', '$route', function ($rootScope, $route) {
   // Include $route to kick start the router.
}]);