-1

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.

t3dodson
  • 3,949
  • 2
  • 29
  • 40
kishroe kota
  • 41
  • 4
  • Forgot to mention...each section should be able to reload data independently.. – kishroe kota Jun 15 '15 at 21:23
  • You should consider creating a custom directive for each section. If these sections are similar, you could create one directive and give them each their own scope. If they are fairly different, you could create a directive for each one. Directives can load HTML 'templates' and have their own logic associated with them. Read: https://docs.angularjs.org/guide/directive – shermanzach Jun 15 '15 at 22:17

1 Answers1

0

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.

Cliff
  • 162
  • 7