This document discusses using the AngularJS framework within Oracle Application Express (APEX) applications. It provides background on the presenter and his company, which focuses on Oracle technologies. It then explains some key aspects of integrating AngularJS and APEX, such as linking Angular asset files, modifying the page template, and standardizing Ajax processes. While AngularJS is powerful and feature-rich, it also has a steep learning curve and is more complex than standard APEX development.

1. Using AngularJS
In APEX
Dan McGhan
Senior Technical Consultant
1

2. My background
— Dan McGhan
— Senior consultant with Accenture Enkitec
Group
— Joined in March 2013
— dmcghan@enkitec.com
— @dmcghan
— Co-Author, Expert APEX
— A.K.A “that guy that wrote that plug-in”
— JavaScript fanatic
2

3. About Accenture Enkitec Group
— Result of acquisition of Enkitec by Accenture in
May 2014
— Global systems integrator focused on the Oracle platform
— Headquartered in Dallas, Texas
— Consultants average 15+ years of Oracle experience
— ~20 Oracle ACE members on staff
3

4. Hammer syndrom
“I call it the law of the instrument, and it may be
formulated as follows: Give a small boy a hammer,
and he will find that everything he encounters
needs pounding”
~Abraham Kaplan
4

5. New Year’s Resolutions
— Get MEAN
— Mongo, Express, Angular, Node
— Many other supporting technologies
— Git, Grunt, Bower, Bootstrap, Yeoman, and many more
5

6. What is Angular?
— A JavaScript MVC framework
— Others include Backbone, Ember, & Knockout
—Created by and maintained by Google
— Typically used to build SPAs
— Requires a “new” way of thinking
6

7. Thinking with MVC
“Developing a UI? think state 1st, actions 2nd.
Model the UI's state as observable. Then, make
actions that update state.”
“Everything else calls actions to update state, and
listens to state changes. Click -> action > state
change -> update UI”
~Justin B. Meyer
7

8. Application states
— Persisted state
— Always database server
— Session state
— Database, middle tier, or client side
— Page state
— Always client side
8

9. Why use Angular in APEX?
— Very complex, custom UI
9

10. Why use Angular in APEX?
— When your boss gives you this…
10

12. HOW THE OTHER
HALF CODES
A Dan McGhan Classic
LIVE DEMO
DAN MCGHAN

13. APEX Touch Points
— Asset files
— Page template
— Ajax requests
13

14. Asset files
— Create a directory on the file system
— /c/todos
—Copy assets from Angular to the file system
— /angular-proj/bin/assets > /c/todos
—Create a substitution string in APEX
14

15. Page template
— Copy default page template as “Angular Page”
— Add ng-app & ng-controller to HTML
15

16. Page template
— Add ng-view to HTML
16

17. Page template
— Include JS & CSS from file system
17

18. Ajax requests
— Use 1 generic Ajax process for all RPC methods
— Use Angular HTTP interceptors to mask
complexity
— Example in app-pre-browserify.js
— Standardize all Ajax processes to use PL/JSON
— JSON in & out
— Example in todo_api.pkb & todo_api.pks
18

19. They can play
nice together

20. IT’S LIKE JAVA!!!
ALL OVER AGAIN…

21. Summary
—Angular is very powerful
— Feature rich
— Built for testing (yes, you should be testing)
— But Angular is also complex
— Steep learning curve
— Nothing close to APEX
—Want to learn more?
— Google: angularjs in 60ish minutes
21

22. http://www.enkitec.com
22