I am pretty new to Angular JS and am working on creating a Angular JS powered dashboard within a larger Django application. I have read a lot on Angular but still have a few questions on what is the best way to structure an Angular application that will have many independent widgets within.
I understand there can only be 1 app per HTML document along with typically 1 ng-view call on the page, my question is should I be setting up each individual widget as it's own app or is there a way to render and control multiple modules within a single app?
Currently I have ng-app declared at the top of my document
<html lang="en" ng-app="dashboard">
Not sure how I would render the remaining widgets if I can only use ng-view once?
I know this question is pretty subjective and there is probably no perfect answer, just looking for some best practices or functional advice.
It is pretty subjective, but using multiple controllers or directives, if done properly, can give you the effect you're looking for.
<html ng-app="my-dashboard"> <body> <div class="Some structuring thing"> <ng-include src="my-header.html"></ng-include> </div> <div class="Some other thing"> <ng-include src="my-sidebar.html"></ng-include> </div> etc... </body> </html>
Then, each section could be its own, stand-alone component. From there, you can break it down into controllers...
<div ng-controller="my-header-text"> <p ng-bind="title"> etc... </div> <div ng-controller="my-header-login"> <p ng-click="login()">Login</p> etc... </div>
And even further with directives.
This example is, really overkill, but the point remains; you've got a lot of ways to control granularity as you like.
Personally, these are the rules I like to follow.
appper document (as prescribed, and also because it makes sense.)
- A new controller for every DOM sub-tree that can stand alone; so my login and dashboard clearly have different purposes, and if I wanted granularity, I could break each one into its own controller, and use
servicesto properly handle communication with the root of my app. I could login to any page, not just the dashboard, and a user could use the dashboard even without the option to log in and out (assuming some default case for non-logged in users), so these sections can stand alone and are decent candidates for their own controller.
- I like custom directives for non-trivial HTML chunks. It helps readability and reuse; just always try to use the
isolatescope, and if you can't, question if what you're doing is really a directive. Write your directive assuming that it could be used not just by your app, but any similar app that included it and followed the correct API.
This recipe can be found in it's original form on Stack Over Flow.