使用ng-route進行部分視圖vs ng-show/ng-hide我應該使用哪一個？

Question

我在我的應用程序中有四到五個選項卡視圖。因此，點擊每個標籤，我會根據標籤選擇來顯示內容。

我嘗試了兩種方法之一是ng-route，另一個是ng-show/ng-hide。我覺得ng-show/ng-hide擅長性能水平，我想我應該遵循相同的。以下是我試過

第一種方法NG-路線

main.php

var testApp = angular.module("testApp", ["ngRoute"]); 
testApp.config(function ($routeProvider) { 
$routeProvider.when("/tab1", { 
templateUrl: "tab1.php" 
}); 
$routeProvider.when("/tab2", { 
templateUrl: "tab2.php" 
}); 
$routeProvider.when("/tab3", { 
templateUrl: "tab3.php" 
}); 
$routeProvider.when("/tab4", { 
templateUrl: "tab4.php" 
}); 
$routeProvider.otherwise({ 
templateUrl: "tab1.php" 
}); 
}); 

testApp.controller('testContr',function($scope){ 
//controller statements goes here 
}); 


<ul class="nav nav-pills"> 
    <li class="active" role="presentation"><a href="#/tab1">Tab 1</a></li> 
    <li role="presentation"><a href="#/tab2">Tab 2</a></li> 
    <li role="presentation"><a href="#/tab3">Tab 5</a></li> 
    <li role="presentation"><a href="#/tab4">Tab 4</a></li> 
</ul> 

tab1.php

<div> 
     tab1 content goes here 
    </div> 

tab2.php

<div> 
    tab2 content goes here 
</div> 

tab3.php

<div> 
    tab3 content goes here 
</div> 

tab4.php

<div> 
    tab4 content goes here 
</div> 

第二條本辦法NG-顯示/ NG隱藏

main.php

  var testApp = angular.module("testApp", []); 

     testApp.controller('testContr',function($scope){ 
      $scope.view = 'tab1'// tab1 by default 
      $scope.setView = function($newView){ 
       $scope.view = $newView; 
      } 
      //controller statements goes here 

     }); 


<ul class="nav nav-pills"> 
    <li class="active" role="presentation" ng-click="setView('tab1')"><a href="#">Tab 1</a></li> 
    <li role="presentation" ng-click="setView('tab2')"><a href="#">Tab 2</a></li> 
    <li role="presentation" ng-click="setView('tab3')"><a href="#">Tab 3</a></li> 
    <li role="presentation" ng-click="setView('tab4')"><a href="#">Tab 4</a></li> 
    </ul> 

    <?php require_once 'tab1.php'; 
    require_once 'tab2.php'; 
    require_once 'tab3.php'; 
    require_once 'tab4.php'; ?> 

內容放在這些都在main.php但條件列出了NG-顯示

tab1.php

<div ng-show="view == 'tab1'"> 
     tab1 content goes here 
     </div> 

tab2.php

<div ng-show="view == 'tab2'"> 
tab2 content goes here 
</div> 

TAB3。 PHP

<div ng-show="view == 'tab3'"> 
tab3 content goes here 
</div> 

tab4.php

<div ng-show="view == 'tab4'"> 
tab4 content goes here 
</div> 

我看到局部視圖的好處與ng-route，這是可管理的代碼塊。我可以實現php包括文件（每個文件具有獨立的視圖，並將它們全部包含在主文件中）和ng-show。 我的應用不需要關心URL導航截至目前。 當我嘗試上述兩種方法我看到ng-show更快，我能避免ng-route.js文件以及（減小文件加載時間）。

有什麼我在想錯了。任何建議使用？

Answer 1

• 除了什麼@DilumN說，用ng-route也可以讓你做深層鏈接（的種類）到你的標籤，即你可以提供一個網址給別人，並且會開成你想要的確切標籤指向。

• 此外，ng-route是意味着這個任務，而不是ng-hide/show這是爲了display: none內容。

• 最後但並非最不重要的一點，ng-route允許更簡單的測試（您正在編寫測試正確？wink）。

• 你也可以使用ngRoute分離問題，最後，這將防止意大利麪代碼。如果你來自jQuery背景，ng-show方法可能看起來更直觀，但具有諷刺意味的是，ng-route方法更適合做這件事。

Answer 2

對於這種方法ng-show有一些缺點。因爲您正在使用ng-show來顯示隱藏標籤，所以當您最初加載頁面時，所有這些視圖都會加載到您的DOM中& ng-show使用css show/hide來相應地顯示內容。如果你的內容變大了，那麼HTML也會變得更大。

而且，如果您想在一天內爲每個標籤單獨處理controllers，更好的方法是對每個標籤使用單獨的ui-views。

對於一個簡單的static標籤內容ng-show是好的，但如果你有一種感覺，這將是未來更復雜，我的建議是去單獨routes & controllers。

因此，在一天結束的時候，通過考慮項目的未來增長來決定是否屬於你。