Inline Angular Template
~~~~~~~~~~~~~~~~~~~~~~~
-Modal dialogs in Angular have to be represented as separate, addressable
-Angular templates. To give a chunk of HTML an "address", it can be
-inserted into a <script> block with an ID and a type of "text/ng-template".
+Angular templates, regardless of origin, must be represented as
+separate, addressable chunk. To give an inline chunk of HTML an
+"address", it can be inserted into a <script> block like so:
[source,html]
-----------------------------------------------------------------------------
</script>
-----------------------------------------------------------------------------
-The modal dialog is then invoked like so:
+The address is simply the ID, so in this example, the modal dialog is
+invoked like so:
[source,js]
-----------------------------------------------------------------------------
-// typically, templateURL refers to a (duh) URL, but inline
-// templates can be loaded by ID.
$modal.open({templateUrl : 'uncat_alert_dialog', controller : [...]});
-----------------------------------------------------------------------------
[source,html]
-----------------------------------------------------------------------------
-<!-- create a new file at circ/checkin/t_uncat_alert_dialog.tt2 -->
+<!-- New file at circ/checkin/t_uncat_alert_dialog.tt2 -->
+
<div class="modal-dialog">
<div class="modal-content">
<!-- ... content ... -->
</div>
-----------------------------------------------------------------------------
-Then load the file by URL instead of ID.
+Then load the file using the URL as the ID.
[source,js]
-----------------------------------------------------------------------------
});
-----------------------------------------------------------------------------
-Templates All The Way Down
-~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-Finally, here's an example where TT and Angular templates are used
-together to deliver a modal dialog.
-
-staff/parts/alert_dialog.tt2 is a TT template for modeling a simple
-alert dialog, whose text content is passed in by the containing template.
-As before, to manage the dialog in Angular, it needs an address, so we
-insert the contents of the TT template into an Angular template script.
-
-[source,html]
------------------------------------------------------------------------------
-<script type="text/ng-template" id="uncat_alert_dialog">
-[%
- INCLUDE 'staff/parts/alert_dialog.tt2'
- dialog_body = l('Copy "{{args.copy_barcode}}" was mis-scanned or is not cataloged')
-%]
-</script>
------------------------------------------------------------------------------
-
-Note that this is kind of a contrived example. In the long run,
-these types of reusable template chunks will likely live in Angular
-directives, which allow you to embed templates in the JS and create new
-HTML elements. (Imagine an <alert-dialog> directive). Once we resolve
-the best i18n approach for such dynamic UI components (I have some
-thoughts), this will probably be the better approach for these.
-structure.
+Angular Directives / Embedded Templates
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-Given a little time and experimentation, I believe we can find some
-reasonable guidelines on how and when to use each approach.
Future Topics...
----------------