In my current project, I am using ngRoute to route users to the login page and upon successful login, they should land on the dashboard page.
However, I am facing a problem with the dashboard page where I need to have two or more tabs that render HTML pages from relative controllers. In AngularJS scenarios, it is recommended to use ng-view in the index page for rendering tab content. But I specifically want to render views by tabs in the dashboard page as the index page is reserved for the login mechanism.
I have been struggling to achieve this functionality despite following examples and tutorials. It seems to be the most challenging part of my project. What I require is a child route inside the dashboard page without transitioning from ngRoute to Ui-router. I am looking for a simple solution.
Here is the code snippet:
var app = angular.module('main', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider, $locationProvider) {
// Route configurations
});
app.controller('dashboardCtrl', function($scope, $location, user, $http, $window) {
// Dashboard controller logic
});
// Tabset structure for rendering tabs
<tabset justified="true">
<tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active">
<div ng-include="tab.templateUrl"></div>
</tab>
</tabset>
Although ng-include successfully renders the HTML pages, it does not execute the controller functions associated with them.
Can someone guide me in the right direction to implement these seemingly simple tabs on the landing page after a successful login?
Thank you!