Implementing tabs with panes

I am new to AngularJS. Here is my basic code for implementing Tabs with Pane. Eventually, each tab-pane will have a form and a ui-grid that will display data from the DB.

• Can I use separate controllers to initialize each tab to load the pane?

• Is it good to give separate controllers for implementing a pane? I have DB calls in each pane of the tab.

• Should I use any directive?

Can you suggest better ways?








Bootstrap tab panel with Angular




One
Two
Three



Panel 1 Content
Panel 2 Content
Panel 3 Content



angular.module("app", [])
.controller("MainController", ['$scope', function($scope) {
$scope.activeTab = 1;

$scope.setActiveTab = function(tabToSet) {
$scope.activeTab = tabToSet;
}
}]);




Can I use separate controllers to initialize each Tabs to load the Pane?

Yes. Actually, that's the beauty of Angular. You can do whatever you want.


Is it good way to give separate controllers for Implementing Pane?

There's no right or wrong. It all depends on what you're trying to do.

Your code looks ok. However, I'd suggest moving your app code into an external JS file. This way, when it grows, it doesn't accumulate in your page.

Multiple controllers are fine. Actually, I recommend you to do it, especially when logic between tabs grow. This way, you can easily add a tab (and its controller) into the fray or easily pull one out without affecting the other tabs logic.

One thing to avoid though is making the parent controller a place of sharing among the controllers. In Angular, child controllers can see the parent controller, its data, its functions. The problem happens when your child controllers implicitly depend on stuff that's on the parent controller, i.e. expect some scope variable from the parent present. Best if you explicitly hand down properties across scopes.

StackExchange Code Review Q#125316, answer score: 3