Yeoman Angular: multiple controllers per view
I'm sure I am doing something wrong and maybe trying to inject multiple controllers into the view is bad (at least I feel it might be bad) but wanted an opinion on the best approach.
My files are laid out as:
app.js
angular
.module('gemstoreApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl' <---- THIS is where I wish to insert a panelController
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
main.js
angular.module('gemstoreApp')
.controller('MainCtrl', function ($scope) {
var gems = [
{
name: 'Gem1',
price: 2.95,
soldOut: false,
images: [
'img1.png'
],
description: 'Some description'
}, {
name: 'Gem2',
price: 1.00,
soldOut: true,
images: [
'img2.png'
],
description: 'Some tetra description'
}, {
name: 'Gem3',
price: 5.00,
soldOut: false,
images: [
'img3.png'
],
description: 'Some tetra description'
}
]
$scope.products = gems;
});
main.html
<div>
<ul>
<div ng-repeat="product in products">
<li>
<p>{{ product.name }} - {{ product.price | currency }} - {{ product.description }}</p>
<img ng-src="{{ product.images[0] }}" alt="">
<button ng-hide="product.soldOut" class='btn btn-primary'>Add to Cart</button>
<button ng-show="product.soldOut" class='btn btn-danger'>Sold Out!!!</button>
</li>
<!== THE "tab" code from here is dirty .. and I'd like ot move it to its own controller ==>
<section ng-init="tab = 1">
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1}"><a href ng-click="tab = 1">Description</a></li>
<li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Specifications</a></li>
<li ng-class="{ active:tab === 3}"><a href ng-click="tab = 3">Reviews</a></li>
</ul>
</section>
<div id="panel" ng-show="tab == 1">
<h4>Description</h4>
<blockquote> {{ product.description }} </blockquote>
</div>
<div id="panel" ng-show="tab == 2">
<h4>Specification</h4>
<blockquote>Nothing yet</blockquote>
</div>
<div id="panel" ng-show="tab == 3">
<h4>Reviews</h4>
<blockquote>Nothing yet</blockquote>
</div>
</div>
</ul>
</div>
Basically I'm trying to refactor the "tab" code from here to a separate controller ( panelCtrl
) and use it here. So I could do something like:
<li ng-class="{ active:panelCtrl.isSelected(1)}"><a href ng-click="panelCtrl.setSelected(1)">Description</a></li>
For those familiar, I go to the Angular tutorial using code school and try to do it with Yeoman.
source to share
You can add another controller to the view by placing it directly into html files, for example: <div ng-controller="PanelCtrl as panel">
.
However, perhaps creating a directive for your panel might be the best solution? Directives can have controllers. This will allow you to use your panels in other views as well.
Having multiple controllers in the same view is not "bad practice" in itself. But that doesn't mean that browsing with multiple controllers every time is "good practice". In this case, it seems that the best option would be to package your panel into a directive.
PS: The fact that you used a yeoman doesn't matter :).
Update for comment:
There are some good resources when defining the structure of your angular app, and some answers can be found in the file structure of AngularJS apps . There is also an angular-style-guide driven community .
source to share