AngularJS : "Deep" application vs. "wide" application? AKA many components/directives vs. many controllers -

which better: split application many different directives/components or many different controllers?

splitting application many different directives/components creates "deep" application. there more files in "deep" application, inherently more modular. advantages: working in team environment, there less chance 2 people's efforts bump each other (causing painful merges). it's easy share code between projects. disadvantages: if want issue, have follow chain of code need be. example: there issue radio directive. must first go template, figure out component radio directive in, in there see directive definition, go directive file.

extreme example: imagine form 10 questions. each question directive. form component. form loaded visual section, section component. various sections make page loaded template. if new project, , there problem form question 7, must "dig" template down find directive.

splitting application many different controllers creates "wide" application. there less files in "wide" application, each controller in charge of 1 aspect of template. advantages: can in template , find defined. each area of responsibility taken on controller. disadvantages: in team environment, multiple people working in same file. sharing code projects more involved.

extreme example: imagine form 10 questions. each question has controller (for validation). form has controller (to check when questions valid). form resides in section, has controller. if new project, , there problem form question 7, have find controller controls.

so think better , why? "deep" application or "wide" application?

vocabulary (as understand it, , please feel free correct me)

• directive: comprised of html template , javascript directive file. put dom manipulation logic in here, or other complicated logic. example: drop-down, datepicker, jquery ui.

• component: reusable piece of code meant abstract commonalities. can visually; imagine comic book page. there many frames separated gutters. each frame component, meant hold piece of art.

• template: brings partials, components, , directives. template rendered angular view.

• partial: piece of static html meant pulled template.

• view: compiled version of template. view doesn't exist until angular compiles it.

i vote "deep" variant. code reuse important thing.

you must first go template, figure out component radio directive in

why? @ name of directive , open corresponding file. create predictable folder structure when can find necessary file name of directive or controller or service.

for example, directive named acme-radio acme vendor-prefix, file should in folder vendor/acme/directives/radio.js.
other directive exclusive app , named acme-appname-radio - file should in appname/directives/radio.js.
it's rough example.