Table of Contents
Layout framework with Angular
Prerequisites
Setup basic project structure as: https://github.com/thuydang/angular_project_template/tree/dir_structure_1.1
Layout Framework
Look for a way to have modular layout components
Html Layout Spotter
body -- outer-wrapper ---- inner-wrapper ------ <navigation> ------ header -------- wrapper ---------- brand ---------- /brand ---------- Navigation items ---------- /Navigation items -------- /wrapper ------ /header ------ </navigation> ------ <page canvas> -------- <off-canvas navigation> Toggle to show sidebar -------- </off-canvas navigation> -------- <page content> ---------- <section map> ---------- </section map> ---------- <section feature> ---------- </section feature> ---------- <section latest> ---------- </section latest> -------- </page content> ------ </page canvas> ------ <footer> ------ </footer> ---- /inner-wrapper -- -- js /--
The layout will have 3 views: header, content, footer.
layout module
layout.tpl.html