rram rram - 1 month ago 15
AngularJS Question

Partial View with ng-route vs ng-show/ng-hide which one should I use?

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
  • 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.

Comments