Javascript 带ng route的局部视图与ng show/ng hide我应该使用哪一个？

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

我尝试了两种方法，一种是

ng route

，另一种是

ng show/ng hide

。我觉得

ng show/ng hide

在性能水平上很好，我想我也应该这样做。这是我试过的

第一次进近ng路线

main.php

var testApp=angular.module（“testApp”，“ngRoute”）；
testApp.config（函数（$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.others({
templateUrl:“tab1.php”
});
});
testApp.controller（'testContr'，函数（$scope）{
//控制器语句在这里
});

tab1.php

 <div>
        tab1 content goes here
    </div>

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

表1的内容在这里

tab2.php

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

tab2内容在这里

tab3.php

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

表3的内容在这里

tab4.php

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

表4的内容在这里

第二种方法显示/隐藏

main.php

var testApp=angular.module（“testApp”，[]）；
testApp.controller（'testContr'，函数（$scope）{
$scope.view='tab1'//默认情况下为tab1
$scope.setView=函数（$newView）{
$scope.view=$newView；
}
//控制器语句在这里
});

其中的内容列在main.php中，但条件是ng show

tab1.php

 <div>
        tab1 content goes here
    </div>

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

表1的内容在这里

tab2.php

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

tab2内容在这里

tab3.php

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

表3的内容在这里

tab4.php

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

表4的内容在这里

我看到了使用

ng route

进行局部查看的好处，这是一个可管理的代码块。我可以实现php包含文件（每个文件都有单独的视图，并将它们全部包含在主文件中）和

ng show

。 我的应用程序现在不需要关心URL导航。 当我尝试以上两种方法时，我发现

ng show

更快，而且我还可以避免

ng route.js

文件（减少文件加载时间）

---

我有什么想法不对吗。任何关于使用哪种方法的建议？

对于这种方法

ng show

也有一些缺点。因为您正在使用

ng show

显示隐藏选项卡，所以当您最初加载页面时，所有这些视图都将加载到您的DOM中&

ng show

使用css show/hide相应地显示内容。如果你的内容越来越大，HTML也会越来越大

此外，如果您希望在一天内为每个选项卡处理单独的

控制器

，更好的方法是为每个选项卡使用单独的

ui视图

对于一个简单的

静态

选项卡内容

ng show

是可以的，但是如果您觉得它将来会更复杂，我的建议是选择单独的

路线

和

控制器

---

因此，在一天结束时，您可以通过考虑项目的未来增长来做出决定。

对于这种方法，

ng show

也有一些缺点。因为您正在使用

ng show

显示隐藏选项卡，所以当您最初加载页面时，所有这些视图都将加载到您的DOM中&

ng show

使用css show/hide相应地显示内容。如果你的内容越来越大，HTML也会越来越大

此外，如果您希望在一天内为每个选项卡处理单独的

控制器

，更好的方法是为每个选项卡使用单独的

ui视图

对于一个简单的

静态

选项卡内容

ng show

是可以的，但是如果您觉得它将来会更复杂，我的建议是选择单独的

路线

和

控制器

因此，在一天结束时，您可以通过考虑项目的未来增长来做出决定。

• 除了@DilumN所说的，使用

  ng route

  还允许您对选项卡进行深度链接（排序），即您可以向某人提供一个URL，该URL将打开到您想要指向的确切选项卡

• 另外，

  ng route

  用于此任务，而

  ng hide/show

  用于

  显示：无

  内容

• 最后但并非最不重要的一点是，

  ng route

  允许进行更简单的测试（您编写的测试正确吗？wink）

• 您还可以使用ngRoute来分离关注点，最终，这将防止出现意大利面条代码。如果您来自jQuery背景，那么

  ng show

  方法看起来可能更直观，但具有讽刺意味的是

  ng route

  方法是更具角度的方法

• 除了@DilumN所说的，使用

  ng route

  还允许您对选项卡进行深度链接（排序），即您可以向某人提供一个URL，该URL将打开到您想要指向的确切选项卡

• 另外，

  ng route

  用于此任务，而

  ng hide/show

  用于

  显示：无

  内容

• 最后但并非最不重要的是，

  ng路线

  允许easi