Is this correct for the Directive?
I was tasked with setting up an initial application structure for a large angular application, I came across several blog posts that say everything should be a directive (which I mostly agree with), but I have a feeling that I have pulled this idea too far ...
what I have is basically - when you go to portal
, ui-router will load the portal template from the templates folder, everything inside that actual template <portal-view></portal-view
.. the directive portalView
is basically the entire view wrapped in the directive.
Route
angular.module('portal').config([
'$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('portal', {
url: "/",
templateUrl: "templates/portal.tpl.html"
});
}]);
portal.tpl.html
<div class="container">
<portal-view></portal-view>
</div>
portalView directive
angular.module('portal').directive('portalView', function() {
return {
controller: 'portalController',
controllerAs: 'vm',
templateUrl: "/directives/portalView/portalView.tpl.html"
}});
portalView folder
- portalView
- portalView.controller.js
- portalView.js
- portalView.less
- portalView.tpl.html
It seems like a good idea in my head, but I can get a tough task when we start adding more apps to the application, but I hope some angular pro tells me this is the best way to do it :)
Any help, tips and links would be much appreciated!
source to share
Composing the view and including it in a directive looks like a smart idea to me. This will make it easier to switch to another router if this happens.
portal.tpl.html
not required, if you plan to follow this practice template: '<portal-view></portal-view>'
will suffice. But don't dismiss it if you have plans to use a template to load css and js resources (using scripts in templates is not straightforward, but it is possible), it would fit the scheme quite well.
source to share