This presentation was given at Amplify Miami 2014 by William Paoli, Web Developer Team Lead at Atlassian. Adding AngularJS, for example, to the CMS makes for a beautiful customer experience. The presentation layer could never look so interesting without enhanced interactions provided by javascript. But how to take advantage of the power a javascript MVC framework when integrated with the power of Magnolia CMS? This presentation will illustrate how Atlassian is employing this technique to deliver highly engaging training modules through Atlassian University.

2. (ACTUALLY, JUST ANGULARJS)
WILLIAM PAOLI • WEB DEV TEAM LEAD • ATLASSIAN • @willyp
Incorporating JS Libraries into Magnolia

3. INTEGRATING TO MAGNOLIA
HOW TO CODE IN ANGULARJS
WHY WE LIKE ANGULARJS
WHAT WE DO NOW
Table of Contents

4. Interactive Marketing
Team

5. Atlassian University

6. Atlassian University is a training
tool that teaches your company
how to use Atlassian’s products
through videos and step-by-step
interactive tutorials. It’s the fastest
path to becoming a master of
Atlassian tools.
-ATLASSIAN’S WEBSITE
”
“

7. Atlassian University

8. Atlassian University

9. Atlassian University

10. Atlassian University

11. What is a JS Framework?

12. A JavaScript framework is a
library of pre-written JavaScript
which allows for easier
development of JavaScript-based
applications, especially for AJAX
and other web-centric technologies.
-WIKIPEDIA
”
“

13. A JavaScript framework is a
library of pre-written JavaScript
which allows for easier
development of JavaScript-based
applications, especially for AJAX
and other web-centric technologies.
-WIKIPEDIA
”
“

14. The Atlassian order form redesign

16. We realized we needed a JS Framework

19. -HIPSTER DEV
“ Have you tried Angular JS?

21. Just text by itself, for
impact.

22. Two way data binding

23. Data-binding in Angular web apps is the
automatic synchronization of data
between the model and view
components. The view is a projection of
the model at all times. When the model
changes, the view reflects the change,
and vice versa.
-ANGULARJS DOCS - http://docs.angularjs.org/guide/databinding
”
“

24. Two-Way Data Binding

25. favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
Two-Way Data Binding

26. Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul>
<li>Boris</li>
<li>Bill</li>
<li>Monica</li>
<li>Samuel</li>
</ul>

27. Two way data binding
favPeople=['Boris', 'Bill', 'Monica'];
<ul>
<li>Boris</li>
<li>Bill</li>
<li>Monica</li>
</ul>

28. Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul>
<li>Boris</li>
<li>Bill</li>
<li>Monica</li>
<li>Samuel</li>
</ul>

30. What/Who is AngularJS?

31. AngularJS is an open-source JavaScript
framework, started in 2010, now
maintained by Google.

32. AngularJS with Magnolia is fun

33. ...Magnolia proved once again to be an
exceptionally flexible CMS and in
combination with its REST API making
this proof of concept was indeed
extremely easy, fast and fun..
-FEDERICO GRILLI - SOFTWARE DEV @ MAGNOLIA, on his blog
”
“
http://igorstravinskij.blogspot.com/2014/01/
magnolia-rest-and-angularjs-proof-of.html

34. NOW FOR SOME LIVE CODING!
code found here:
https://bitbucket.org/willyp/angularjs-magnolia-basics/

35. How to get this into Magnolia

36. • Change your .html file to a .ftl
• Create paragraph and dialog definitions for:
• A question
• A answer
• Create an editing table
• Build your json structure based on that
template*
• Insert quiz paragraph as an option to your
layout
Steps to Magnoliafy™

37. Create new
freemarker
template
and define
the
paragraphs

38. Define paragraph with new
template

39. Define new dialogs for the
questions/answers

40. Create your content editing area

42. Create your JSON data with
freemarker

43. Create your JSON data with
freemarker

44. Now I add it to my layout
template

45. Lets go back to the browser and
pray this works!

46. WILLIAM PAOLI • WEB DEV TEAM LEAD • ATLASSIAN • @willyp
THANK YOU!
wpaoli@atlassian.com