AngularJS controller construction
I am currently evaluating AngularJS as a potential MVC framework. I am wondering what is the "correct" way to implement the following scenario -
Let's say I am designing a user details page. It is split into different tabs like basic information tab (name, email ...), user interests tab (dropdowns like sports, music ..), etc.
So the code looks like this:
<!-- main.html-->
<div ng-controller="UserController">
<div ng-switch on="renderPath">
<div ng-switch-when="basicInfo">
<div ng-include src="basicUrl"></div>
</div>
<div ng-switch-when="interests">
<div ng-include src="interestUrl"></div>
</div>
</div>
</div>
and interests .html looks like
<div>
<div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
I like to play:
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li ng-repeat="sport in sports">{{sport}}</li>
</ul>
<a class="dropdown-toggle" id="A1" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
I like to listen to:
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li ng-repeat="genre in genres">{{genre}}</li>
</ul>
</div>
</div>
So the question is, starting with the UserController , should I create a separate controller for the "basicInfo" and "interests" tabs? The reason why I can create an InterestController is because I don't have to think
$scope.sports= ['baseball', 'bastketball'];
$scope.genres= ['pop', 'classical'];
should live in UserController as only Interest.html cares about different choices. Also, the UserController can get real bold reality as there will be many other tabs on the page.
But at the same time in Angular documentation - * "In Angular, a model is any data available as a property of an Angular Scope object" *, I feel that if I do have an InterestController , etc., its model is pretty arbitrary. because it just contains the information needed only for that tab.
So what's the best practice? I hope I can explain clearly. Thank.
source to share
Here's one approach to developing an Angular app:
- Think about your models (e.g. User). Create services for these models.
- Think about how you want to view your models - your views (e.g. custom (tabs), custom, custom interests). Create HTML templates for these views.
- Finally, attach a controller to each view (using ng-view and routing or ng-controller for any other way, like what you do with ng-switch and ng-include). Ask the dispatcher to find / get just any model data the view needs to execute. "Make your controllers as thin as possible" was said somewhere in the Talk section of DoubleClick .
For your specific example, I think the basicInfo and interests tabs should have their own controllers, because they are two different views. Please note that each page may display multiple views - all visible or only a few. How big or small the "look" is is up to you.
There is confusion about $ scope, model and services. Misko says in this YouTube video that “ Scope is not your model. Scope is what you attach your model to. ”
In an exchange with Brandon Tilly, he said this about including your models in services: “Services are especially good for objects models because they can be entered and therefore easy to mock tests. "
source to share