解決AngualrJS頁面重新整理導致異常顯示問題

緒   

       俗話說，細節決定成敗，程式設計亦是如此。程式設計過程中我們可能會不自覺的忽視一些細節問題，殊不知，這些細節正是導致頁面顯示出現問題的地方。今略舉一例，與君共勉之。

      頁面正常載入後，顯示如下：

      按F5重新整理之後，頁面如下所示:

      很明顯，頁面顯示出現了異常。回過頭再看看Chrome的錯誤提示，

      具體程式碼如下:

      正是以上程式碼導致了錯誤的發生。

追根溯源  

      讓我們回顧一下，錯誤到底是如何發生的。正常載入情況下，頁面正常顯示很容易理解，程式是按照既定的資料流走的。但是按F5重新整理之後，$stateParams.uid已經不存在了，此時再次呼叫就會出現undefined的錯誤，導致頁面加載出現異常。

如何解決這類問題呢？

      首先應在語句執行之前新增變數判斷語句，若變數存在且不為空，則可繼續執行其它流程。程式碼如下:

      $scope.pageNumber   = 1; // 起始查詢頁碼

      $scope.totalItems   = 0; // 查詢資料總數

      $scope.pageCnt = 1; // 初始化總頁數

      if($stateParams.uid != "" && $stateParams.uid != null && typeof(instance.shopStatementDtl) != "undefined"

      {

      .................

      .................

      }

      執行後效果:

美文美圖