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

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

Answer 1

除了@DilumN所说的内容之外，使用ng-route还允许您对选项卡进行深层链接（即排序），即您可以向某人提供URL，这样就可以打开您想要指向的标签。
此外，对于此任务，ng-route 意味着，而ng-hide/show意味着display: none内容。
最后但并非最不重要的是，ng-route允许更简单的测试（你正确地编写测试吗？眨眼）。
您还可以使用ngRoute分离出问题，最后，这会阻止意大利面条代码。如果你来自jQuery背景，那么ng-show方法可能看起来更直观，但具有讽刺意味的是ng-route方法是更多 Angular方式。

Answer 2

对于这种方法ng-show也有一些缺点。因为您使用ng-show来显示隐藏标签，所以当您最初加载页面时，所有这些视图都会加载到您的DOM＆amp; ng-show使用css show / hide来相应地显示内容。如果你的内容变得更大＆amp; HTML越大，也越大。

如果您希望有一天为每个标签处理单独的controllers，更好的方法是为每个标签使用单独的ui-views。

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

因此，在一天结束时，您可以考虑项目的未来发展。

使用ng-route和ng-show / ng-hide的部分视图我应该使用哪一个？

2 个答案: