Using Angular JS in APEX

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