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?
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.
For this approach ng-show have some disadvantages as well. Because you are using ng-show to show hide tabs, when you load the page initially all those views will be loaded into your DOM & ng-show uses css show/hide to show content accordingly. If your content get bigger & bigger the HTML will also grow bigger.
And also if you want to handle separate controllers for each tabs one day, the better way is using separate ui-views for each tab.
For a simple static tab content ng-show is fine, but if you have a feeling that it will be more complex in future, my suggestion is to go for separate routes & controllers.
So at the end of the day decision is yours by thinking about the future growth of the project.