Can you create components in separate files (like angular) for more modular design - dojo

Question

I have been reading/doing the tutorials, but must be missing something. I am coming from an Angular background.
Can you split up html into components like angular? The problem I am having is that I have about 5 complex panels to display on a map. They are currently all in one html file which makes it very large (each panel is pretty complex).
Do you make widgits for each one? Can you use html when creating widgets?

Answer 1

You can define widgets for every component and compose them as you wish. Also you can define html templates as separate files or just inside widget as template string.
Dojo tutorials are a bit confusing so I'll give you an example:
require([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin'],
function(declare, _WidgetBase, _TemplatedMixin) {
const Header = declare([ _WidgetBase, _TemplatedMixin], {
templateString: '<div>I am Header</div>'
})
const App = declare([ _WidgetBase, _TemplatedMixin], {
templateString: '<div><div data-dojo-attach-point="headerNode"></div>I am App</div>',
constructor: function() {
this.header = new Header()
},
postCreate: function() {
this.header.placeAt(this.headerNode)
this.header.startup()
}
})
let app = new App({}, 'app')
})
<script data-dojo-config="async: 1"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="app">
</div>
In this example I defined two widgets: Header and App
You can create instance of your widget from another one and place it in any domNode. In fact there are a number of ways how to make it. It's just one of them.
In snippet I declared both widgets inside of one require function, but you can do it in separate file, like this:
define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dojo/text!templateHtml'
], function (declare, _WidgetBase, _TemplatedMixin, template) {
return declare([_WidgetBase, _TemplatedMixin], {
templateString: template
/// code of widget.............
})
In this case your module must return a declare function with your widget's class.
Then you'll be able to require this widget as dependency in another one.