<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix">Hi,<br>
<br>
I'd like to point out, that our main intent should be to use
mostly AngularJS's Directives feature.<br>
As Jordan mentions, It is a self-contained reusable item that is
initialized on the html element<br>
(see line 6 in [2]), you can pass it variables that Django
template has available. Then Angular takes<br>
over and replaces the html element with template that belongs to
directive. The business logic<br>
is taken care by controller that is also assigned to the
directive. The directive can get data either<br>
from the variables passed to the html element or better, through
the service injected to controller.<br>
This service brings data asynchronously from our API.<br>
<br>
In our patch we are getting data using the current membership
code, that brings data from<br>
hidden form. Maintaining the synchronization between the directive
and the form involves quite<br>
a lot of code. Once we'd have the API on the Django side that
would serve the data for membership<br>
component in json, the membership directive code would get reduced
by a good amount.<br>
<br>
Reading back on yesterday's Horizon meeting, there was some
confusion about "compile phase"<br>
The compile phase in angular does not have much to do with
jasvascript compilation/minification.<br>
It is a phase in AngularJS when compiler parses the template and
instantiates directives and expressions.<span style="color:
rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica,
Arial, sans-serif; font-size: 13px; font-style: normal;
font-variant: normal; font-weight: normal; letter-spacing:
normal; line-height: 18px; orphans: auto; text-align: left;
text-indent: 0px; text-transform: none; white-space: normal;
widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;
background-color: rgb(255, 255, 255); display: inline
!important; float: none;"><br>
(</span>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<a
href="http://www.benlesh.com/2013/08/angular-compile-how-it-works-how-to-use.html">http://www.benlesh.com/2013/08/angular-compile-how-it-works-how-to-use.html</a>
)<br>
<br>
Jirka<br>
<br>
On 11/11/2013 08:21 PM, Jordan OMara wrote:<br>
</div>
<blockquote cite="mid:20131111192149.GS39851@redhat.com" type="cite">Hello
Horizon!
<br>
<br>
On November 11th, we submitted a patch to introduce AngularJS into
<br>
Horizon [1]. We believe AngularJS adds a lot of value to Horizon.
<br>
<br>
First, AngularJS allows us to write HTML templates for interactive
<br>
elements instead of doing jQuery-based DOM manipulation. This
allows
<br>
the JavaScript layer to focus on business logic, provides easy to
<br>
write JavaScript testing that focuses on the concern (e.g.
business
<br>
logic, template, DOM manipulation), and eases the on-boarding for
new
<br>
developers working with the JavaScript libraries. <br>
Second, AngularJS is not an all or nothing solution and integrates
<br>
with the existing Django templates. For each feature that requires
<br>
JavaScript, we can write a self-contained directive to handle the
DOM,
<br>
a template to define our view and a controller to contain the
business
<br>
logic. Then, we can add this directive to the existing template.
To
<br>
see an example in action look at _workflow_step_update_member.html
<br>
[2]. It can also be done incrementally - this isn't an
all-or-nothing
<br>
approach with a massive front-end time investment, as the Angular
<br>
components can be introduced over time.
<br>
<br>
Finally, the initial work to bring AngularJS to Horizon provides a
<br>
springboard to remove the "DOM Database" (i.e. hidden-divs) used
on
<br>
the membership page (and others). Instead of abusing the DOM, we
can
<br>
instead expose an API for membership data, add an AngularJS
resource
<br>
(i.e. reusable representation of API entities) for the API. The
data
<br>
can then be loaded data asynchronously and allow the HTML to focus
on
<br>
expressing a semantic representation of the data to the user.
<br>
Please give our patch a try! You can find the interactions on
<br>
Domains/Groups, Flavors/Access(this form does not seem to work in
<br>
current master or on my patch) and Projects/Users&Groups. You
should
<br>
notice that it behaves...exactly the same!
<br>
We look forward to your feedback. Jordan O'Mara & Jirka
Tomasek
<br>
<br>
[1] [<a class="moz-txt-link-freetext" href="https://review.openstack.org/#/c/55901/">https://review.openstack.org/#/c/55901/</a>] [2]
[<a class="moz-txt-link-freetext" href="https://github.com/jsomara/horizon/blob/angular2/horizon/templates/horizon/common/_workflow_step_update_members.html">https://github.com/jsomara/horizon/blob/angular2/horizon/templates/horizon/common/_workflow_step_update_members.html</a>]<br>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
OpenStack-dev mailing list
<a class="moz-txt-link-abbreviated" href="mailto:OpenStack-dev@lists.openstack.org">OpenStack-dev@lists.openstack.org</a>
<a class="moz-txt-link-freetext" href="http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev">http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev</a>
</pre>
</blockquote>
<br>
</body>
</html>