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? – Robert Harvey Dec 2 '14 at 22:11
  • 1
    nope, just the usual: go get the data, display the data, send the data to the server, etc. – Chris McCall Dec 2 '14 at 22:14
  • 1
    Are you using subviews? Usually, MVC systems give you some way to compose smaller views into larger ones. – Robert Harvey Dec 2 '14 at 22:16
  • no, just one big-old view... – Chris McCall Dec 2 '14 at 22:17
  • Related: jan.varwig.org/archive/… – Robert Harvey Dec 2 '14 at 22:18

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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