Using AngularJS In APEX Dan McGhan Senior Technical Consultant 1 - - PowerPoint PPT Presentation

▶
using angularjs in apex
SMART_READER_LITE
LIVE PREVIEW

Using AngularJS In APEX Dan McGhan Senior Technical Consultant 1 - - PowerPoint PPT Presentation

Jun 12, 2023 204 likes •852 views

Using AngularJS In APEX Dan McGhan Senior Technical Consultant 1 My background Dan McGhan Senior consultant with Enkitec Joined in March 2013 dmcghan@enkitec.com Co-Author, Expert APEX A.K.A that guy that

slide-1
SLIDE 1

Using AngularJS In APEX

Dan McGhan

Senior Technical Consultant

1

slide-2
SLIDE 2

My background

— Dan McGhan

— Senior consultant with Enkitec

— Joined in March 2013 — dmcghan@enkitec.com

— Co-Author, Expert APEX — A.K.A “that guy that wrote that plug-in” — JavaScript fanatic

2

slide-3
SLIDE 3

About Enkitec

3

— Oracle Platinum Partner

— Established in 2004 — Headquartered in Dallas, TX — Locations throughout the US & EMEA

— Specialties include

— Exadata Implementations — Development Services

— PL/SQL / Java / APEX

— DBA/Data Warehouse/RAC — Business Intelligence

slide-4
SLIDE 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

slide-5
SLIDE 5

New Year’s Resolutions

— Get MEAN

— Mongo, Express, Angular, Node

— Many other supporting technologies

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

5

slide-6
SLIDE 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

slide-7
SLIDE 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

slide-8
SLIDE 8

Why use Angular in APEX?

— Your boss wants a “Todo” app — Seems simple enough, APEX to the rescue! — 10 minutes later you deliver the app

8

slide-9
SLIDE 9

But your boss wants more

— Dashboard w/Today, Tomorrow, & Future columns — Inline edit ability w/auto filtering & sorting — Drag & drop functionality — Custom validations & notifications — Who knows what else!

9

slide-10
SLIDE 10

Stage 1: Mock it up

— Download and include Bootstrap

— Add to /c/todos/vendor

— Include Bootstrap JS & CSS in page — Create HTML region w/HTML & CSS

10

slide-11
SLIDE 11

Stage 1: Mock it up

11

slide-12
SLIDE 12

Stage 1: Mock it up

12

slide-13
SLIDE 13

Stage 1: Mock it up

13

slide-14
SLIDE 14

Stage 2: Get Angular working

— Download & include Angular

— Add to /c/todos/vendor

— Create “todos” module — Move HTML to todos.tpl.html — Move CSS to todos.css — Include content via ng-app & ng-include

14

slide-15
SLIDE 15

Stage 2: Get Angular working

15

slide-16
SLIDE 16

Stage 2: Get Angular working

16

slide-17
SLIDE 17

What is a directive?

— Extend HTML w/custom attributes and elements

— Adds some web component functionality today

— Angular includes many directives by default — Developers can create their own directives

17

slide-18
SLIDE 18

Stage 2: Get Angular working

18

app.js

slide-19
SLIDE 19

Stage 2: Get Angular working

19

slide-20
SLIDE 20

Stage 2: Get Angular working

20

slide-21
SLIDE 21

Stage 3: Get filter buttons working

— Create todos-controller.js — Link controller to template via ng-controller — Use ng-class and ng-click to get buttons working

21

slide-22
SLIDE 22

What is a controller?

— The business logic behind views — Typically used for two things

— Initialize scope — Handle interaction with the user

22

slide-23
SLIDE 23

What is scope?

— The glue between the model and the view

23

+ =

slide-24
SLIDE 24

Stage 3: Get filter buttons working

24

todos-controller.js todos.tpl.html

slide-25
SLIDE 25

Stage 3: Get filter buttons working

25

todos.tpl.html

slide-26
SLIDE 26

Stage 3: Get filter buttons working

26

slide-27
SLIDE 27

Stage 4: Get checkbox working

— Create PL/SQL procedure to generate JSON — Create a service to fetch the data — Use module config to override Ajax POST — Expose data from service to template — Use ng-repeat to iterate over data — Create the PL/SQL process to save state — Add the save completed method to the service — Add ng-change directive

27

slide-28
SLIDE 28

Stage 4: Get/set real data

28

GET_TODOS_JSON

slide-29
SLIDE 29

What is a service?

— Reusable business logic independent of views — Can be created different ways

— value — factory — service — constant — provider

29

slide-30
SLIDE 30

Stage 4: Get/set real data

30

todos-service.js

slide-31
SLIDE 31

Stage 4: Get/set real data

31

app.js

slide-32
SLIDE 32

Stage 4: Get/set real data

32

todos-controller.js

slide-33
SLIDE 33

Stage 4: Get/set real data

33

todos.tpl.html

slide-34
SLIDE 34

Stage 4: Get/set real data

34

SAVE_COMPLETED

slide-35
SLIDE 35

Stage 4: Get/set real data

35

todos-service.js

slide-36
SLIDE 36

Stage 4: Get/set real data

36

todos.tpl.html

slide-37
SLIDE 37

Stage 5: Add filters

— Add orderby filter — Create custom filters for

— Today — Tomorrow — Future

37

slide-38
SLIDE 38

What is a filter?

— Ummmm, a filter

— But wait, there’s more!

—Filters also sort and format

— date — currency — uppercase — lowercase

38

slide-39
SLIDE 39

Stage 5: Add filters

39

todos.tpl.html

slide-40
SLIDE 40

Stage 5: Add filters

40

today-filter.js

slide-41
SLIDE 41

Stage 5: Add filters

41

todos.tpl.html

slide-42
SLIDE 42

Stage 6: Move todos to a directive

— Move todo HTML to todo.tpl.html — Create todo-directive.js

42

slide-43
SLIDE 43

Stage 6: Move todos to a directive

43

todo.tpl.html

slide-44
SLIDE 44

Stage 6: Move todos to a directive

44

todo-directive.js

slide-45
SLIDE 45

Stage 6: Move todos to a directive

45

todos.tpl.html

  • r
slide-46
SLIDE 46

Stage 7: Start edit functionality

— Create DELETE_TODO process — Add edit and remove methods to the service — Update todo.tpl.html to handle edit “state” — Create todo.css — Edit todo directive to use datepicker/timepicker

46

slide-47
SLIDE 47

Stage 7: Start edit functionality

47

DELETE_TODO

slide-48
SLIDE 48

Stage 7: Start edit functionality

48

todos-service.js

slide-49
SLIDE 49

Stage 7: Start edit functionality

49

todos-service.js

slide-50
SLIDE 50

Stage 7: Start edit functionality

50

todo.tpl.html

slide-51
SLIDE 51

Stage 7: Start edit functionality

51

todo.css

slide-52
SLIDE 52

Stage 7: Start edit functionality

52

todo-directive.js

slide-53
SLIDE 53

Stage 8: Finish edit functionality

— Add the UPDATE_TODO process — Add save and discardChanges methods to service — Update the template to call the methods

53

slide-54
SLIDE 54

Stage 8: Finish edit functionality

54

UPDATE_TODO

slide-55
SLIDE 55

Stage 8: Finish edit functionality

55

todo-service.js

slide-56
SLIDE 56

Stage 8: Finish edit functionality

56

todo-service.js

slide-57
SLIDE 57

Stage 8: Finish edit functionality

57

todo.tpl.html

slide-58
SLIDE 58

Stage 9: Add “new” ability

— Add “add” method to service —Add the CREATE_TODO process —Update “change” method to accommodate —Update template to call the method

58

slide-59
SLIDE 59

Stage 9: Add “new” ability

59

todo-service.js

slide-60
SLIDE 60

Stage 9: Add “new” ability

60

CREATE_TODO

slide-61
SLIDE 61

Stage 9: Add “new” ability

61

todo-service.js

slide-62
SLIDE 62

Stage 9: Add “new” ability

62

todo-service.js

slide-63
SLIDE 63

Summary

— Angular is complex

— Lots of new terms — Steep learning curve

—But it’s also very powerful

— Feature rich — Built for testing (yes, you should be testing)

—Want to learn more?

— Google: angularjs in 60ish minutes

63

slide-64
SLIDE 64

http://www.enkitec.com

64