When to use custom directive vs ui-view vs ng-include in an AngularJS application?

Question

I am building a large, complex AngularJS application (think ERP system). I am having a hard time deciding when it is appropriate to use ui-view, ng-include or a custom directive + templateURL.

I will give a few concrete examples to give y'all something to work with.

• A navigation menu that is used across all URLs of the application but includes a complex AJAX autosuggest/dropdown search box.
• A simple HTML footer that is the same across all URLs of the application
• The content areas that go in between the header and footer.
• The individual components that are nestled within the content area (such as and "Edit Profile" form, or user dashboard)
• Modal dialogs

What are the best practices?

Answer 1

For any large or complex application, I would suggest organizing as much of your code into re-usable custom directives as possible. Custom directives will allow you to leverage angular directives for maximum re-usability and minimize the repetitive HTML that exists when you rely only on built-in directives.

UI views are appropriate for swapping out controllers and views dynamically depending on the route. If you have application functionality where each view and controller combination is self-contained, then using a ui-view with routes makes sense.