Is it wrong practice to create Divs just to have multiple controllers?
Is it bad practice to create a div in your HTML to have multiple controllers?
Since you can't have them in one, also the multiple directive approach with separate controllers seems like a hack, but correct me if I'm wrong.
So I have two controllers, one is called ConvertController and the other is called YouTubeLinkUIController .
The responsibility for the former is to hit my web API controller and convert the given YouTube link to audio.
The latter's responsibility is to control some of the functionality of the user interface.
To follow the principle of single responsibility, I split them into two different controllers, and that's the problem.
My latest commit, Index.cshtml in particular, shows the complete code, but in order not to mess with it, I'll shorten it for this post.
https://github.com/AvetisG/TubeToTune/commit/e68ba42f20498c9a4e032328aed6d68c27b9b2cb
<div class="container" ng-app="TubeToTuneApp" ng-controller="YouTubeLinkUIController">
... more code
@*Scoping the Convert Controller*@
<div ng-controller="ConvertController">
... more code
</div>
</div>
source to share
Looking at your github commit post, it looks like you split the controllers because you didn't want to have too much code in your ui controller.
This is a great example of when an angular service is fine. You can think of a service like a controller without all the overhead and that can be easily called from another controller.
What you need to do is define the service that calls your api and then
angular.module('youTube', [])
.controller('YouTubeLinkController', ['$scope', 'convert',
function($scope, convert) {
$scope.convertLink = function() {
$scope.convertMessage = convert.convertYoutube()
};
}
])
.factory('convert', [
function() {
var convertService = {};
convertService.convertYoutube = function(data) {
//Make api call
return "Conversion Done";
}
return convertService;
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="youTube">
<div ng-controller="YouTubeLinkController">
{{convertMessage}}
<button ng-click="convertLink()">Convert</button>
</div>
</body>
Naturally, you must define the service on your own page. Thus, controllers are only used to interact with the user interface. It also solves your problem
source to share
It is absolutely ok to use divs \ spans and nested structures and use with it ng-controller
.
When you add ng-controller
to an html element in this way, you are creating a component with a model and a controller.
A complex component can have nested subcomponents that perform very specific functionality, and thus you demarcate such parts with ng-controller
. To take it even further, if you convert that component to directives, with your own controller + template (view), and accept the model from the data source, then you have a reusable component that you can use throughout your application.
source to share
To me it looks more like your ConvertController should be written as a service and not as a controller. This will still be solely responsible, but will probably come close to your intended functionality: UI functionality and view data in a controller, business logic in a service.
However, having two controllers on the same view can be bad practice and can lead to confusing markup in the following cases:
<button type="submit" class="btn btn-xlarge btn-warning btn-block" ng-if="AreThereYouTubeLinks() == true" ng-click="ConvertToTunes(YouTubeLinks)">
You may know which controllers AreThereYouTubeLinks()
, ConvertToTunes()
and YouTubeLinks
belong to, but this will be confusing in the long run (and can lead to problems with scoped variables such as YouTubeLinks
.
Fortunately, there is a syntax to help clear this up: Controller As - and Todd Motto wrote a great article explaining how to use it and what problems it helps solve. In short, it will look something like this:
<div ng-controller="MainCtrl">
{{ title }}
<div ng-controller="AnotherCtrl">
{{ title }}
<div ng-controller="YetAnotherCtrl">
{{ title }}
</div>
</div>
</div>
in that:
<div ng-controller="MainCtrl as main">
{{ main.title }}
<div ng-controller="AnotherCtrl as another">
{{ another.title }}
<div ng-controller="YetAnotherCtrl as yet">
{{ yet.title }}
</div>
</div>
</div>
In your case, you get a safer and more understandable markup:
<div class="container" ng-app="TubeToTuneApp" ng-controller="YouTubeLinkUIController as linkCtrl">
... more code
@*Scoping the Convert Controller*@
<div ng-controller="ConvertController as converter">
<button type="submit" class="btn btn-xlarge btn-warning btn-block" ng-if="linkCtrl.AreThereYouTubeLinks() == true" ng-click="converter.ConvertToTunes(linkCtrl.YouTubeLinks)">
</div>
</div>
If you're going to stick with two controllers, you probably want to consider investing time in ease of control with an As controller.
source to share