我应该使用ng-route与ng-show / ng-hide的局部视图？

Question

我的应用程序中有四到五个选项卡视图。 因此，单击每个选项卡，我将根据选项卡的选择显示内容。

我尝试了两种方法，一种是ng-route ，另一种是ng-show/ng-hide 。 我觉得ng-show/ng-hide在效能水平上不错，我想我也应该遵循相同的原则。 这是我尝试过的

第一种方法ng-route

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-show / ng-hide

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-show

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 include文件（每个文件具有单独的视图，并将它们全部包含在主文件中）和ng-show 。 到目前为止，我的应用无需关心URL导航 。 当我尝试上述两种方法时，我看到ng-show更快，并且我也可以避免ng-route.js文件（减少文件加载时间）。

我有什么想法不对吗？ 有什么建议可以使用吗？

Answer 1

• 除了@DilumN所说的以外，使用ng-route还可以使您在选项卡中进行深度链接（种类繁多），即可以为某人提供URL，并且该URL会打开您要指向的确切选​​项卡。

• 此外， ng-route 是为这项任务，而不是ng-hide/show其目的是要display: none内容。

• 最后但并非最不重要的一点是， ng-route允许进行更轻松的测试（您正在编写测试对吗？眨眼）。

• 您还可以使用ngRoute来分离问题，最后，这将阻止意大利面条式代码。 如果您来自jQuery背景，那么ng-show方法可能看起来更直观，但是具有讽刺意味的是， ng-route方法是更 Angular的方法。

Answer 2

对于这种方法， ng-show也有一些缺点。 因为您正在使用ng-show显示隐藏选项卡，所以在最初加载页面时，所有这些视图都将被加载到DOM中，而ng-show使用css show / hide来相应地显示内容。 如果您的内容越来越大，HTML也会越来越大。

而且，如果您想一天为每个选项卡处理单独的controllers ，更好的方法是为每个选项卡使用单独的ui-views 。

对于一个简单的static标签内容， ng-show很好，但是如果您觉得将来会更复杂，我建议您使用单独的routes和controllers 。

因此，总而言之，您可以通过考虑项目的未来增长来做出决定。