I have an angular app that concentrates most of its functionality around a primary entity that has several satellite entities. The UI for this is effectively one screen, with a few tabs, one for each satellite. There are also some modal dialogs with content for a couple of the satellites that deserve their own subview, produced by clicking on a link in a tab.

The controller for this screen is growing rather large, as it has a set of REST calls for each entity, along with functions to produce and dismiss the various dialogs. All the subviews for the tabs are stuffed into the main screen as well, inside a tab set.

How can I split out these files, giving each tab its own controller and view?

  • Are you putting anything in your controllers, other than logic that glues the UI to your business layer? Dec 2, 2014 at 22:11
  • 1
    nope, just the usual: go get the data, display the data, send the data to the server, etc. Dec 2, 2014 at 22:14
  • 2
    Are you using subviews? Usually, MVC systems give you some way to compose smaller views into larger ones. Dec 2, 2014 at 22:16
  • no, just one big-old view... Dec 2, 2014 at 22:17
  • Related: jan.varwig.org/archive/… Dec 2, 2014 at 22:18

2 Answers 2


Use inline templates to separate views and filters instead of controllers:

<script type="text/ng-template" id="/tpl.html">
  Content of the template.

<a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include src="currentTpl"></div>

Use $templateCache to perform loops, and $cacheFactory to pass data between filters rather than scope.



Pattern : Hierarchical routes

The ideal way is to break the UI into hierarchical components, and present them at sub-routes:

const routes: Routes = [
    path: '/',
    component: MainComponent,
    children: [
      {path: 'tab1' , component: Sattelite1Component },
      {path: 'tab2' , component: Sattelite2Component }
  { path: '**', redirect: '/tab1'}

The MainComponent can present main data, plus, have a <router-outlet> in its HTML to show the current tab/satellite content. Tab switching is now navigating the router to /tab1 or /tab2 etc. The UI and REST calls for satellite entities stay in their own respective components.

Pattern: UI overlay as a service

Create an angular service: PopupService. Expose a method showOverlay(ComponentClass, ComponentData). Use Angular CDK to implement showing any component type with given data as a popup/dialog/modal/whatever. Now you can not only embed custom components via HTML templates, you can also show them floating as an overlay.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.