How to define layout in AngularJS

Question

I am new to Angular JS...our screen layout is divided into 4 sections..

<table>
  <tr>
    <td>Section 1</td>
    <td>Section 2</td>
    <td>Section 3</td>
  </tr>
  <tr>
    <td colspan="3">section 4 - main content</td>
  </tr>
</table>

What is the best way to do it ? Define them as individual views ? and use ng-include tag ? Define a div and attach a controller and include respective code...I am looking for options to seperate the HTML code for each section into it;s own HTML. Any help would be greatly appreciated.

Answer 1

This depends on what you are planning to do with these sections. I would recommend looking into:

1. Directives - if you want each section to be its own 'component' (its own html, controller, etc.). The directive approach is especially useful if you plan on reusing a section.

2. UI-Router (https://github.com/angular-ui/ui-router). If you have multiple pages that each have their own sets of sections. For example if you have a main section and a nav section that changes based on the page - UI-Router can change the content in your main section and your nav section.

Hope this helps.