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

Question

I have four to five tab views in my app. So clicking on each tab I'll show content based on the tab selection.

I tried two approach one is ng-route and another one is ng-show/ng-hide. I feel ng-show/ng-hide is good at performance level and I think I should follow the same. Here is what I tried

First Approach 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>

Second approach 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'; ?>

Content in those are listed in the main.php but on condition with 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>

I see the benefits of partial view with ng-route, which is manageable chunk of code. Which I can achieve php include file(each file with separate view and include them all in main file) and ng-show. My app doesn't need to care about URL Navigation as of now. When I try the above two approach I see ng-show is faster and I can avoid ng-route.js file as well(reduces file load time).

Is there anything am I thinking wrong. Any suggestion on which to use?

Answer 1

• In addition to what @DilumN has said, using ng-route also allows you to do deep linking (of sorts) into your tabs i.e. you can provide a URL to someone and that would open into the exact tab you want to point at.

• Also, ng-route is meant for this task, as opposed to ng-hide/show which is meant to display: none content.

• Last but not least, ng-route allows for easier tests (you're writing tests right? wink).

• You can also separate out concerns using ngRoute, and in the end, this will prevent spaghetti code. If you come from a jQuery background, the ng-show method might look more intuitive, but the ng-route method ironically, is the more Angular way of doing this.