Using AngularJS

In APEX

Dan McGhan
Senior Technical Consultant

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

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

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

New Years Resolutions

Get MEAN
Mongo, Express, Angular, Node

Many other supporting technologies

Git, Grunt, Bower, Bootstrap, Yeoman, and many more

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

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

Application states
Persisted state
Always database server

Session state
Database, middle tier, or client side

Page state
Always client side

Why use Angular in APEX?

Very complex, custom UI

Why use Angular in APEX?

When your boss gives you this

10

HOW THE OTHER

HALF CODES
A Dan McGhan Classic

LIVE DEMO

DAN MCGHAN

APEX Touch Points

Asset files
Page template
Ajax requests

13

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

Page template
Copy default page template as Angular Page
Add ng-app & ng-controller to HTML

15

Page template
Add ng-view to HTML

16

Page template
Include JS & CSS from file system

17

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

They can play

nice together

ITS LIKE JAVA!!!

ALL OVER AGAIN

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

http://www.enkitec.com

22