Menu
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.
Thanks!
481
It is pretty subjective, but using multiple controllers or directives, if done properly, can give you the effect you're looking for.
For example,
<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.
<my-custom-directive words="user.name"></my-custom-directive>
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.
app per document (as prescribed, and also because it makes sense.)services to 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.isolate scope, 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.
34
There is a project that implements widgets/dashboard functionality with AngularJS.
Features:
Live Demo http://nickholub.github.io/angular-dashboard-app
Demo source code https://github.com/nickholub/angular-dashboard-app
Dashboard directive itself https://github.com/nickholub/angular-ui-dashboard
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
