angular js in apex - nyougnyoug.org/wp-content/uploads/2014/12/mcghan_angularjs.pdf · title: how...

Copyright © 2015, Oracle and/or its affiliates. All rights reserved. |

Angular JS in APEXGetting the Best of Both Worlds

Dan McGhanDatabase EvangelistOracle Database ToolsDecember 11, 2014


My Background• Dan McGhan

– [email protected]– @dmcghan– danielmcghan.us

• Oracle Database Evangelist– Joined Oracle in December 2014– Focus on JavaScript and HTML5– Extensive background with APEX

Oracle Confidential – Internal/Restricted/Highly Restricted 3


Agenda

Why Angular?

Brief Angular Overview

APEX & Angular Integration

1

2

3



Agenda

Why Angular?



1

2

3



“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



My 2014 New Year’s Resolutions• Get MEAN!

– Mongo, Express, Angular, Node

• Learn 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



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

– Justin B. Meyer, Author of CanJS


“Everything else calls actions to update state, and listens to state changes. Click -> action > state change -> update UI”


• Persisted state– Database server

• Session State/Model– Database server

• APEX

– Middle tier• Java, .NET, etc.

– Client side• Angular, Backbone, etc.


• Page State– Client side

Application States


Advantages

• Avoid full page refreshes• Snappier applications• Reduced network traffic

Disadvantages

• Increased development time• Data can’t be trusted

– must re-validate server side


Client Side Logic


Complex, highly interactive UI


When is Client Side Logic Useful?


Angular: for the occasional page that APEX isn’t great for…


Why use Angular in APEX?


Agenda

Why Angular?



1

2

3



Ever heard of “How the Other Half Lives”?


Well today were going to see “How the Other Half Codes”!

Hello NYC!


Agenda

Why Angular?



1

2

3



APEX Touch Points• Asset files• Page template• Processes/Ajax requests



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



Page Template 1 of 3• Copy default page template as “Angular Page”

– All “pages” in Angular can reuse this 1 APEX template

• Add ng-app & ng-controller to the HTML



Page Template 2 of 3• Add ui-view to HTML

– If you’re using AngularUI Router (otherwise it’s ng-view)



Page template 3 of 3• Include JS & CSS from file system



Ajax Requests• Use 1 generic Ajax process for all processing

– Acts as a proxy

• Use Angular HTTP interceptor to mask complexity– Example in app-pre-browserify.js

• Standardize all Ajax processes to use PL/JSON– Procedures should have 1 JSON in and 1 JSON out– Example in todo_api.pkb & todo_api.pks



Developing in APEX is incredibly fast. While there are many benefits to JavaScript frameworks, development time will increase.


WARNING:


Summary• Angular is very powerful

– Feature rich, large community– Built for testing

• But Angular is also complex– Steep learning curve– Nothing like APEX

• Want to learn more?– Google: angularjs in 60ish minutes



Safe Harbor StatementThe following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.


angular js in apex - nyougnyoug.org/wp-content/uploads/2014/12/mcghan_angularjs.pdf · title: how...

Documents