javascript - ng-route 的部分 View 与 ng-show/ng-hide 我应该使用哪一个？

Question

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

我尝试了两种方法，一种是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 部分 View 的好处，它是可管理的代码块。我可以实现 php include 文件(每个文件都有单独的 View 并将它们全部包含在主文件中)和 ng-show 。我的应用程序目前不需要关心URL 导航。当我尝试上述两种方法时，我发现 ng-show 更快，并且我也可以避免 ng-route.js 文件(减少文件加载时间)。

我有什么想法错了吗？关于使用哪个有什么建议吗？

Answer 1

• 除了 @DilumN 所说的之外，使用 ng-route 还允许您对选项卡进行深度链接(某种程度)，即您可以向某人提供 URL，并且该 URL将打开您想要指向的确切选​​项卡。

• 此外，ng-route意味着用于此任务，而不是ng-hide/show，后者意味着显示:无内容。

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

• 您还可以使用 ngRoute 分离关注点，最终，这将防止出现意大利面条式代码。如果您有 jQuery 背景，ng-show 方法可能看起来更直观，但具有讽刺意味的是，ng-route 方法是更多执行此操作的 Angular 方式。