ugf9097 using angular js in oracle application express

8/18/2019 UGF9097 Using Angular JS in Oracle Application Express

1/22

Using AngularJSIn APEX

Dan McGhanSenior Technical Consultant

1


2/22

My background! Dan McGhan

! Senior consultant with Accenture EnkitecGroup

! Joined in March 2013

!

[email protected]! @dmcghan

! Co-Author, Expert APEX

! A.K.A “that guy that wrote that plug-in”

! JavaScript fanatic

2

mailto:[email protected]


3/22

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/22

Hammer syndrom“I call it the law of the instrument, and it may beformulated as follows: Give a small boy a hammer,and he will find that everything he encountersneeds pounding”

~Abraham Kaplan

4


5/22

New Year’s Resolutions! Get MEAN

! Mongo, Express, Angular, Node

! Many other supporting technologies! Git, Grunt, Bower, Bootstrap, Yeoman, and many more

5


6/22

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/22

Thinking with MVC“Developing a UI? think state 1st, actions 2nd.Model the UI's state as observable. Then, makeactions that update state.”

“Everything else calls actions to update state, and

listens to state changes. Click -> action > statechange -> update UI”

~Justin B. Meyer

7


8/22

Application states! Persisted state

! Always database server

! Session state! Database, middle tier, or client side

! Page state! Always client side

8


9/22

Why use Angular in APEX?! Very complex, custom UI

9


10/22

Why use Angular in APEX?! When your boss gives you this…

10


11/22


12/22

HOW THE OTHER

HALF CODES A Dan McGhan Classic

LIVE DEMO

DAN MCGHAN


13/22

APEX Touch Points! Asset files! Page template! Ajax requests

13


14/22

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/22

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

15


16/22

Page template! Add ng-view to HTML

16


17/22

Page template! Include JS & CSS from file system

17


18/22

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/22

They can playnice together


20/22

IT’S LIKE JAVA!!!

ALL OVER AGAIN…


21/22

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/22

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

ugf9097 using angular js in oracle application express

Documents